行業關鍵字
UI設計UI理論和資料 → 正文
互聯網企業實戰UI交互設計流程
作者: 劉超 來源: 視覺同盟 時間: 2017年6月12日

多款用戶過億互聯網產品體驗設計背后的方法論

什么是交互設計呢?交互設計(英文Interaction Design, 縮寫IXD),但在企業工作我們不需要背理論,我們只要記住他的2點屬性就好了:1 交互設計是設計人和機器之間的交互關系,由于機器的載體不同,所以最早的交互設計起源于工業設計,例如汽車的儀表盤設計就是人和汽車之間的交互設計,電腦的鼠標鍵盤設計就是人和電腦之間的交互設計,而今天由于各種終端的屏幕變大,人機交互大多體現在人和軟件之間的交互設計。2 單純的圖形設計專注靜態頁面設計,而交互設計專注動態操作流程設計。簡單記憶就是交互設計是人機之間的交互,交互設計是動態流程的設計。

我們在實際設計工作中是如何做交互設計的呢?大概氛圍以下4個部分,他們分別是“信息構架”“典型頁面”“信息導航” “低保真原型圖”“高真原型動態Demo”

(1)“信息構架”,英文Information architecture,簡稱IA。信息架構是一個產品功能及??櫚幕竟鉤?,通常用腦圖的形式來表達及構建,所以也稱之為思維腦圖?!靶畔⒖蚣堋鋇難≡窆叵檔講肺蠢垂δ芡卣?,需要在一開始就及時構建。

我們來看一下簡單的“信息構架”案例,例如5年前我負責設計的百度視頻APP的第一版功能信息框架,我們最初把信息分為兩類,左邊的是熱門,其實就是內容運營,右邊是基礎功能。通過這個基礎分類來設計后續的產品結構。

還有2016年我和團隊發起的項目“百度UE講堂”,這頁就是“百度UE講堂”的知識圖譜,也就是百度UE講堂的信息框架圖。我們用魚骨圖的方式表達。其中包含了UI設計知識的從基礎到高級的信息框架。信息框架是交互設計的基礎,交互設計師和產品經理一起討論完成這部分工作。

我們給大家展示一個學生案例,他們是看了百度UE講堂課程后的學生作品。第一個學生作品“造藝家”由天津美院,天津工業大學,天津城建大學的同學完成。大家可以看到他們的構架圖,首選選擇了舵式框架,第一層級分為3D全景,商城,我的,案例和攻略,接下來就是每一個層級的細分。同學們在討論梳理這些工作的時候,鍛煉邏輯思維的能力。

接下來再看指園針這個幼兒園app產品的構架圖,他們是由清華大學美術學院皇家墨爾本理工學院等同學完成,同學們把邏輯分為發現,我的,幼兒園,個人定制這四個維度層級。仔細看每個層級的下面還有子層級,經驗證明手機APP的層級最好不要超過4層,否則用戶很難發現。

下一個展示的是天津美院天津工業大學的同學完成的美妝App,他們第一層級分為五個邏輯分類,如果是常用功能每層的邏輯分類不超過5個,但不常用的分類可以很多,例如在“我的”這個層級,一般都是把不常用的信息藏在這里,所以有9個邏輯分類。

(2)典型頁面草圖,英文叫做Major interface Sketching。典型頁面的草圖繪制,可以快速產出想法與思路。主要用于核心典型頁面的頭腦風暴討論使用。

產品設計開發是一個討論和修改的過程,如果我們在討論的時候就畫出精美的效果圖,修改的時候成本就會很高,所以我們經常先畫最簡單的手繪草圖,我可以比比喻為建筑鋼筋框架,然后做成低保真原型圖,我們可以比喻為毛坯房,最后再做成視覺效果圖,甚至高保真動態Demo,我們可以比喻為精裝修。

那我們最初設計的手繪是什么頁面呢?我們稱之為典型頁面。也許有同學會問什么叫典型頁面呀?就是最常用最常見的頁面,我們以百度某產品為例,例如首頁、信息列表頁、詳情頁。這幾個是最基本的典型頁面。

當然還有主要功能頁面,例如百度國際化產品省電APP,不同狀態的省電展現模式就是功能頁面也就是它的典型頁面。

根據產品的不同還有很多頁面也可以叫典型頁面,例如百度海外音樂的典型頁面,根據音樂的特型我們要展現Logo、專輯、單曲、搜索等頁面。

確定了典型頁面后,就是手繪草圖了,手繪草圖的目的是方便討論提高效率。

大家可以看到這個紙張上有坐標的點,是非常專業的UI草圖繪制底紋,我們叫它網點本或UI設計本,各位可以體驗一下。我相信大家都用過手機APP,所以用這種本和尺子可以很輕松的畫出方案的典型頁面,用于大家快速討論。以下都是我們百度UE講堂學生的作品。

(3)信息導航,英文叫做Navigation。選擇信息導航是交互設計最重要的一步,要想正確選擇導航就要對各種導航框架的優缺點了解透徹。那么接下來我們以手機APP設計為例,給大家介紹一下不同APP導航框架的特點??蚣?,簡單式導航框架布局很簡單,上面是信息下面是按鈕。操作簡單明確,無需思考,操作效率很高,適合工具類產品,例如最近很火的共享單車OFO解鎖頁面,上面是開鎖密碼,下面有一個手電筒按鈕,方便夜晚照明??悸塹絞彝獠僮骰肪?,這種最簡單易學習的框架就非常合適了。但要知道這種框架有一個缺點,就是不容易擴展,如果未來要增加很多功能,這個框架就要重新設計了。

框架2翻頁式:多個簡單式的擴展,例如天氣APP,如果你只關注1個城市的天氣,當然簡單式最好了,但大多數用戶會關注幾個城市的天氣,所以就要用擴展式了,但擴展多了,后面的頁面被點擊幾率就會嚴重降低。

框架3宮格式:入口清晰且容易記住位置,但各功能間切換困難。其實大多數手機的主頁面也都是這種宮格式。如果用于APP框架,就要考慮產品功能之間沒有什么跳轉切換的需求,而且功能分組也不多,例如百度魔圖。

框架4上導航。導航區域放在屏幕上方,一目了然不需要跳轉,還可以增加子集導航,但由于導航在上面單手操作點擊還是有一定困難,所以多用于不常跳轉,但信息層級比較多還需要看讓用戶清邏輯關系的產品。總結來說就是看得多,點的少的導航框架。

框架5下導航。繼承上導航的優點,且方便單手點擊。目前是采用最多的方式。其實Android最早推崇上導航,iPhone推崇下導航。當手機屏幕很小的時候,用戶覺得無所謂,但隨著屏幕越來越大以后,上導航就不好點了,下導航的App越來越多了。

下導航還有一個變體就是突出一個功能,我們稱之為舵式。就是中間的按鈕很突出,這個按鈕的邏輯和其他不一樣,這個按鈕是功能,其他是導航。而且這個按鈕一般還是用戶很常用,或者希望用戶常用的功能。

接下來是抽屜側邊欄模式,現實產品中并不是每個功能使用頻次都一樣,大多數時間我們都主要使用20%的常用功能,但其他80%不常用的功能藏在這里,用戶也比較容易發現,這個就是抽屜側邊欄。

最后這個是側邊欄的變體:隱藏式,加上酷炫動畫,體現了產品個性讓用戶記憶深刻。

當基礎導航框架確認后,我們就要進入第四章低保真原型圖(線框流程圖)英文叫做Low fidelity prototype。我們說過交互設計是“操作動態行為”的設計。低保真原型圖(線框交互流程圖)是很好的方式,低保真原型圖是技術開發,測試及設計人員進行全面的界面設計的依據。

低保真原型圖必須要用電腦繪制啦,所以我在這里教大家幾種低保真原型圖的繪制方法1:灰白會+色塊,這個方法最簡單快捷。我們把信息元素分成4個重要級別,在PS里調整圖層透明度或者灰度即可,例如重要元素60%的透明度,普通元素80%透明度,輔助元素95%透明度,其他區域白色。這樣黑白灰對比美觀,也體現了功能主義設計的理念,UI設計服務信息傳遞效率。

方法2:黑白灰加去色圖形。大體和上個方法很像,重要元素60%的灰,輔助元素95%的灰,其他顏色用白色或者米色,用米色比較暖,可以有一定的個性。這里的變化是增加去色語義圖形,這對圖形設計和符號學理解有一定的要求。

方法3,這個方法更漂亮清晰,對圖形設計對要求也更強一些,除了輔助元素用80%的透明灰這些老辦法以外,重要元素要用色彩表示了,而且色彩是有情感的,例如綠色表示正向,藍色表示中性,紅色表示負向等,當然也有用品牌色加強用戶記憶的。而且這個方案的圖標全部使用真實高保真模擬了。

剛才我們多次說過,交互設計是一個“操作流程”的設計,英文是flow chart。也就是設計出每個靜態頁面的跳轉關系。

那我們如何設計和標注每頁的關系呢?大家可以看這個真實的交互流程圖。1我們要有標題,表明這頁面是哪部分的操作流程。2 對??榻斜嗪?。3最重要的一點,流程進行用線鏈接,也就是每頁之間的關系要連起來,不要遺漏和死循環。4 底部對頁面信息以及要點進行說明。5其他細節說明。

除了大關系我們經?;嶧驕植抗δ?,方法類似,要有局部功能的流程。點擊某個按鈕后的流程示意。最后還有細節的說明。

實際操作中我們還會遇到很多問題,例如由于用戶或者服務器的不同狀態,會有多種可能性,所以我們也會繪制多情況裝態圖,甚至標注局細節放大圖,當然永遠不要忘記信息說明。

接下來又是百度UE講堂同學們作品案例展示,家裝app各典型頁面之間的關系低保真原型圖,他們選擇的是由品牌色+高保真圖形語義圖標+灰色輔助信息的表達方式。

這里展示的是幼兒園的交互流程圖Flow chart,他們選用了綠色背景,因為這是他們的品牌色,我今天介紹的都是基礎方法論,希望大家能發揮出更多的創造力,設計出更精彩的表現方式。

其實還有一個更精致的交互設計表現方式:高保真動態原型,英文叫做high fidelity prototype。就是把所有的頁面做成動畫甚至可操作的Demo,這點工作量很大,我當年在NOKIA工作設計手機操作系統的時候非常常用。而今天我們在已經很了解的手機平臺上設計app就不常用了,因為開發成本太高。

作者簡介:

劉超 畢業于清華大學美術學院,2011年加入百度,先后擔任百度用戶體驗部總監、百度U序列主席、百度UE講堂校長、百度啟程大學生畢業展策劃人;
曾任宇龍酷派用戶體驗部總監/中國移動研究院UI負責人/諾基亞圖形UI設計負責人/HCI International 理事。

代表作品:
2011-2016年百度產品從PC到手機APP的UI設計,其中包括多款用戶過億產品。百度貼吧、百度地圖、百度知道、百度百科、百度文庫、百度閱讀、百度視頻、百度傳課、hao123、百度魔圖等。
百度熊和百度熊孩子家族,獲得千萬級粉絲認可,成為互聯網知名IP。
創建百度UE講堂,分享知識給數十萬UI設計愛好者。
早期UI設計作品 三星I98008/Moto 810/ NOKIA 2600/3180/NOKIA S40平臺/酷派大觀系列/聯想幸福之家等。

(責任編輯: Admin
English | 關于我們 | 站點地圖 | 聯系熱線 | 合作伙伴 | 藝術顧問 | 訂閱 | 手機版
版權所有 © 2004-2019 視覺同盟 www.acoiuo.com.cn)
Copyright © 2004-2019 www.acoiuo.com.cn Incorporated. All rights reserved
京ICP備09005192號
視覺同盟旗下子站:品牌專區 | 中國創意設計人才網 | 視覺同盟社區 | 2019亚冠伊蒂哈德 | 英文版