4000字干貨!互聯網產品設計的6個創新方法

推薦閱讀

前言

設計是為了解決問題,然而并不是所有問題都存在現有的解決方案。這時,創新的出現能夠打破僵局,賦予設計新的生命力,用更加獨特的思維方式來解決問題。不過,創新又經常虛無縹緲,盡管苦思冥想也難等到靈光乍現。

我們日常遇到的設計問題并不需要顛覆式的創新,而是在現有框架下的改善。我們接下來要討論的就是針對這種需求的創新思維,它是美國創新專家德魯·博迪的觀察和研究,并著成一本名為《Inside the Box》的書,國內譯為《微創新》。書中介紹了這種“系統創新思維”,介紹一些推動創新的方法。這些方法有跡可循,適用于進行想法的發散,將收集的想法進行篩選,論證可行性,最終形成有效的創新方案。接下來具體介紹一下這幾種方法,并探討在互聯網產品設計領域如何運用。

一、少即是多:減法策略

減法是將某個產品中的一個關鍵部分刪除。比如電視沒有了屏幕、汽車沒有了輪子。乍一聽感覺很令人費解。因為減法好像有點意味著倒退,與技術的進步相悖,感覺不符合事物的發展規律,因此很容易讓我們忽略。

實際上,生活中很多產品都是通過減法而產生的。比如在 20 年前所有用戶都認為鍵盤是手機不可缺少的組成部分,但是 IBM 發布了第一款刪掉鍵盤的純觸摸屏手機,打破了用戶的固有印象,對后續的智能手機設計產生了深遠影響。

在互聯網產品設計領域,減法一般是針對產品中的流程、功能或界面元素進行刪除。

社交 App 刪除圖片的歷史查詢功能是一種什么體驗?Snapchat 一經問世,就因其新穎的閱后即焚功能而爆火。乍一聽可能你感覺奇怪,但是不妨仔細深究這個減法會帶來什么好處呢?Snapchat 的創始人認為在當今的互聯網環境中,用戶們的社交樂趣受到了限制,難以按照個人的意愿自由交流。特別是對于年輕群體而言,盡管他們天生熱愛分享,卻也對任何形式的束縛感到抵觸。Snapchat 之所以能夠吸引大量用戶,其關鍵之一便在于它有效緩解了因內容可能被永久記錄而帶來的心理壓力和緊張感。同樣的,微信的朋友圈僅三天可見功能也是出于同樣的考慮。

4000字干貨!互聯網產品設計的6個創新方法

短視頻類 App 去掉了傳統視頻 App 的視頻列表頁,將“選視頻”這個步驟刪除了,進而給用戶帶來了不一樣的使用體驗。優點是用戶由于無法預知下一個視頻,從而心存期待,每一次的滑動都可能產生驚喜。缺點是無法掌控每一次播放的內容。

視頻 App 將視頻畫面刪除乍一聽很不合理,但是健身、駕駛等很多場景下用戶只想聽視頻的講解并不需要看畫面,而且去掉畫面只保留聲音可以支持后臺播放還能節省流量費用,也是顯著的優勢。

4000字干貨!互聯網產品設計的6個創新方法

在實施減法策略時,可以使用以下步驟:

  1. 羅列元素:列出產品的組成元素;
  2. 選擇刪除:選擇一個基礎元素將其完全或部分刪除。確保在減少元素的同時,不損害產品或服務的核心功能和價值;
  3. 思考優勢:想象刪除后對這個產品有哪些好處?滿足什么樣的市場需求?哪些用戶需要這樣的產品?
  4. 考慮落地:如果確認刪除后會帶來創新,就需要考慮可行性了。真的能夠按照這種方式落地嗎?落地后可能帶來的負面問題是否能接受呢?

例如我們可以嘗試著按照步驟練習,微信去掉好友的名字和頭像,音樂播放器去掉進度條等等,雖然看起來不太合理,但是想一想是否滿足了特定場景的需求。

以下其他的策略的步驟類似,因此接下來不再贅述。

二、分而治之:除法策略

除法是將設計中的某一部分調整到其他位置,或者將一個部分分割為多個模塊。

傳統的手機遙控機按鍵都逐一排布出來,視覺上臃腫冗余。現在的智能電視通過將低頻的功能內置在了電視機內部的界面里從而實現了遙控器的簡潔。需要注意的是,這雖然迎合了年輕用戶的審美,但是對于中老年人來說使用起來可能學習和記憶成本較高。

4000字干貨!互聯網產品設計的6個創新方法

iOS14 的新功能小組件,允許用戶將 App 的高頻功能放到桌面,在 App 的外部就可以直接觸發相應的功能。相當于給 App 做了一個除法。

4000字干貨!互聯網產品設計的6個創新方法

幻燈片在會議室大屏展示時,切換頁面需要電腦控制,非常不方便。于是 Keynote 將遠程控制功能單獨拆分出來,做成移動端 App,這樣就可以實現通過手機遠程控制。

在線視頻 App 的「只看 TA」功能也是除法策略的體現之一。將視頻以演員的維度分割為多份,供用戶進行選擇播放。不但能滿足對應的粉絲群體,而且對于時間有限的觀眾來說,這個功能讓他們快速瀏覽感興趣演員的所有場景,而無需觀看整部作品。

4000字干貨!互聯網產品設計的6個創新方法

三、生生不息:乘法策略

乘法是將某個元素復制多份,被復制出來的副本可以發生部分的屬性變化。

吉列剃須刀的創新演進過程就是一個經典的乘法策略創新案例。吉列公司在 1903 年推出了使用一層薄薄的鋼片作為刀片的安全剃須刀。這種剃須刀的設計避免了傳統開刃剃須刀的危險和不便。不過,吉列公司并沒有止步于此,而是繼續尋求新的創新方式。他們將兩個刀片組合在一起,留出一定的間隙。這樣,當第一個刀片剃過胡子后,第二個刀片可以再一次剃過去,從而實現了一次刮胡等于兩次的效果。這不僅減少了刮胡次數,還提高了剃須的清潔度。最終上市后成功贏得了市場的認可。

如今智能手機廠商在攝像頭上做起了乘法,從一個攝像頭到如今的兩個三個甚至四個。不同攝像頭擔任不同任務,比如廣角、微距、人像虛化等,可以讓用戶在不同場景下拍攝出更加優秀的照片。

4000字干貨!互聯網產品設計的6個創新方法

乘法的創新在互聯網產品也比較常見。例如對用戶使用乘法,如今音樂 App 不僅可以一個人聽歌,也可以匹配聽友兩個人一起聽。甚至出現一起刷短視頻、一起 P 圖等支持多個用戶同時操作的功能。

傳統的打車 App 只能提供一個平臺的打車服務。高德地圖利用自身流量優勢,推出了聚合打車服務,整合了多家網約車平臺。用戶無需下載多個 App,即可在同一平臺上呼叫多種車型,大大提升了叫車的便捷性,有效縮短了等車時間。

4000字干貨!互聯網產品設計的6個創新方法

四、移花接木:加法策略

談到加法,總有一種不那么創新的感覺。因為加法的使用太過于泛濫,使用不當反而起到反效果,使得設計變得臃腫。因此我們在這里提到的加法并不是簡單的添加某個具體元素,而是某種技術、表現形式、方法論、載體等,體現出來的是一種借鑒與融合的思維。

1. 表現形式的加法

生活中,我們經常看到各類品牌的聯名產品,通常為產品加入聯名品牌的表現形式進行呈現。比如去年瑞幸推出的醬香拿鐵,不但口感上有著白酒的風味,包裝設計上也加入了茅臺包裝的表現形式,最終以這種令人眼前一亮的創意火爆出圈。

4000字干貨!互聯網產品設計的6個創新方法

在網易云音樂,播放器模式也有眾多在表現形式上做了加法的聯名款。比如藝術家系列、光遇聯名款、泡泡瑪特聯名款等,在熟悉的界面布局上給予用戶不一樣的新鮮感,上線至今深得眾多用戶的喜愛。

4000字干貨!互聯網產品設計的6個創新方法

2. 交互形式的加法

在互聯網設計中,我們潛移默化地認為特定的內容需要使用特定的交互形式,但是打破這種固有印象或許能夠帶來意想不到的效果。

例如淘寶借鑒短視頻的“刷”這個動作,把它和瀏覽商品相融合,創造了一種全新且充滿隨機感的商品瀏覽體驗。

4000字干貨!互聯網產品設計的6個創新方法

交友軟件 Tinder“左滑無感,右滑喜歡”的交互形式曾經引得國內競品爭先模仿。換個角度思考,這個交互形式是否能用在音樂軟件上呢?畢竟有時我們選歌也要靠"眼緣"的嘛。基于此,網易云音樂上線了推歌精選功能,通過這種特殊的交互形式帶給用戶別樣的選歌體驗。

4000字干貨!互聯網產品設計的6個創新方法

五、一專多能:任務統籌

任務統籌指的是最大限度地利用現有的內部資源,讓固定的資源發揮出更多的價值。例如手機的閃光燈除了在拍照時使用外,還被用來做手電筒,甚至是測量血壓的儀器。

在互聯網產品設計中,屏幕的面積寸土寸金,如何讓一個元素承擔更多的功能從而盡可能地節約屏幕空間和簡化界面一直是一個難題。

例如,抖音在某個版本中,將進度條的位置進行充分利用。不僅展示進度條,而且當用戶調節音量時,暫時隱藏進度條騰出位置來展示音量,音量使用不同顏色與進度進行區分。除此之外,這個位置還用于展示網絡狀態不佳時的加載動畫。可以說真的做到了物盡其用。

4000字干貨!互聯網產品設計的6個創新方法

iOS16 更新的靈動島將一個原本是視覺缺陷的劉海區域賦予了新的任務,將通知、狀態提示、彈窗等一系列功能集中于此,為原本靜態的硬件缺陷帶來了全新的趣味,也讓用戶更容易接受這個缺陷了。

4000字干貨!互聯網產品設計的6個創新方法

順帶提一下,第一次見到靈動島時,其實我腦中想到類似的設計是下圖的這種手機殼,它將攝像頭轉化為畫面中有意義的元素,也是通過為一些缺陷帶來趣味性從而取悅用戶。

4000字干貨!互聯網產品設計的6個創新方法

iOS16 另外的一個任務統籌設計是對桌面下方的頁面指示器的修改,將其未被使用時進行隱藏,展示搜索入口。當滑動頁面時再展示頁面指示器。目的也是節省頁面空間,減少復雜度。

4000字干貨!互聯網產品設計的6個創新方法

今后面對一些看似很難再添加元素的界面時,可以思考可以利用哪些已有的元素進行任務統籌。

六、巧妙相關:屬性依存

屬性依存指的是從設計中選擇一個元素,讓這個元素的某個屬性變化依賴于設計中或設計外的另外一個元素的某個屬性變化。

西班牙兒童及青少年援助基金會曾投放過一則公益廣告,由大人視角,只能看見“虐待兒童的行為,有時只有受害者看的見”的文案,和一個表情憂郁的男孩。但是如果將視線低至 135 公分以下,看板則會顯示完全不同的文案:“如果有人傷害你,請撥打這支電話,我們會幫助你”。畫面上的男孩臉上會出現遭受暴力而留下的淤血。設計師巧妙地將信息的可見性依存于觀看視角,從而達到了這樣令人印象深刻的效果。

4000字干貨!互聯網產品設計的6個創新方法

《微創新》一書中寫到“大約三分之一的創新都來自于屬性依存”。可見其應用之廣泛。下面我們看一些在互聯網產品設計中的案例。

近期上線的網易云音樂的故宮系列播放器樣式,將聽歌時長與黑膠華麗程度建立了屬性依存關系。隨著用戶的聽歌時長增加,黑膠會呈現越來越豐富的視覺效果。這鼓勵了用戶投入更多時間聽歌,大大增加了平臺對用戶的粘性。

4000字干貨!互聯網產品設計的6個創新方法

錘子科技的 Smartisan OS 操作系統更新了感知光影桌面模式。將手機桌面的圖標投影和高光、背景動畫與當前環境的天氣、光照情況、手機握持視角之間建立了屬性依存關系。隨著時間和天氣的變化,圖標投影會改變方向和大小,背景動畫會在晴天、下雨、下雪等狀況中切換。這些細節使得功能性的桌面充滿了自然優雅的美學享受,讓界面設計與物理世界緊密相連。

4000字干貨!互聯網產品設計的6個創新方法

其實互聯網產品中最常見的就是顏色的依存關系,例如豆瓣的書影音的詳情頁背景顏色是依賴于封面的主色進行變化,小宇宙的 UI 元素也是跟隨播客封面主色進行變化,這樣的設計能夠豐富用戶的視覺體驗,讓每個內容的界面都顯得獨一無二。

4000字干貨!互聯網產品設計的6個創新方法

在 teambition 官網的團隊展示頁面中,團隊成員的面部會依賴于鼠標的移動產生朝向的變化,創意十足、生動有趣

4000字干貨!互聯網產品設計的6個創新方法

結語

希望以上內容能帶給你一些關于創新的啟發。有時創新的來源不是對思想的無盡放任,而是合理約束。遇到瓶頸時在這些方法的框架下想一想,可能會比漫無目的隨意發散更有效。即使想出的創意剛開始非常的天馬行空,但是抽絲剝繭后或許會有不一樣的收獲哦。

參考書籍:

  • 《微創新》
  • 《體驗設計白皮書》
收藏 38
點贊 48

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。