萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 交互設計的簡約之道與實際應用

交互設計的簡約之道與實際應用

  隨著信息過載越來越嚴重,人們的負擔也越來越嚴重。手機、PC、平板甚至各種穿戴式設備等傳遞著各種消息,微信、微博等不斷蠶食著我們的時間。事實上,很多時候我們已經不堪重負,每天早上當我醒來打開微信的時候,都有著十幾條的信息。

  信息的泛濫,在很大程度造成了人們的注意力的分散。現在的移動應用,如果不能在10秒鐘內吸引用戶,也許再也沒有機會了。應用趨向於簡單、易上手。風靡世界的憤怒的小鳥、切水果、會說話的湯姆貓,交互方式都簡單而且創新,或者手指滑動屏幕,或者只需對著屏幕說話。

  互聯網的用戶通常可以分為如下三類:主流用戶、隨意型用戶、專家型用戶。不同的地點(辦公室、家、戶外)、不同的場景干擾因素不同,產品的著力點也不一樣。但由於我們平時接觸較多的熱心用戶,更多的是屬於專家型用戶,這也是做產品時常犯的一種錯誤:為那些專家型用戶設計。

交互設計的簡約之道與實際應用 三聯

  《簡約至上》中作者就提出了四條策略來闡述如何讓設計更簡單:

  刪除—去掉所有不必要的按鈕,直至減到不能再減

  組織—按照有意義的標准將按鈕劃分成組

  隱藏—把那些不是最重要的按鈕安排在不明顯的地方,避免分散用戶注意力

  轉移—只保留具備最基本功能的按鈕,將其他不常用的轉移到其他設備

  如上圖是DVD遙控器,作者運用這四條策略分別簡化後的效果:

  簡約策略的實際應用

  刪除

  刪除策略的核心是,干掉那些分散注意力的因素,聚焦於項目。在確定什麼功能該保留、什麼功能該刪除的時候,遵循如下原則:

  刪除—去掉所有不必要的按鈕,直至減到不能再減:iPhone和iPad就簡化到只有一個Home按鍵。

  應對用戶在使用產品過程中常見的干擾源也是關注核心的一部分:

  看電視時來電話了這是個很常見的干擾,這時候就可以用靜音按鈕來解決。因此設計遙控器的時候就要通過按鈕大小、位置、顏色使得靜音按鈕明顯。

  玩手機游戲的時候來電話了,當你接電話的時候游戲都會自動暫停,當重新開始後又會有幾秒鐘時間提醒你開始玩。

  360浏覽器、谷歌浏覽器異常關閉了,下一次打開時就會詢問是否重新打開上一次關閉的頁面。

  當客戶再次光顧網站/應用,它通常願意以前次離開的狀態作為起點:

  福昕閱讀器每次打開同一個PDF文件,顯示的都是第1頁,與此形成對比的是手機QQ閱讀浏覽器則每次打開的都是上次閱讀的頁碼。

  Chrome、獵豹等浏覽器支持啟動時繼續浏覽上次關閉浏覽器時在看的網頁

  去除干擾源,不讓用戶分心

  印象筆記出了一款chrome插件—悅讀,用來去除與閱讀無關的內容。不少網友都有看有小說被各種彈出廣告、浮動廣告干擾的經歷,當選中文字進入“悅讀”模式可以屏蔽所有的廣告,同時提供了夜間模式,避免夜晚的時候屏幕過強的光線刺激用戶眼睛不能專心閱讀。

  組織

  分塊越少,選擇越少,用戶負擔越輕。

  按照有意義的標准將按鈕劃分成組:

  Word上作為一款文字處理應用程序功能很強大,但也由此帶來了非常多的功能,但通過分塊地方式很好地將類似的功能組合在一起。頁面上方提供“頁面布局”、“引用”、“審閱”、“視圖”等菜單,每個菜單根據子項分塊組合。當我需要需要插入頁眉時,會想到點擊“插入”菜單,發現“頁眉和頁腳”分塊下 “頁眉”、“頁腳”、“頁碼”三項。不需要毫無頭緒地從眾多功能中逐個查找了。

  關於分塊組合最常見的例子是iOS上的應用,iOS的Table控件本來就有一種是Group風格的。

  微信底部朋友們、設置兩個標簽都采用了分塊的方式來組織信息,將搜索號碼、掃描二維碼、從QQ好友列表、從手機通訊錄查找好友等添加好友的各種方式組織在一起。

  隱藏

  漸進展示:核心功能+擴展功能的模式

  隱藏策略我最喜歡的一個案例是植物大戰僵屍(保衛蘿卜也采取了這種方式)。植物大戰僵屍的引導頁面做的非常棒,一開始只提供最簡單的道具(隱藏高級的道具),每完成一個關卡就會獎勵一個道具,並在下一關卡讓你使用。這種漸進式的展示,既通過獎勵道具激勵用戶,又讓用戶熟悉了道具的特點、用法。

  需要時才顯示

  Path在手指上下滑動時會顯示好友的頭像和信息發布的時間,但一旦停留在某張圖片上時(這通常意味著你對這張照片感興趣),會將頭像和時間隱藏起來,讓用戶聚焦於感興趣的地方。

  轉移

  轉移策略的核心轉移復雜性,是讓每個組件/平台發揮自己的優勢:

  iPad和iPhone只有一個Home鍵,將設置轉移到界面內

  在如今的PC和移動應用上大有用武之地。比如手機輸入遠不如PC便利,微信網頁版就允許用戶在PC上登錄。

  最近豌豆莢新增了“零流量下載”:用戶選擇想要下載的電影,手機連接PC後PC上的豌豆莢會自動下載。因為絡速度慢且資費昂貴,但這對PC而言根本不是問題,所以就很自然地把這類問題轉移到PC端。

copyright © 萬盛學電腦網 all rights reserved