首頁

交互設計之尼爾森的十大可用性原則

純純

系統(tǒng)應該在合適的時間內(nèi)通過適當?shù)姆答?始終讓用戶了解正在發(fā)生的事情——尼爾森


自我理解:用戶無論在界面上做什么,都應該及時告知他發(fā)生了什么或者進展到什么程度。可以理解為人與人的溝通,界面需要及時告訴我們做了什么,現(xiàn)在是什么情況。


a.  這種告知應該是及時的。

加載任務在互聯(lián)網(wǎng)中是最常見的,在加載過程中應當及時傳達加載過程,減少用戶的心理等待時間。在外部加載總時間無法優(yōu)化的時候,使用何種方式能有更好的用戶體驗是設計時需要考慮的。

undefined

undefined

undefined


b.  應當告知用戶你在哪里

你的界面需要引導用戶來操作,即作為用戶應該清楚的明白我在什么位置,我下一步可以去做什么操作。

現(xiàn)在app的很多設計基礎包括頂部的導航分欄和底部的tab bar都是為了告訴用戶他在哪里。

在做一些概念設計時候,如果單純是為了更好的視覺效果,就對這些基礎分欄進行大刀闊斧的設計,最終導致了好看是好看,可是用戶都不知道這頁面是干什么的結果,很明顯是違背了最基本的交互原則 狀態(tài)可見原則。

undefined


c.  應當告知用戶事情怎么樣了

用戶在你的界面是要做什么事情,這是你在設計之前應該思考的問題。

如何把用戶要做的這件事情更好的呈現(xiàn)給用戶,反饋給用戶以及有哪些信息需要反饋給用戶都是你要從交互的角度思考的,這包括過去發(fā)生的信息和即將發(fā)生的信息,也包括正向反饋和負向反饋。(這種操作是否成功了?這種操作進展到什么程度了?如果這樣操作會有什么后果?點擊之后會達到什么頁面?這里是否可以點擊?)


很多概念性的設計很酷,從交互的角度上來看也是因為界面對信息進行了很好的反饋,比如下面的設計就是對登山的信息進行了很直觀的反饋。(來自設計設計師anastasia  原地址https://dribbble.com/shots/8291047-Tourism-App-Mobile-Concept


undefined


undefined


自我理解:不同的人生活在不同的環(huán)境里面,不同的界面也有不同的外部環(huán)境。盡量保證界面在自己產(chǎn)品定義的風格里面,如果有機會還原真實世界的狀態(tài)也很好。


a.  根據(jù)用戶制定產(chǎn)品語言

在制定產(chǎn)品語言時,要了解產(chǎn)品的用戶人群,使用相對應的用戶群體所熟悉的文字語言 圖形語言  板式結構  配色方法。要讓我們的用戶覺得這個產(chǎn)品很符合自己,而不是讓一個老大爺去滑滑梯的感覺。一般來講即便是同一產(chǎn)品,在國內(nèi)外的產(chǎn)品語言也是有所不同的。

a. 模擬真實環(huán)境

產(chǎn)品在一些展示上模仿現(xiàn)實世界的樣子,可以讓用戶快速接受,并感受到真實易懂。不僅僅局限于靜態(tài)外觀的模仿,還包括模擬真實物品的動態(tài)效果 聲音等 都能給用戶良好的使用體驗

很多逼真的動效也是來自真實世界的映照。比如下面的可樂瓶的晃動就和真實世界很接近,讓用戶有很強的代入感。(作品來自設計師dannniel 原地址:https://dribbble.com/shots/6351526-Select-Drink-Animation

自我理解:為了不讓用戶進入一個錯誤的場景或者結果,對于一些特殊操作應該給予撤回重做,讓用戶能夠充分的確定接下來的行為。

a.  返回到原始狀態(tài)

可以理解為悔棋,即已經(jīng)發(fā)生的行為返回到原始的頁面狀態(tài),這個條件的設置也應該有一些條件的限制,不能一直無限返回。





自我理解:君子常常言行一致,好的產(chǎn)品也是一樣。保持為一個統(tǒng)一的整體,包括產(chǎn)品內(nèi)部和產(chǎn)品外部,也包括線上和線下。


a.  與競品保持一致

很多人講現(xiàn)在的同一類產(chǎn)品的同質(zhì)化現(xiàn)象嚴重,其背后也是有一定原因的。相同或相似產(chǎn)品的用戶習慣保持一致,即意味著用戶需要更少的時間去學習甚至不需要學習。從產(chǎn)品設計上講,用戶使用越方便易用,產(chǎn)品設計的越成功。和相關主流競品做出比較大差異化設計時候,雖然擺脫了同質(zhì)化的問題,但是很多常規(guī)操作卻需要用戶重新學習,這樣帶來的后果很有可能就是用戶流失。所以,沒有充分的理由,請與競品保持一致。



b.  請建立一套完整的規(guī)范

一套完整的規(guī)范包括組件 色彩 間距  版塊結構 等。規(guī)范可以讓你的產(chǎn)品一致性更強,你要讓用戶能夠?qū)δ愕漠a(chǎn)品產(chǎn)生一定的規(guī)范性印象,當他看到一張頁面就能聯(lián)想到這是什么產(chǎn)品。

undefined


c.  請保持產(chǎn)品迭代的一致性

現(xiàn)在隨著互聯(lián)網(wǎng)市場的不斷穩(wěn)定,很多產(chǎn)品進入了穩(wěn)定的迭代期。但是在迭代期也應該以保持產(chǎn)品語言 用戶使用習慣的一致性為一大重要原則,版本的迭代也應該逐步進行,不要急功近利。盡量保持原有的設計元素一致性,新功能的創(chuàng)新也盡量不要損害原有用戶的使用體驗。


自我理解:再發(fā)生錯誤之前采取措施來避免。


a. 引導用戶,不要讓錯誤出現(xiàn)。

很多app迭代更新之后會有操作指引,目的就是為了讓用戶學習,減少錯誤操作。很多引導頁也有相類似的功能。


b. 給予提示,尤其是用戶在做一些重要操作的時候

一些重要的敏感操作,產(chǎn)品通過二次詢問得到用戶的確認,




自我理解:能讓你的軟件產(chǎn)品來記住,就不要讓你的用戶來記。盡可能的在設計產(chǎn)品的時候,不要讓用戶去記憶,把用戶當傻瓜。

a 記住用戶的使用操作記錄

這個記錄不單單是在某一設備上,一般來講都是跨設備進行同步。用戶在使用的時候不用來回調(diào)整,體驗感是很強。

 


b  讓用戶選擇信息而不是填寫

填寫是一件成本極大的事情,很多用戶不愿意在這上面花費時間。所以產(chǎn)品在設計的時候要盡量讓用戶去選,而不是去寫。

undefined

c 自動讀取

思考產(chǎn)品一些功能的使用場景,有沒有自動智能化的需要。即不用問候產(chǎn)品使用者,自動提供解決方案。注意,這里講的是提供方案,不是解決方案。提供大多數(shù)的解決方案,可以節(jié)省使用者的交互步驟或者瀏覽時間等,也是易用性高的表現(xiàn)。

d 提供適量的信息

其實另外一個交互定律法則(以后會講)其實提到了選擇的數(shù)量,移動端的選項一般不會超過五個,超過五個用戶的頭腦就會混亂。所以要考慮信息的擺放位置在哪里,一方面是需求決定的,另一方面也應該控制每一個選項的數(shù)量,不要讓用戶感到焦慮。


自我理解:一般來講產(chǎn)品的用戶群體是多樣化,用戶的使用熟悉度也是有差別的。要照顧到絕大多數(shù)用戶群體的使用體驗,所謂的高頻是每一個用戶群體比較常使用。


a.  設置快捷/重復入口

講產(chǎn)品常用或者主打的功能放在產(chǎn)品容易操作的位置或者重復出現(xiàn),用戶可以高效的完成自己的需求。

一般來講用戶的使用頻率越高越要放在操作熱區(qū)和表面,反之亦然。

b.  用戶自定義常用功能

照顧到不同用戶對于某些功能的需求不同,對產(chǎn)品的部分功能進行用戶自定義化操作,提高用戶使用的靈活性。


c.  給用戶默認選項

將用戶經(jīng)常使用的選項作為默認,減少用戶操作時間,達到靈活高效的目的。像淘寶都會設置默認的收貨地址,每次下單不用每次都輸入,十分高效。(當然也有翻車的時候)



自我理解:互聯(lián)網(wǎng)用戶閱讀產(chǎn)品的一個很重要的特點就是快。即不是來閱讀不是來看,而是掃一眼。所以要求頁面上的內(nèi)容能夠清晰可見,方便用戶快速捕捉到自己喜歡閱讀的信息,減少不必要的干擾,簡潔高效。

a.  清晰的板塊劃分

把頁面內(nèi)容的優(yōu)先級別進行分級,清晰的板塊劃分將會引導用戶操作。還可以將頁面的主推內(nèi)容向用戶展示,避免用戶分不清重點。


b.  減少視覺噪音

注意頁面的主角是誰,在平面設計中也有相同的概念。不要讓背景或者裝飾嘩眾取寵,而影響主要信息的傳遞,視覺設計是來輔助業(yè)務表達的。如果核心需求沒有傳遞好,那就會單純地成為一件藝術品,而不是設計作品。所以在設計過程中,要權衡視覺點,減少不必要的噪音干擾。


c. 嚴格遵守設計的四大基本原則:親密  對比  重復   對齊

落實到界面上包括間距 字號 字重 版式節(jié)奏 。其實看到看到很多界面做的不精彩不優(yōu)美,就是基礎性的原則就沒有完全落實貫徹。這里就不舉例,基本所有的設計都要遵守的原則,很重要,很重要,很重要。


undefined


自我理解:要考慮到頁面可能發(fā)生意外,錯誤發(fā)生后要及時彌補。


a.  提供清晰地說明和解決方案

考慮到可能會達到的錯誤界面。在發(fā)生的錯誤結果上,使用明確清晰的語言告知錯誤的原因,并給予解決方案。

自我理解:要考慮到頁面可能發(fā)生意外,錯誤發(fā)生后要及時彌補。這一部分其實主要進行一些說明,讓用戶操作方便,相當于使用說明書。

a.  無需文檔

進行新頁面的設計盡量直觀清晰,符合用戶習慣,無需引導即可使用。

b.  一次性提示

改版引導或者新功能引導給予一定的提示

c.  常駐性提示

對于產(chǎn)品的操作性功能或者操作必須注意到的問題,產(chǎn)品需要進行一定說明

d.  幫助文檔

用來解釋一些常見問題。



文章來源:站酷    作者:花城丶

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務



聊聊狀態(tài)開關按鈕如何設計

純純

我遇到的這個例子,和“概念模型”有關,在這里分享給大家。


這個酒店房間的開關是這樣的:


酒店床頭開關



酒店客廳開關



這個開關是觸控式的,開關本身有亮/暗兩個狀態(tài);大家迅速看一眼,我想請問大家,你們認為,亮著的開關(圖1的5個燈,圖2的右上、左下2個燈)對應的狀態(tài)應該是打開的還是關閉的?




如果心中有了答案了,繼續(xù)往下看。




之前在文章從交互維度量化用戶體驗中我說過一次我個人理解的最小交互模型,大概是下面這段話:


狹義的交互(Interaction)定義交互主體必須是人本身,而客體可以是產(chǎn)品,環(huán)境,服務等等,且不論交互客體是什么,只要主體是人,人和客體去進行交互的時候,一定是人帶著一定的心理預期施加一個行為,然后客體會根據(jù)這個行為給與一個反饋(沒有反饋本質(zhì)也是一個反饋),而人會根據(jù)這個反饋是否符合預期去進行心理修正。如下圖所示(紅先黑后):


那隨之而來的另一個問題就產(chǎn)生了,人進行交互行為時的心理預期是從哪兒來的?


人初生的時候都是一張白紙,每天重復的交互行為產(chǎn)生的心理預期會隨著不同的教育、家庭進行變化;今年我們家在廣州過年,我第一次見到兩歲的小侄子,通過這一周對小侄子的觀察更能體會出人其實是有某些說不清的潛能在里面的,舉個例子,有一天小侄子生病了,要吃兩種藥,一種是甜的,一種是苦的;吃甜藥的時候小侄子很開心,愉快的呀呀的說這藥是甜的,而吃苦藥的時候小侄子也是皺著說這藥好苦,關鍵的問題是,出生兩年來,家人從來沒有對他描述過苦味是什么,也沒有明確告訴他這兩種藥有一種是“苦味”的,但是兩歲的小孩子就能嘗到苦味的藥在沒有接觸過“苦”這個詞的時候就講得出來這是“苦”。


再舉個例子,還是我的小侄子,我們貴州人過年一般都會真金白銀的打麻將,小侄子目睹了幾天我們在麻將桌上用大把的零錢來支付,有一天我們?nèi)ス珗@玩,遇到一個熟人給小孩子了一個紅包,我們就問他“錢是干什么的呀”? 我小侄子脫口而出:“錢是用來打麻將的呀!”


為什么會發(fā)生這樣的現(xiàn)象呢?


大概是現(xiàn)在的人買東西都用微信支付寶支付,所以對于小孩子的認知來說,他們由于沒有見到過紙幣參與交易的行為,而這幾天不斷被我們麻將桌上的現(xiàn)金沖擊視覺,才會突然脫口而出這句話。


可能在我小侄子的認知里,手機才是用來買東西的。


我們互聯(lián)網(wǎng)圈的設計行業(yè)其實能形成理論的東西不多的,大多數(shù)時候為了佐證某些東西,我們需要從心理學、社會學、行為學中找到一些理論支撐。我在做產(chǎn)品設計的過程中,最長這么時間一直使用的一種方法是思考用戶在這個頁面的心理預期。(比如在商品詳情頁,業(yè)務目標肯定是引導用戶購買,但是用戶心理上之所以點進了這個商品的詳情,無非是在有購買意愿的基礎上,需要一些信息去輔助決策,這時候如果你仔細思考并模擬一下你自己在購買時候點擊詳情頁的行為,其實會發(fā)現(xiàn)其實影響決策的信息大多不是價格(因為價格在上一級的列表頁已經(jīng)標明了),更多的可能是產(chǎn)品描述和用戶口碑等等)


在做尤其是app設計的時候,能明確每一個頁面的業(yè)務目標和用戶點進來的預期,其實是一件非常重要的事情,大家可以多留心在這兩點上。



好的扯遠了,回到狀態(tài)開關的事情上來,還記得剛剛的那個圖么?


酒店床頭開關



酒店客廳開關


我相信絕大對數(shù)的人第一反應都是,亮著的開關對應的燈應該是亮的,因為這個符合常識,但是如果這個酒店也是這樣的話,我就不會舉這個例子了,沒錯,上面開關亮著的燈是關的,沒有亮的開關對應的燈是打開狀態(tài)。


我相信設計這個開關的人是為了讓用戶在夜晚起夜的時候使用方便,但是他完全可以用更加高明的辦法,比如換成夜光材質(zhì)之類的。這種設計師很愚蠢的,我觀察這么多天下來,我們所有親戚每次開關燈幾乎都會誤觸,因為我們的心智一直一直認為的是亮著的開關亮著的燈。


這里就牽扯出一個問題,我們在app設計中如何去設計狀態(tài)開關的問題。


首先需要明確,最無歧義的狀態(tài)開關一定是需要具備兩個意符:

其一是表征當前狀態(tài)

其二是表征用戶點擊之后的狀態(tài)。

而現(xiàn)在市面上很多app在這兩個意符上是混的,一般都知道用icon的樣式來表征當前狀態(tài),但是下面的輔助文字則是表征當前狀態(tài)的和點擊之后狀態(tài)的都有。


這就會讓用戶很蒙。


比如相機app、短視頻app、K歌app中就比較明顯會有很多狀態(tài)按鈕,如下圖所示是某相機app的截圖,這樣的設計就是“有歧義的設計”,比如“延時關閉”和“補光燈關閉”這兩個文案,會很容易讓人困惑這文案指代的是當前狀態(tài)呢還是點擊之后的狀態(tài)呢?


給大家提供一個我個人的小tips:


設計狀態(tài)按鈕,盡量把當前狀態(tài)和點擊行為拉出兩個層級關系來設計。


當前狀態(tài)可以體現(xiàn)在icon上,但是不能只體現(xiàn)在icon上(比如他這個延時關閉的圖標有一個x,但是補光燈關閉又沒有x,這就更加歧義了)


比如如果是我去設計它這個按鈕,我會這么設計:



這樣的話,確實,用戶操作復雜度上會多一級(之前直接點icon,現(xiàn)在點icon之后需要再點開關),但是用戶完全沒有認知成本。


這就是我說的把當前狀態(tài)和點擊行為拉出兩個層級關系來設計。其實這個犧牲交互成本減少用戶認知成本的方法在交互設計工作中經(jīng)常被我們使用,當我們遇到一個問題實在是一步很難理清的時候,不妨可以多嘗試這種思路。不過這種提高復雜度的減少認知的方法,不適用于業(yè)務強指引型頁面(比如購買、導航之類)


文章來源:站酷   作者:Seany

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務



如何設計好消費向app產(chǎn)品

純純

本文算是一篇產(chǎn)品分享文吧,主要科普一下消費向內(nèi)容在KillTime方面都是怎么玩的。



Part I - 消費向產(chǎn)品及其發(fā)展科普

大家看上面那句英文,我用的是“Spend Oriented”,Spend這個詞本身是一個偏中性的詞,不光有花錢的意思?!跋M”一詞其實如果大家去查它的原始定義是指“利用社會產(chǎn)品來滿足人們各種需要的過程”今天在這里說到的其實是“用戶在上面消費內(nèi)容”的app產(chǎn)品,這個內(nèi)容可能是圖文,可能是流媒體。也就是說,今天講的app都和“Kill Time”有關。

那我們不妨先來看下面三頁ppt:


1.消費向產(chǎn)品的演變:

我大概把今天要講的消費向產(chǎn)品分為四類,第一類游戲略過就還剩三類:

a.圖文Feed類app產(chǎn)品:

這一類產(chǎn)品其實是經(jīng)歷了從門戶到app的演變的,早期互聯(lián)網(wǎng)時代,所有的圖文內(nèi)容都在門戶網(wǎng)站上,這時候的門戶網(wǎng)站比如新浪搜狐網(wǎng)易,他們其實是內(nèi)容為中心,用戶圍著內(nèi)容轉(zhuǎn),用戶會自己去挑選甄別自己想消費的內(nèi)容進行消費。


然后從門戶到app的過程中,最開始比如搜狐新聞app他其實是一個從門戶到app的純移植,他的本質(zhì)沒有變化,還是以內(nèi)容為中心,用戶圍著內(nèi)容轉(zhuǎn),不過后來隨著移動互聯(lián)網(wǎng)的發(fā)展,因為移動端的特性是“高頻多次”,他就不像門戶我只能上班的時候坐在電腦面前看,移動端的特性決定了我無論拉屎還是乘車,隨時隨地打開都可以看,那這個時候如果還是內(nèi)容為中心,用戶每次進來都需要進行一個很長時間的甄選內(nèi)容的過程,真正消費內(nèi)容的時間就相應的會被壓縮,這時候就有了整個新聞移動端app產(chǎn)品從“內(nèi)容為中心”到“用戶為中心”的轉(zhuǎn)型。第一次有了用戶中心的概念,比如有了賬號系統(tǒng),用戶可以收藏點贊(Mark)一些的自己感興趣的內(nèi)容,然后通過用戶的點贊閱讀點擊行為進行推送和訂閱:

除了新聞門戶之外,還有一類圖文產(chǎn)品就是興趣聚合,最開始大家會發(fā)現(xiàn)都是一個產(chǎn)品主公一個方向,大家想看什么內(nèi)容就去相應的地方:比如天涯貓撲就是一個講故事和段子社區(qū),榕樹下主攻青年文學,虎撲是體育相關。大家在自己垂直的領域發(fā)展,互相也不怎么干涉。但是這些UGC平臺的本質(zhì)還是生產(chǎn)者,是人,隨著每個平臺都有自己的大V出現(xiàn)之后,網(wǎng)易推出了博客,這是一個以人為中心的分發(fā)結構的產(chǎn)品,除了以人為中心的分發(fā)結構外,百度心里想,不是之前的門戶都很垂直么,那我是不是可以建一個平臺,讓各種興趣在我這里以”吧“的形式聚合?于是就有了一個興趣內(nèi)容聚合平臺”貼吧“,然后隨著發(fā)展,大家發(fā)現(xiàn)博客這種東西用戶消費成本太高了,一個大V一篇文章好幾千字,生產(chǎn)內(nèi)容也費盡,用戶看著也費盡,那不如就做一個微型博客更多的讓人發(fā)聲就好了,于是有了微博。

△.既然說到這個了,在這里多扯遠一點,其實互聯(lián)網(wǎng)發(fā)展的進程都是這樣,繞不開平臺和垂直,大家想想五六年前的電商產(chǎn)品是不是一個道理,當年只有淘寶一家是平臺,其他的,比如京東主攻家電,一號店是零食,聚美是化妝品,美麗說蘑菇街則是衣服(蘑菇街主打職場美麗說主打校園)


b.泛娛樂類類產(chǎn)品 & c.工具類產(chǎn)品:

泛娛樂類產(chǎn)品我這個框子畫的很大,大概最初的原型是為了解決我們“聽歌”和”看視頻“的需求,然后最開始的幾大門戶大家都知道優(yōu)酷土豆、騰訊視頻、愛奇藝、搜狐視頻、樂視等等。最開始那幾年互聯(lián)網(wǎng)基礎建設不行嘛,科技也沒發(fā)展到位,所以那時候視頻清晰度都好低,而且下載率非常高,大家一般消費內(nèi)容會采用”在家wifi先下好然后再看“這樣的辦法,但是隨著基礎設施的加固,大家發(fā)現(xiàn)流量好便宜,這時候在15年才開始有網(wǎng)紅直播這一塊的業(yè)務出來(游戲直播是很早就有的哈),我個人會認為催生網(wǎng)紅直播產(chǎn)品的歸因是科技進步流量不花錢了。隨著網(wǎng)紅直播類興起的另一類產(chǎn)品就是短視頻類,我個人認為短視頻產(chǎn)品的出現(xiàn)本質(zhì)歸因除了流量不花錢了之外,更多的是解決之前門戶視頻網(wǎng)站內(nèi)容消費成本過高的問題,眾所周知,現(xiàn)在人越來越懶了,一集電視劇40分鐘,很難坐得住不分心的看完,所以現(xiàn)在視頻app出了倍速播放。這本質(zhì)的原因是用戶消費內(nèi)容的High點(達到滿足的點)越來越高了。

再說聽歌這條線的演變,最開始聽歌,然后唱吧、全民K歌,國外的Starmaker等等出來做了唱歌app,這時候的app本質(zhì)是一個工具,但是用戶UGC內(nèi)容的時候沉淀了很多作品在這些工具app里,所以這一類產(chǎn)品就開始做去工具化,變成了一半社交一半工具的產(chǎn)物。另外K歌產(chǎn)品火了之后,才有的FM類產(chǎn)品,因為都是消費音頻和音頻直播嘛有共性在這里就不展開了。最后就是這類音頻產(chǎn)品不滿足只做音頻,所以就開始做視頻了,這就導致你現(xiàn)在打開全民K歌或者唱吧或者國外的好多app,你會發(fā)現(xiàn)只要是娛樂產(chǎn)品都有短視頻的原因。


2.消費向產(chǎn)品的核心目標:

GNT是一個羅振宇2016年年終演講時候提出的詞,我們假設平均每個人每天8點到家到晚上12點的時間是可支配時間,那中國網(wǎng)民每年新增數(shù)量(今年是1000w)已經(jīng)穩(wěn)定在和出生數(shù)量一樣了,所以我們認為網(wǎng)名總數(shù)不太會有啥變化,比如之前我用三個小時在優(yōu)酷騰訊愛奇藝上看電視劇,一個小時聽網(wǎng)易云音樂,現(xiàn)在我大概只用一個小時看電視劇其他三個小時都在刷抖音,這時候,大家會發(fā)現(xiàn)消費向產(chǎn)品的決戰(zhàn)維度就不是自身的垂直領域了,之前我們會認為視頻門戶哪家片源優(yōu)質(zhì)哪家就牛逼,現(xiàn)在不是的,現(xiàn)在的產(chǎn)品除了垂直比較之外更多的競爭是在時間維度的較量,這是為什么抖音這種產(chǎn)品突然一下很火的原因,我稍后會著重說抖音這里就先略過了。

3.為了占用更多的用戶時間,設計師可以發(fā)力的點:

內(nèi)容源是否優(yōu)質(zhì)(這里的”優(yōu)質(zhì)“指的是內(nèi)容和用戶的March值)其實是用戶是否消費的最大的一個指標,因為內(nèi)容源和用戶的March值主要反映在下面的前兩個問題中:

給用戶展示什么內(nèi)容?

這些內(nèi)容的優(yōu)先級是怎樣的?

這兩個問題一般我們設計師并不能控制,關于什么時間什么環(huán)境下給用戶展現(xiàn)什么內(nèi)容,往往跟用戶歷史行為和算法有關,如果大家看了頭條的算法公開課大家會知道頭條的推薦算法其實是有三大類(內(nèi)容維度、用戶側(cè)特征、環(huán)境特征)幾千萬個向量特征去控制的,如果不是純算法推薦也會有運營去干預內(nèi)容的露出,所以這部分其實設計師可以干預的比較少,我們真正可以干預的東西是后兩個問題:

如何讓用戶迅速找到自己感興趣的內(nèi)容進行消費?

——這就涉及到內(nèi)容源呈現(xiàn)方式的抉擇問題。

如何盡可能的降低用戶消費內(nèi)容時的交互成本?

——這就涉及到兩個問題,一是從交互上讓用戶盡可能沉浸消費,二是交叉推廣和分流的問題。


Part 2 - 消費向內(nèi)容的主流呈現(xiàn)形式:Feed Flow

△.誰能告訴我一下Feed Flow(我們工作中所說的”Feed流“中文怎么翻譯?Orz...)


1.RSS vs Facebook's New Feed

如果大家是一個早期互聯(lián)網(wǎng)民,一定聽說過RSS的概念:

RSS (Really Simple Syndication簡易信息聚合協(xié)議)是一種的工具,使得用戶可以在客戶端借助于支持RSS的聚合工具軟件,在不打開網(wǎng)站內(nèi)容頁面的情況下閱讀支持RSS輸出的網(wǎng)站內(nèi)容。舉個栗子:如下圖所示,小張在pc時代,每天會定時打開華爾街日報網(wǎng),ChinaDaily,王老三的博客看里面的內(nèi)容,但是每天都打開三個網(wǎng)站讓小張覺得很煩,這時候借助RSS工具,他可以把三個(支持RSS協(xié)議的)內(nèi)容源聚合到一個第三方的RSS工具上,這樣他就不用每天反復打開三個網(wǎng)站了,除了獲取這三個網(wǎng)站的陳舊內(nèi)容之外,這三個網(wǎng)站每天的更新內(nèi)容也會被實時呈現(xiàn)在這個RSS中:

一個RSS聚合工具內(nèi),每一個單條內(nèi)容源,就稱為Feed(取的是滋養(yǎng)的意思,就是源源不斷的滿足用戶消費需求的含義),那早期的Feed序列大家也看到了是從RSS衍生出來的概念,F(xiàn)eed流的排序也是用戶定義的,比如可以按照Timeline排序,或者是按照用戶自定義Tag聚合,或者是按照interest標簽(收藏,喜歡,點贊都屬于泛意義上的interest),那大家就明白了,RSS里的Feed流本質(zhì)上是一個用戶自定的,關于內(nèi)容收集的工具而已。

到了2006年,我們的爸爸Facebook開始做社交,因為Facebook是人和人的關系聚合,其實當時Facebook就借用了Feed的概念,創(chuàng)造出了以“關注Follow”為核心的新型Feed,在書上(我忘記是哪本書了)把它稱為Facebook‘s New Feed,它其實有三個特征:

1、內(nèi)容源從URL到人的狀態(tài)(其實本質(zhì)也是一個一個URL序列)。

2、不僅僅是Timeline的基礎排序,更多的指標參與進來決定內(nèi)容排序

3、訂閱內(nèi)容中夾雜費非訂閱內(nèi)容(參考微博),讓用戶永遠刷不完沒有盡頭的消費

上圖是RSS和Feed的對比。

到了今天,其實幾乎市面上所有消費向產(chǎn)品(新聞類、微博、Instagram、Snapchat、短視頻、等等),都在Facebook New Feed的基礎上進行了改進,所以今天我們把這種New Feed更習慣的叫做Feed,大家可以去PM社區(qū)之類的搜Feed能發(fā)現(xiàn)一堆文章可以閱讀,在這里就不贅述了。


Part 3 - 匹配、分發(fā)與消費

知道Feed的概念能方便我們理解接下去的問題,還記得接下去是什么問題嗎?

1、如何讓用戶迅速找到自己感興趣的內(nèi)容進行消費?

——這就涉及到內(nèi)容源呈現(xiàn)方式的抉擇問題。

2、如何盡可能的降低用戶消費內(nèi)容時的交互成本?

——這就涉及到兩個問題,一是從交互上讓用戶盡可能沉浸消費,二是交叉推廣和分流的問題。


1.先分發(fā),再消費的app模型:

我們不妨先來看主流的Feed分流的兩種模式:

一種是微博這樣的關注序列插入非關注序列(推薦、廣告等),另一種就是關注序列瀏覽完用戶拉不出新Feed的時候有個分流按鈕提示,別小瞧這個小提示,往往能帶來每天5-7%(我自己的工作經(jīng)驗數(shù)據(jù))的新模塊引流。


再說用戶迅速找到自己感興趣的內(nèi)容進行消費的問題,這里就涉及到內(nèi)容源的呈現(xiàn)方式。我之前唱吧的那篇文章舉過這樣一個例子:

唱吧7.0到8.6的三次改版犧牲了展示效率(從7到5)HighLight了文字信息,是因為我們發(fā)現(xiàn)圖片信息不足以讓用戶做興趣判斷,大家看下圖就明白了:

快手的圖片本身就是內(nèi)容的簡略呈現(xiàn)形式,大家可以基本通過圖片來得知里面的內(nèi)容大概是什么,如果遇到用戶難以判斷的,快手在用戶上傳視頻的時候鼓勵用戶打字說明,比如大家能看到圖中的紅字,就是說明視頻內(nèi)容的。這樣的話,用戶通過圖片能清晰得到點擊之后的內(nèi)容預期,比較符合用戶心智。大家再來看唱吧,大家會發(fā)現(xiàn)圖一圖二圖三都是漂亮的小姐姐,這個就沒辦法告知用戶里面的內(nèi)容究竟是啥樣的,那支撐用戶點擊進去的除了顏值之外,更多的可能是歌名,和這個人的歌手等級,收聽量這樣的數(shù)據(jù)才能支撐用戶點擊。唱吧這么改之后我印象中模塊CTR是有明顯的提升的,但是具體數(shù)據(jù)我離職太久忘記了...

所以其實內(nèi)容源的呈現(xiàn)方式本質(zhì)上和內(nèi)容相關,這里的UI應該以“如何讓用戶迅速找到自己感興趣的內(nèi)容”為核心設計目標去設計,具體問題具體分析咯~


再來說常見的消費向內(nèi)容的交互模式,最常見的就是Push&Back的模式:

所謂Push&Back就是用戶一次點擊進到詳情頁消費內(nèi)容,看完之后再點擊返回回到Feed列表,然后繼續(xù)在列表里尋找下一個想要消費的內(nèi)容的模式,比如下圖:

傳統(tǒng)的Push&Back交互成本太高,用戶看完之后需要點擊返回,然后瀏覽內(nèi)容列表選擇自己想看的,然后再次點擊進入。這種就是很難達到沉浸式消費,用戶跳出率和關閉率都比較高。

于是有了另一種模式就是讓用戶不跳出,直接挨個在當前Feed下的內(nèi)容:

舉個例子就是知乎的“下一個回答”點擊按鈕和下拉交互,以及微博的視頻關燈流:

這種模式使得用戶在消費內(nèi)容的時候交互極其便捷,輕輕滑動或者一次點擊就可以消費下一個內(nèi)容,大大增加了沉浸的消費體驗:

關于如何盡可能的降低用戶消費內(nèi)容時的交互成本這個問題,上面這一種辦法,其實還有另一種,就是所謂的交叉推廣,大家看下面這個圖,前兩張是頭條Feed,后三張是陌陌:

頭條點擊一個視頻后,下面會給你推和這個視頻相關的一些視頻(可能是內(nèi)容維度相同都是做飯的,可能是用戶側(cè)特征相同都是美女做飯,可能是環(huán)境特征相同都是教你明天中秋節(jié)怎么做月餅)讓你去觀看(而且你發(fā)現(xiàn)沒頭條iOS版本和抖音iOS版本都是默認隱藏statusbar的,你看不到當下幾點了,為的就是讓你一直看下去...)。

陌陌這款產(chǎn)品就更有意思了,比如我點擊第二個入口(右1)進去,這時候有個上下滑動切換的交互,app的指示意是:“切換到下一個主播”,那按照常理來說,我松手之后,應該消費的是第三個入口(左2)的內(nèi)容沒錯吧?但是你會發(fā)現(xiàn)事實并不是這樣,它其實跳轉(zhuǎn)到了一個全新的Feed序列,所以交叉推廣的概念如下圖所示:


2.直接消費的app模型:

上面我們講的都是先分發(fā)再消費的模型,它一定要有一個內(nèi)容承載的Feed頁,然后用戶根據(jù)自己興趣去選擇性的消費內(nèi)容。那本著:“降低用戶消費內(nèi)容時的交互成本”這個思路,有沒有可能去掉分發(fā)這個步驟,不要內(nèi)容承載頁,直接上來就讓用戶消費呢?這就是大家熟悉的抖音:

Musical.ly(后改名Muse然后被抖音抄然后被抖音收購)這款app創(chuàng)造了一種直接消費內(nèi)容的產(chǎn)品模型,這種模型有什么特征呢?

1、交互成本最低,打開即消費,一次上下滑動即分流,左右滑動(或一次點擊)即分流,極強的沉浸性。

2、依靠算法把很多Feed序列整合成了一個無窮盡的Feed,完全依賴算法和用戶行為數(shù)據(jù)、短視頻數(shù)據(jù)判斷展示優(yōu)先級。

我們不妨來對比一下“先分發(fā)再消費”和“直接消費”的兩種產(chǎn)品吧:

“先分發(fā)再消費”類的產(chǎn)品,由于有一個內(nèi)容承載頁,用戶可以選擇性的點擊消費,比較尊重用戶。而抖音這類產(chǎn)品呢,直接把內(nèi)容強制用戶消費,本質(zhì)上是帶有一定脅迫性質(zhì)的。直接讓用戶消費內(nèi)容的比如抖音類產(chǎn)品,不給用戶自主選擇的機會,脅迫用戶消費產(chǎn)品提供的內(nèi)容,如果內(nèi)容足夠優(yōu)質(zhì)的話會有奇效,如果內(nèi)容差強人意,戳不中用戶的High點,則有可能適得其反。


我認為抖音這種直接讓用戶消費內(nèi)容的產(chǎn)品模型本身是一把雙刃劍。


大家玩了這么多app應該也能發(fā)現(xiàn)了,市面上殼子抄抖音的產(chǎn)品現(xiàn)在特別多,大家會發(fā)現(xiàn)只有抖音好看,別的都是看一兩個就看不下去了想關掉,這里的原因就是因為用戶被脅迫消費你提供的內(nèi)容。

我們假設你是一家內(nèi)容實在不怎么行的app,如果強行用抖音的模式,你第一個內(nèi)容是一坨屎,用戶吃了一半滑動跳過了,這時候他發(fā)現(xiàn)第二個內(nèi)容還是一坨屎要給他吃,用戶意愿會下降得特別厲害,甚至一兩個視頻過后就直接關掉了。但是如果是先分發(fā)的模型,里面都是一堆屎,但是我告訴你了,第一坨屎是草莓味的,第二坨屎是橘子味的,這時候用戶自己想消費哪一坨內(nèi)容是他自己的點擊選擇,和你無關,你app設計者不用承擔脅迫用戶消費的風險,自然用戶對自己選擇的內(nèi)容的容忍度也會高一些,可能不會看一兩個就關掉了,沒準兒會看四五個。這樣是不是瀏覽時長就增加了?


給大家講一個理論性的東西吧,抖音內(nèi)容的理想時間模型(名字是我自己隨便取的):如下圖所示

我們假設理想狀況下這個用戶沒別的事不會被中途打斷,只要想刷可以一直刷一輩子抖音,然后我們來研究內(nèi)容質(zhì)量和用戶瀏覽時長的關系:我們假設,每一個個體用戶都有一條平均匹配線Marchline(這個匹配可能是內(nèi)容維度的比如我喜歡看dota不喜歡看lol,喜歡科普不喜歡雞湯等等),內(nèi)容只要比匹配線高,對于我們的心智就是一個正向刺激(Positive)。

我們假設每個視頻都是15s,大家會發(fā)現(xiàn)你們每天打開抖音的第一條視頻總是很優(yōu)質(zhì)(其實抖音最初冷啟動的時候準備的視頻都是1500-3000一條買的優(yōu)質(zhì)腳本之類的,花了幾千萬呢,所以這些優(yōu)質(zhì)視頻源奠定了第一波龍湖留存),如果第一個視頻總是很優(yōu)質(zhì),用戶很喜歡,那心智就會上升,是一個正反饋,然后第二個視頻如果也很精彩,那就會把用戶推向high點,如果這時候第三個視頻一下子推了一個特別爛的或者沒算準給用戶推了一個用戶不是很中意的,理論上用戶交互成本很低,可能只看了一半劃過就行了,但是如果連續(xù)兩三次都給用戶推了很爛的內(nèi)容,那用戶的負向刺激(Negative)越來越多,一半兩到三次就退出了。

在這里面有一個我總結的思考就是,用戶的Marchline其實是浮動的:

Marchline(new) = Marchline(old) + △Willing

用戶每次打開app到關閉app的過程中正負向刺激的向量和。

所以本質(zhì)上抖音這種點開即消費的短視頻設計方法,是對自家內(nèi)容極度自信之后的產(chǎn)物,記住抖音模型是把雙刃劍,如果你不是對自家內(nèi)容那么自信或者不愿意花錢來砸內(nèi)容,就盡量不要用抖音這種交互,很容易塞用戶一嘴屎得不償失!




3.一邊消費一邊分發(fā)的app模型:

上文已經(jīng)講過了快手(先分發(fā)再消費)和抖音(直接消費)兩種產(chǎn)品模型。

他們各有利弊,但是在最近半年,熱愛創(chuàng)新的產(chǎn)品設計師們在短視頻領域讓我見到了眼前一亮的第三種模式,就是Instagram的旗下的IGTV(入口在Ins的右上角,也是一個獨立的IGTV app),它采用的是一種創(chuàng)新的一邊消費一邊分發(fā)的模式,可以說這個創(chuàng)新是很亮眼了,大家有空可以去下載體驗一下:


這款產(chǎn)品默認打開是圖1所示,后邊的視頻是在播放的,這就滿足了直接消費,但是下面有一個推薦列表可以滑動選擇,滿足了分發(fā),然后如果需要沉浸的觀看某個視頻,手指在圖1上下滑就會變成圖二,這就變成了一個完全沉浸式的抖音,和抖音的區(qū)別是抖音采用上下切換,IGTV采用左右切換,它最絕的地方是把消費屬性做到了極致,甚至在搜索或者在發(fā)評論的時候,后面的視頻也依然在播放。

這就很好的解了交互效率和分發(fā)的問題,大膽預測IGTV的交互模式是明年短視頻、視頻直播、視頻社交抄的重點。(其實現(xiàn)在已經(jīng)看到Azer之類的產(chǎn)品在大量采用這種交互了)

總結一下吧,其實設計的本身在解決問題,只不過隨著時間的推進,大家的認知層次會逐漸升高,最初我們認為快手這種分發(fā)效率過低,于是抖音出來了之后大家都抄抖音,但是別的app沒有抖音這么好的內(nèi)容,于是取了折中有了我個人認為更合適的IGTV這種交互模型。

其實今天這篇文章想要闡述的一個思想是“目標導向的設計”,我們?yōu)榱私鉀Q一個又一個的問題,在不斷解決問題的過程中交互一次一次的微創(chuàng)新,微創(chuàng)新到一定量就會變成一個大的創(chuàng)新。每次看到很多有創(chuàng)新的產(chǎn)品都會感覺到欣喜,作為設計師大家也可以多看一些app產(chǎn)品,大量的試用不同的app產(chǎn)品,然后歸類總結一下,相信也會有所收獲。


文章來源:站酷   作者:Seany

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


app中的交互手勢和意符設計

純純


PART 1 - 唐納德諾曼關于交互設計的可視性的基本原則


唐納德·諾曼所著《設計心理學1-4》一直被認為是設計行業(yè)經(jīng)典,我在讀這一套書的時候最令我感到共鳴的不是后來被大家大書特書第四本《情感化設計》,而是第一本《日常的設計》,這本第一本書最精華的內(nèi)容是闡述了交互設計的基本原則,這個原則無論是對工業(yè)設計中的人和物件交互,還是說是建筑中的人和空間交互都有很深刻的指導意義。

作為一名app產(chǎn)品設計,對于這幾個含義理解之后,融匯到app設計的情境下,會讓你對之前工作流中的『交互設計』有全新的認識。

眾所周知,交互設計借鑒了心理學/設計/藝術和情感等基本原則來保證用戶得到積極愉悅的使用、情感和操作體驗。交互設計之所以可以成為一門學科,本質(zhì)在于可交互,而可交互的前提,是可以被感知(這個我在app的視覺美成因分析那篇文章里面已經(jīng)說到過了),那么被感知的方式,往往是和人的五感有關。

觸覺,聽覺,視覺,味覺,嗅覺。只要能被人的五感所感知到,不論是和空間,和機器,和生活中的物件還是和人,只要發(fā)生五感的共情,我們就說是可以被交互的。(注意,本文中不考慮復雜多感交互,并且只考慮交互的一方是正常生物人。)

在人的五感之中,本文依舊著重討論視覺,因為科學研究表明,在人五感的感知信息中,視覺視覺占比達到了驚人的83%。(其中聽覺11%,嗅覺、觸覺、味覺機加起來占比6%),而不管是什么設計,如果可視性不佳,都不能算得上優(yōu)秀。

唐納德·諾曼將交互的可視性原則歸納為和五種基本心理概念相關,這五中基本概念分別是:示能(Affordance)、意符(Signifiers)、映射(Mapping)、反饋(Feedback)和概念模型(Conceptual Models)。


i.示能(Affordance)

示能的概念和內(nèi)涵來源于吉普森(J. J. Gibson)。此外,關于有形物品如何傳達出人們與它們互動的重要信息,這個特性被吉普森命名為“示能”。

"示能"這個詞,狹義的理解一下,是從可視性的角度明確了一個物理對象與人之間的關系。示能是物品的特性與決定物品預設用途的主體的能力之間的關系。示能的體現(xiàn),由物品的品質(zhì)同與之交互的主體的能力共同決定。示能的存在與否取決于物品和主體的屬性。

還是舉那個諾曼最經(jīng)典的例子,如下圖所示:

從視覺上看這張圖,我們從以往的生活經(jīng)驗聯(lián)想一種方形的,帶紋路的黃色物質(zhì),再配合長期的視覺線索,我們會知道這張圖上是一個木塊,那從我們的視覺線索上,知道這個木板很細,(應該)能夠輕易被折斷;而且很輕,(應該)可以輕易被搬走。這些就是我們通過視覺判斷這張圖上呈現(xiàn)的"示能",而明確的我們和圖上這個木材的交互關系。

那再看這張圖:

我們通過生活經(jīng)驗的聯(lián)想可以知道這是一個木門,為什么會區(qū)別這是木門而不是上面的木材呢?主要原因是因為這上面有個『把手』。在人的視覺中,有時候觀測物體的某項"示能"是清晰可見的,比如上圖那個木材可以被輕易搬動,而有很多物品的"示能"是不可輕易被感知的,比如上面那張木材的圖,我們就不能感知到這個木材是可以被『軸轉(zhuǎn)動』的。

而這張門的圖上,大家想象自己是一個什么都不知道的野人,看到上面這個圖,只有一塊特別顯眼的『把手』,你作為高智慧生物,是不是應該去觸摸一下,并且企圖能夠與『把手』進行互動?

所以總結一下,如果這個門上沒有把手,作為我們?nèi)祟惖恼J知而言,可能會認為這個門不能從外面被打開,但是如果這就是一個能從外面被打開的門,但是忘記設計外面的把手,那就意味著,這個物體"示能"的視覺通道被堵塞。(視覺通道被堵塞的"示能"可以被認為是一種"反示能"),"反示能"對交互作用是起到抵制作用的。也就是說,如果這個門是可以從外面被打開,但是我為了不讓大家從外面打開,我在設計之初不加從外面打開的把手,一定程度上就可以抑制大家從外面打開的這種行為。

大家明白了么?

所以為了更有效的展現(xiàn)某些物體的視覺可交互,示能和反示能都必須被揭示出來,即可被覺察到。如果示能和反示能不能夠被覺察到,就需要人為的把它們都標識出來,我們聽過一些有效的手段就可以做到,比如在直立的木頭一側(cè)加上一個『把手』,這個把手就是"木頭這種物體可以被人軸轉(zhuǎn)動"這種"示能"的一個提示線索,你只需要旋轉(zhuǎn)把手,稍加用力即可發(fā)現(xiàn)這個"示能"。

所以,我們把這種揭示"示能"的符號、提示功能、線索、稱為『意符』


ii.意符(Signifiers)

劃重點:示能決定可能進行哪些操作。意符則點名操作的位置。

在我的文章《交互閑談02丨app中的非必要功能和用戶界面上的流量法則》中,我對app中的意符進行了自己的定義:

用戶界面上的意義符號,簡而言之,就是一切用戶感知中可以點擊產(chǎn)生反饋的功能集合。

但是這是在以屏幕為介質(zhì)的用戶界面中我個人下的定義,但是在實際生活中,人們尋找蛛絲馬跡,尋找任何可以幫助他們應對和理解的符號。任何可能標識出有意義的信息的符號都顯得非常重要。人們所需要的和設計師必須提供的視覺線索,就是意符。

這就是為什么蘋果第一代手機出來的時候會被大家奉為圭臬的原因,他在視覺上示能和意符都及其突出,一塊屏幕和一個按鈕,屏幕用戶點擊滑動交互,按鈕用于點擊交互,學習成本很低。大家試想一下之前的塞班系統(tǒng),左上角和右上角兩個按鈕是和屏幕左下方的功能和右下方的功能映射,雖然也很易于理解,但是當大家看到蘋果這么簡單的手機的時候,相信所有人都是驚訝的:



△.示能和意符的關系

示能揭示了世界上作為主體的人(這里只考慮人),如何與其他東西進行互動的可能性。

一些示能是可視覺感知的,一些則是需要視覺之后聯(lián)想感知(即不可直接感知)的。

意符指示能操作的位置。

一些意符是生活中的符號、標簽和圖樣,如門上用符號標記的“推”、“拉”或“出口”,或指示所要采取行動的箭頭和圖示,或是朝向某個方向的手勢,或其他的說明。一些意符僅僅是預設用途,譬如門的把手,或某個開關的物理結構。

劃重點:在設計中,(尤其是UI設計中)意符比示能更重要。

示能和意符是本文中最重要的,下文會說到在app中的意符設計。


后面的映射,反饋和概念模型內(nèi)容我簡略說:

iii.映射(Mapping)

有一些自然映射是生物本能的或者是文化賦予的,比如如按照通常的習慣向上移動手勢意思是增加,向下移動意味著減少,。當一系列可能的操作是可見的,當控制和顯示契合自然映射時,設備就會容易使用。(具體參考我寫的交互閑談丨01里面那個視頻手勢的例子)

iv.反饋(Feedback)

反饋是控制論、信息論的著名概念。當我們做出了一個操作的時候,內(nèi)心的預期是需要獲得反饋的,如果在一個該獲得反饋的地方?jīng)]有獲得反饋,人就會很疑惑,比如如果一個app的按鈕點擊之后沒有跳轉(zhuǎn)或者沒有新的變化,那么人就會呆滯,如果反饋不及時,人還有可能會放棄。(比如網(wǎng)絡不好導致的跳出率,比如一個不可點擊的按鈕做得太逼真用戶瘋狂點擊發(fā)現(xiàn)沒反應之類的 = =)

過多的反饋可能比過少的反饋更惱人。設計拙劣的反饋可能是旨在降低成本,最糟糕的是不恰當?shù)臒o法解釋的反饋。指手畫腳的人通常是正確的,但他們的評論和意見如此之多,嘮叨不停,會令人分心,而不是給予幫助。我記得很多年前(大概是2010年左右),還曾經(jīng)見到過一款應用,用戶但凡點擊無效位置就會彈出一個Error的模態(tài)框,簡直是令我絕望。 = =

v.概念模型(Conceptual Models)

概念模型通常是高度簡化的使用說明,告訴你事物是如何工作的。概念模型只要有用就行,不必完整或準確。概念模型通??梢詮脑O備本身推斷出來,一些模型通過人與人相授,還有一些來自手冊。(比如app新版本中那些半透明箭頭加上文字的功能指引就是概念模型的一種,手游中一開始的新手指引也是。)




PART 2 - 屏幕的示能與基本的交互方式


一個人和一塊(未通電的)觸摸屏幕,在不借助道具的情況下到底能衍生出多少種交互方式?從五感出發(fā)去深入剖析的話大概分為:

嗅覺:用鼻子聞一聞這塊屏。(發(fā)現(xiàn)并沒有味道)

聽覺:用耳朵聽那塊屏發(fā)出的聲音。(發(fā)現(xiàn)并聽不到什么聲音)

味覺:用舌頭舔一舔這塊屏。(誒有點咸?)

視覺:用眼睛去看這塊屏。(這是一塊光滑的類似于玻璃的物體)

你們發(fā)現(xiàn)了么,對于一個原始的屏幕設備,比如手機,我們忽略按鈕什么的物理按鍵,光思考那塊沒用通電的屏幕,如果你作為一個心智未開化的人(或者現(xiàn)在假設你就是一只猴),你真正對屏幕有建設的交互一定是在觸覺上,我這么說大家能理解吧。我們不妨換位思考一下下,你現(xiàn)在是20年一個準備做概念手機的交互專家,你去窮舉任何人和屏幕的交互,唯一有『肢體接觸』的方法就是用手指(或者腳趾)去觸摸,還有就是用舌頭舔。用舌頭舔會有口水,不利于屏幕的識別,萬一漏電了畫面太美不敢想。

所以,結論是,人類看到一塊屏幕設備,這塊屏幕設備的視覺示能最終導向了,人和屏幕的交互手段被定位在觸覺上,而腳趾相對于人類來說沒有手指靈活,所以最終我們把交互規(guī)定到手與屏幕的交互(簡稱交互手勢)。

觸覺:

我們來窮舉一下手指和屏幕的交互方式:(圖片來自Graphicpear,中文是我自己加上的。)


不要糾結于圖,往下看,其實現(xiàn)今的所有的手勢交互,我們基本操作分為:

一根手指:單擊、雙擊、長按、拖動、上下滑、左右滑。

兩根手指:單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉(zhuǎn)。

三根手指:單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉(zhuǎn)、捏按。

四根手指:單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉(zhuǎn)、捏按。

五根手指:單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉(zhuǎn)、捏按。

雙手雙指:單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉(zhuǎn)。

雙手十指:單擊、雙擊、長按、拖動、上下滑、左右滑、擴張放大、收縮縮小、旋轉(zhuǎn)。

(上面寫的雙手雙指是指每只手出一個手指,比如你們在手機修圖時候的某些旋轉(zhuǎn)操作)

其實你如果還要窮舉的話,還有雙手每只手一個指頭、雙手每只手兩個指頭、雙手每只手三個指頭、雙手每只手四個指頭這些奇怪的情況,但是由于現(xiàn)階段手勢足夠完成日常操作,所以日常的人和屏幕交互并沒有引入這些別的奇怪的方案。

我相信隨著科技的進步和發(fā)展,其他的雙手的交互操作也會大面積的被引入進來,起碼我個人在看類似于黑鏡啊還有別的歐美科幻片的時候,不止一次見到了這樣的畫面。(我印象最深的是黑鏡第三季06,女主角操控手機方式是四指橫滑,然后胖大叔操作無人駕駛的騎車的時候是雙手旋轉(zhuǎn)打開一個屏幕,然后再通過指頭拖動目標完成導航交互。)這些電影里面反應的人的未來科技中蘊含了很多交互方法,大家可以看電影的時候多留意一下。

有點扯遠了,回到手機app的交互手勢,(除開游戲以外)一般單指雙指即可解決。而先現(xiàn)今科技下,相對于大屏幕一些的平板電腦,無論是ipad還是Andriod廠商,都會引入三指,四指甚至五指的部分交互手勢。

由于今天的主題是手機app,那我們下一部分就著重主要來說說手機app的交互。

PART 3 - 手機app中的意符分析


在設計中,尤其是UI設計中,意符比示能更重要。

理解這句話的本質(zhì)是因為一塊屏幕上人需要設計圖形、按鈕、內(nèi)容。去讓他完成一些具體事情,所以在屏幕顯示的軟件中的意義符號就需要有很深的引導性。

還記得之前我的定義么?用戶界面上的意義符號,簡而言之,就是一切用戶感知中可以點擊產(chǎn)生反饋的功能集合。

我們閑言少敘,先來看一個例子:

如圖是喜馬拉雅FM的app首頁UI,我將從功能屬性、視覺焦點兩個角度,一排一排的進行分析:


角度一、首先從功能屬性上進行分析:

第一層:NavigationBar上的意符為『消息』、『搜索框』、『歷史』和『下載』,本質(zhì)上是以功能名字命名的意符,其意符的表現(xiàn)形式為圖片+文字。沒啥好說的,每一項映射到自己的功能詳情。

第二層:Tab的分類共有『熱門』、『分類』、『康永來了』、『直播』和『廣播』,其意符的表現(xiàn)形式為文字,這里大家看到『熱門』標簽本身變成橘黃色且下面有一個橘黃色細線,這是兩個符號是通過這么多年的用戶教育之后形成的意義共識,意義為:當前頁面狀態(tài)。這里我有一個小問題,大家猜如果這時候我右滑界面(采取的交互手勢是單指向左輕滑),會發(fā)生什么事情?提供兩個選項:

A、到『分類』頁面。
B、到『訂閱』頁面。

詳細絕大多數(shù)人都能答對,這里的正確答案是A,滑動到下一個tab『分類』。大家只知其所以然,感覺這里的tab本身就是靠滑動手勢來控制的,但是更深層次的原因呢?為什么?

這里涉及到一個滑動切換tab的遍歷解構,關于這個,我的網(wǎng)友@HoZiN老法師(大霧)的《淺議滑動Flick切換Tab導航 - 知乎專欄》這篇文章寫得很棒,大家可以去看看。在這里我做粗淺的解釋,在喜馬拉雅這個app中,『首頁』UI中的TabBar上的『熱門』、『分類』、『康永來了』、『直播』和『廣播』都是歸屬于當前BottomBar『首頁』的,所以我們在滑動操作的時候應從當前深度的最近層開始交互。

如@HoZiN的下圖所示:


如果用戶滑動這個頁面只能在首頁的5個tab之間切換,我們認為他是下圖的第一種,也即是在單一Bottom模塊下切換(Hozin將其命名為獨立Sub Navi切換,Sub Navi的意思其實也就是底部的Bottom navigation bar的意思,我上文中就直接簡稱BottomBar了,個人命名習慣而已大家能懂是這個意思就行),而另一種情況是有些app當滑動到最后一個tab,再右滑屏幕會進入到第二個Bottom模塊,既是下圖第二種的b-C和f-G的過程。雖然現(xiàn)在這種設計方式已經(jīng)鮮有app在繼續(xù)使用了,但是我在2017年的今天仍然是遇到了一些。并且有個特別而精彩的地方在于,一般情況下,b-C和f-G的滑動切換Bottom模塊的這個交互往往是不可逆的。這點就比較有趣了,關于這個更深層次的原因可能是開發(fā)的原因,可能是產(chǎn)品沒法做到每一個Bottom都有tab,也可能是因為別的app信息架構方面的原因,在這里就不展開了。

我們再繼續(xù)單獨看這個第二層:

215b59510beda8012193a31bbb4d.jpg

是不是發(fā)現(xiàn)有一個奇怪的格格不入的叫做『康永來了』的東西混了進來?這里我就必須吐槽一下喜馬拉雅的產(chǎn)品設計團隊了,作為一個普通用戶,我本能的以為這個tab下一定是和康永來了有關的內(nèi)容整合,放在這里是因為運營需要,這個其實在內(nèi)容平臺上很常見,大家看QQ視頻和愛奇藝他們不也經(jīng)常這么干,本身是一件無可厚非的產(chǎn)品推廣的入口常態(tài),然后我滑過去了發(fā)現(xiàn)其實他是『每日優(yōu)選』的一個頻道,只不過最近主推蔡康永的這擋音頻節(jié)目:

如上圖所示,這個奇怪的『康永來了』的tab歸屬到的不是康永來了的音頻詳情頁,而是一個『每日優(yōu)選』的列表頁,那我就認為這個設計是欠妥的。

我為什么說這樣的設計欠妥,其原因如下:

因為我確實是有幾個月沒有使用過喜馬拉雅了,我不記得『康永來了』這個位置之前是不是叫『每日優(yōu)選』,還是之前首頁只有四個tag,這個希望有關注的讀者下方給我留言確認一下。

那既然我不確定,我們不妨分兩種情況去分析:

第一種情況:之前首頁只有四個tag,而新加了一個以具體內(nèi)容ip產(chǎn)品名(比如康永來了也好,或者明天老羅來了也罷)作為顯示,實則是每日優(yōu)選的一個強視覺tag,為的是引導用戶點擊具體ip產(chǎn)品之后看到每日優(yōu)選的這個列表,從而為別的每日優(yōu)選這個列表頁導流。(我認為對于一個成熟的產(chǎn)品團隊,不太可能是這種情況)

第二種情況:之前首頁就有『每日優(yōu)選』這個tag,只不過后來為了運營或者強視覺需求,改成了具體ip產(chǎn)品名。(我傾向于第二種假設)

我猜測喜馬拉雅的團隊本質(zhì)上是希望借助類似于康永來了這樣大的ip露出,通過從視覺上的突出(視覺突出這一點確實做得很好)從而博取用戶流量,然后讓用戶通過查看『康永來了』這個具象的興趣點tab,進入每日優(yōu)選的這個列表,從而為別的每日優(yōu)選產(chǎn)品導流。

從文案層面來說『康永來了』確實比『每日優(yōu)選』更吸引人,但是如果是我來設計這個地方的話,我個人傾向還是放一個每日優(yōu)選的tag,畢竟這是所有用戶都能懂的語言,而康永是誰?這個問題畢竟不是所有人都知道的。

如果實在是通過數(shù)據(jù)或者產(chǎn)品運營需求表示,我們需要強調(diào)『每日優(yōu)選』的話,那我會把每日優(yōu)選的視覺也做得像現(xiàn)在康永來了一樣突出,但是名字不能變,還得叫『每日優(yōu)選』。

那如果康永來了這個ip市場運營那邊吩咐了,確實需要持久強推怎么辦?

辦法有,比如banner位就可以直接推,而且banner位可以直接跳轉(zhuǎn)到具體ip的詳情頁,路徑更加簡短,用戶馬上就可以購買,不像現(xiàn)在跳到的是一個每日優(yōu)選的列表,用戶還得通過一次點擊才能進入詳情。

還有另一種極端的情況,如果有一天運營同學告訴我,banner位不允許一直放康永來了,但是市場同學又告訴我康永來了這個ip很重要,需要長時間強推。那我的辦法可能是有以下兩種:

第一種辦法是在第三層的最前面(必聽榜的前面)加一個獨立的康永來了tag,這樣的做法是開發(fā)成本簡單易行,但是不夠優(yōu)雅。但是你連『小雅音響』這種智能硬件購買頁入口都放在上面了,多放一個運營強推ip也沒毛病啊。_(:зゝ∠)_

第二種辦法雖然比較decent一些,是在第四層和第無層的中間開辟一塊很小的次banner位去放,如下圖所示:

但是我個人是不推薦這種做法的,哪怕未來這個次banner可以擴展為多個次banner輪播我也不推薦,因為如果是這樣的話,用戶首頁第一屏留給『猜你喜歡』的內(nèi)容展示就很有限了。

總而言之吧,第二層tab的『康永來了』一定是一個待埋點考量的爭議設計。我只是提出我個人的見解,不一定對,大家切勿偏聽偏信。好了我們繼續(xù)往下看。

第三層和第四層:圖片banner和分類頻道icon,其意符的表現(xiàn)形式為純圖片/圖像+文字,banner嘛這個沒啥好說的,通過自動左右切換的圖片告知用戶一些產(chǎn)品需要告訴用戶的信息而已。分類頻道icon我之前的幾篇文章里面都有提到一些,記得在我的文章里我說到的格式塔原理么,大家打眼一看這個分類頻道icon就知道右側(cè)還有一些,是可以滑動的。

第五層和第六層:這個就更沒啥好說的了,就是一個常規(guī)的帶圖片的宮格列表(我習慣這么叫他們,你們想怎么叫都行)頁,其意符的表現(xiàn)形式為圖片+文字,右上角有點擊更多有一個向右的圖標表明是可以點擊跳頁的(具體參看我寫的分割線那篇文章)。到一個內(nèi)容更豐富的item列表頁。那么我問大家一個問題,為什么猜你喜歡的這個圖片不也做成左右滑動的而要做成這樣固定展示6張的呢?

這里主要是有兩方面的原因,第一是做成左右滑的話,屏幕空間最多只能展現(xiàn)三張半,不如現(xiàn)在這個展示6張露出得多。第二是有一個很有趣的交互上需要注意的點,大家看如下圖所示:

我標記藍色線框的部分大家看到了沒,這個banner也是可以滑動,分類頻道icon也是可以滑動的,整個頁面Tab也是可以點擊跳轉(zhuǎn)的。這也就意味著,如果要執(zhí)行tab滑動跳轉(zhuǎn)這個交互手勢,我想能采用的滑動熱如右圖紅色所示,區(qū)域本身就已經(jīng)很小了。如果下面猜你喜歡也做成可以左右滑動的話,那么Tab的滑動手勢熱區(qū)面積更小了。如果真是那樣的話,那這個Tab就不該設計成可以滑動加載的。

所以說嘛,app中的意義符號設計直接決定了這個app的易用性。不要亂來。

第七層:這就是bottombar具體沒什么好講的了,也就是五個圖形意符,各自表示著自己的意義映射?,F(xiàn)在很多app中大家會發(fā)現(xiàn)有些底部是只有icon沒有文字的,有些是帶了icon也帶了文字的,帶文字的目的也是為了解決圖形聯(lián)想帶來的意義映射路徑多的情況。這個不多說了。來看第二個角度。


角度二、從視覺上進行分析:

按照視覺強弱來看,『康永來了』、『banner』、『猜你喜歡』是頁面最重的視覺部分,其次是頻道入口icon和下面的Bottombar,最后是navigationbar上的小溪、搜索、歷史和下載。從視覺上看,其實作為內(nèi)容平臺的喜馬拉雅設計的很贊,沒有任何問題。內(nèi)容產(chǎn)品本身占有最強視覺強度,功能意符占有較弱視覺強度。這就是為什么猜你喜歡要用圖片+文字的宮格列表,不用類似于item之類的原因,因為比如這里的每一個節(jié)目都換成是一個item,那視覺只集中左邊的圖片上,而不像現(xiàn)在三張圖片這樣聚焦。

最后拋出一個視覺上BottomBar的問題,現(xiàn)在很多app會在實心icon還是線性icon上面糾結,知乎的BottomBar一直采用實心icon,而Airbnb一直采用線性icon,到底為什么?

我會在下一期的交互閑談里面說這個問題,大家也可以想一想,其實(如果我理解的沒錯的話)答案就在我上面這段論述中。



PART 4 - 手機app中的意符設計需要辯證的幾小點


一個擅長app中意符設計的人,本質(zhì)就是對appUI設計有十足把握的人,關于這里的幾點辯證只是提出來說一下,具體的UI設計過程中這樣的問題不勝枚舉,大家可以留言交流。


一、BottomBar上的意符到底要不要加文字?

手機中可供點擊反饋的意符設計分為很多種,有純圖片的(比如banner),有圖形+文字的(比如BpttomBar上的那些),有純文字的(不如上文中喜馬拉雅的切換tab,比如『點擊查看更多』、『點擊展開』、『滑動加載』之類具有誘導性的文案),還有純圖形的『比如像『一個One』這樣的app底部BottomBar是只有圖片不帶文字的』,還有一些是按鈕形式的。

在這些意符的設計中,意義識別是尤其需要被設計的。如果一個圖形無法表現(xiàn)他應有的意義,那就一定要在附近加上文字形成一個完整的意符。

舉個例子:已下載這個icon已經(jīng)被所有app用爛了,大家一聽就知道應該包含一個向下的箭頭,比如歷史記錄也是,大家都能想到是一個時鐘,這就是長期教育用戶之后用戶產(chǎn)生的意義聯(lián)想。所以喜馬拉雅和騰訊視頻中的這兩個意符設計,一個是帶文字,一個是不帶文字,都不影響用戶識別體驗。

但是比如再舉一個例,『我的』圖標,現(xiàn)在大家都習慣用一個『人頭像』,而一切新奇的產(chǎn)品比如說『氧氣app』,才用的是一個圓圈,那么這個時候如果是意義識別為主導的產(chǎn)品(比如電商啊或者用戶不是那么年輕的)就會選擇在下面加上一行中文。這樣的話在圖形上發(fā)揮得再不易識別,也可以借助文字瞬間映射到。

那比如像『一個One』、『Medium』和『500px』這樣的眾多app,他們的BottomBar都是一個純圖形:

純圖形帶來的其實是一種新奇感和簡潔的設計感。相對的,和用戶需要花更長時間的視覺判斷,比如第一張圖是『一個One』,第2,3,4個icon其實很易識別:一本書,一個音符和一個播放三角能夠很簡潔的代表文章,音樂和視頻。第二張圖相對就沒有那么容易識別了,尤其是第三個圖標,意義指向不明確,但是由于Medium是一個國外設計師聚集的網(wǎng)站,所以其實也還好,設計感在一定程度上會優(yōu)于識別也沒問題。圖3是500px,這5個icon就更易識別了。

所以,如果你采取無文字的BottomBar,那么請UI設計師用心設計你的icons。


二、設置引導用戶點擊加載的意符應該如何設計?

有一個app需要設計這樣一個功能:文字默認折疊展示3行,但是點擊之后需要(非跳頁)加載全文,那么請問需要設置怎樣的意符引導用戶點擊?

傳統(tǒng)的大概是三種方案:

第一是在文字第三行的前四個字用其他顏色(比如藍色)標記為『加載更多』,用戶一點之后加載全部(早期知乎的做法)。

第二種是在文字第三行結束之后再第四行的位置居中放一個『點擊加載更多』,用戶點擊之后加載全部。

第三種是在文字第三行結束的位置放一個省略號即可,用戶閱讀之后發(fā)現(xiàn)沒讀完,自己會嘗試點擊。

顯然,第三種方法僅適合社區(qū)類app或者貼吧或者問答類app,因為一般用戶讀都很難讀完,更別說給你點擊一下了。第一種和第二種也是見仁見智,一般情況下我個人推薦第一種,因為需要文字折疊成三行的頁面就說明本身畫面排布很緊張,就不要另起一個第四行放『點擊加載更多』了。


三、app中的按鈕設計,什么時候應該有push色,什么時候應該沒有?

這是我的微信公眾號后臺有一個小伙伴的提問,push色這個東西在網(wǎng)頁上有別的更多作用,但是在app中,一般就只用來反饋行為。

有兩種情況:

第一種是你點擊某個意符,這個意符發(fā)生變化(顏色或樣式變化)同時跳轉(zhuǎn)。

第二種是你點擊某個意符,這個意符完全不發(fā)生變化但是頁面跳轉(zhuǎn)。

從用戶期待每次行為都得到反饋的心理上來說,我們當然希望所有的意符都能呈現(xiàn)及時反饋以證明你的點擊行為是有效的(也就是上面的第一種)。但是有時候由于反饋動效我們寫得不盡如人意問題,我們看到冗長(哪怕只有半秒)切重復的的反饋內(nèi)心就會就會很煩。

舉個例子比如原生安卓的Material Design點擊每個item都會出現(xiàn)一個水波動效反饋,當然原生Material Design的動效是足夠優(yōu)秀的,所以我們會覺得很有新奇感。但是你們?nèi)绻囋嚢寻沧康倪@個動效拉長別說一倍,拉長三分之一。你們一定會崩潰的相信我。



PART 4 - 總結


1、app產(chǎn)品設計和UI的設計中,意符的設計是當眾最重要的一環(huán),因為每一個意符作為產(chǎn)品的功能入口和行為入口,它們不光光是產(chǎn)品的流量節(jié)點。更是app產(chǎn)品信息架構的核心提現(xiàn)。

2、在設計app的意符的時候,要更多的考慮到意符所蘊含的具體交互手勢(比如喜馬拉雅的tab bar就包含了滑動和點擊)以及具體的對用戶行為的思辨。

3、app中意符的設計一定是框架層面的設計,他的本身視覺層級不易過高,最好不能超過app主體信息。

4、意符的意義映射要盡可能的單一,最好能讓用戶一眼就了解這個意符是代表什么功能什么意義。

5、app意符的觀察、分析、設計是一個長期的過程,大家可以試著多問自己一些為什么。




文章來源:站酷   作者:Seany

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務



用戶體驗是玄學嗎?

純純

Part 01 - 用戶體驗和用戶體驗設計


關于“用戶體驗”這個詞,很多剛?cè)胄械男氯硕加X得它玄之又玄,妙不可言。一方面是不知道他具體到底是什么,就好像那是一塊理想地,看不見也摸不著,另一方面呢糟糕的用戶體驗,作為用戶是能清晰感覺到它的存在。所以呢,在這里,會圍繞“用戶體驗”這個詞做一個科普性質(zhì)的解釋和綜述,希望對初學者一些小小的幫助。



1.1 什么是用戶體驗?

用戶體驗的定義有很多種,我比較傾向的解釋是:

“用戶體驗是人對于使用一個產(chǎn)品、系統(tǒng)、服務時的預期和反應?!?

首先明確第一個概念,體驗是一個過程,生活中的一切皆是體驗,我們赤裸裸的來到這個世界,最后赤裸裸的離開,來人世走一遭就是來體驗來了。

從廣義上來看,體驗的主體是人,客體可以是一切物體和事情,媒介是我們的感官;當我們的感官作用在一切事物上,會產(chǎn)生相應的心理行為,比如預期,比如反饋,比如情緒,著所有的一切一起作用,形成了用戶體驗過程。


只要留心生活,你會發(fā)現(xiàn)用戶體驗無處不在。

舉兩個例子:

第一個是北京隨處可見的地鐵充值機,我經(jīng)常看到用戶站在那里懵逼,最主要的是他違背了用戶的操作習慣,插卡機器的的行為總會讓人聯(lián)想到APM機,而幾乎所有的APM機器卡都是插一半然后自動吸進去的,而北京地鐵卡是需要插到底,然后還需要用力按一下才能成功識別,跟多用戶懵逼在這一步,并沒有用力按,然后以為是機器壞了沒有識別。

第二個例子是我工作的地方旁邊商場一樓有一個肯德基,它有兩個門可以進入,第一個門是在商場外臨街,第二個門是在商場內(nèi)。

我連續(xù)兩周的工作日每天早上9點半到10點在這家店吃早餐,發(fā)現(xiàn)一件很有趣的現(xiàn)象,由于工作人員的疏忽,商場內(nèi)的門二經(jīng)常會忘記打開,因為這個商場的負二樓和地鐵站連在一起,所有很多人地鐵到站的人群從地鐵站口出直接從商場內(nèi)走向街道:

在這些人群里,如果他們正巧有買早餐的需求,他們往往會從門2進,如果正巧由于工作人員的疏忽,門2沒開。按照常人的思維,哪怕門2沒開,那不還有一個門1么,用戶完全可以多走幾步出去從街道門1進入啊,應該不會太影響。如果你能得出這樣的結論,又碰巧你正好是互聯(lián)網(wǎng)的設計或者產(chǎn)品人員,那么你可能有“自我安慰型人格”。

我吃早餐的兩周里做了一個統(tǒng)計,10個工作日里,每天在我吃早餐的這半個小時內(nèi),試圖推開門2卻發(fā)現(xiàn)打不開的,平均到每天有6位,按照每個人平均買一份早餐套餐15元錢來算,10天內(nèi),由于工作人員的失誤,這個門至少阻擋了至少900元營業(yè)額。


回到剛剛那個“自我安慰”的思維,我發(fā)現(xiàn),10天內(nèi)被這個門阻擋的實際62位用戶里,真正出街道從街道門1再次進入的人,只有十七位。也就是說這個實驗中肯德基早餐用戶被最短路徑阻隔之后,再次選擇次路徑完成轉(zhuǎn)化的轉(zhuǎn)化率17/62(27%)。

別急,還有更吃驚的數(shù)據(jù):在被門2阻隔的62個人中,有17個是自身順路要往街道右邊走路過門1的。但是由于被門2阻隔,他們17個人當中,哪怕自身行走路徑要路過門1,選擇從門1進去的也只有7位,大概在11/17(64%)(判斷順路依據(jù)是他們吃完后從門1出門往右走)。


再看一下肯德基這個例子的數(shù)據(jù)結論:

被門2阻攔的62個人里,45人流失。

其余17位選擇從門1再次進入,這17人里,本身就要順路經(jīng)過門一的占11位,說明大概率只有順路才會進入完成轉(zhuǎn)化。


這個例子說明什么呢?

在替代品遍地都在的今天,不要試圖去挑戰(zhàn)用戶的體驗。


當用戶看到肯德基的門2,他們產(chǎn)生的預期是馬上就可以推開享受一頓早餐,這時候由于門2打不開,使得用戶預期受挫。

受挫用戶的第一反應并不是想解決辦法(表現(xiàn)在例子中就是尋找另一個門進入),而是放棄它。畢竟,沒有肯德基我還可以吃麥當勞,還有星巴克,還有面包店,各種各樣的選擇。


這就是為什么互聯(lián)網(wǎng)行業(yè)把產(chǎn)品用戶體驗看得這么重要的原因,除了社交產(chǎn)品以外的用戶是很難有忠誠度的,你的產(chǎn)品難用,你不能給用戶更大的福利,用戶一旦發(fā)現(xiàn)別的產(chǎn)品做得比你好,用戶會馬上放棄你,轉(zhuǎn)而用別的替代品。


上面的那個例子主要表達的是用戶預期受阻帶來的糟糕體驗導致用戶流失。其實整個用戶體驗的過程當中,是有很多很的因素相互制約,協(xié)同作用的:


戶體驗本身一個很龐雜繁復的系統(tǒng);在一個過程內(nèi),用戶對整個過程中的元素的預期和反應(情感和生物反應)構成了整個用戶體驗系統(tǒng)。這里面包含了很多很多的旁支,比如人的感知、人的經(jīng)驗系統(tǒng)和使用場景決定了人對于單個體驗的預期,而如果超過預期會帶來驚喜,促使用戶正向評價,也促使用戶再次體驗。比如人感知和體驗中客體呈現(xiàn)的意符決定了人的行為等等…


用戶體驗最初的時候它只是用于表征易用性方面,而現(xiàn)在,它的概念更多的表現(xiàn)在情感的一個分支,包含設計情感互動和評估情緒 。因為人的情緒是很難拿捏的,面對不同教育背景不同生活經(jīng)歷的用戶,我們最初其實很難歸納出到底什么樣的設計是具有好的用戶體驗。


好的用戶體驗各有各的優(yōu)點,但是,糟糕的用戶體驗卻很容易被歸納和識別出來。


設計師們不斷的在識別和總結糟糕的體驗問題,慢慢在優(yōu)化這些問題的過程中積累經(jīng)驗,其實也慢慢的有了一些關于用戶體驗的方法論形成,這種方法論作用于各個設計行業(yè),工業(yè)設計、服裝設計、奢侈品、廣告、互聯(lián)網(wǎng)產(chǎn)品設計各個行業(yè)產(chǎn)生的方法論其實不盡相同。




1.2 什么是用戶體驗設計?


說起設計(Design)這個詞,那就厲害了 ,作為設計師的你聽說過解釋肯定有很多種,而我個人對”設計“的理解是:設計是一種”約束條件下,解決問題的可行的辦法“。而對于用戶體驗設計而言,早期的時候,我們僅能夠基于經(jīng)驗主義去完成一些設計,這時候?qū)<业淖饔脮环糯?,因為專家提出的不要這樣、不要那樣,往往會成為指導性方案:


但是隨著發(fā)展,不斷地有人站出來嘗試描述和定義用戶體驗的邊界,比如:


隨著探索者越來越多,我們最終也是大致能夠夠了出用戶體驗設計的定義范圍:既然體驗是一個過程,那么狹義的,用戶體驗設計實際上是通過改善和優(yōu)化用戶與產(chǎn)品交互過程,從而提升用戶的滿意度的過程。


這里有兩個要點:


1、用戶體驗設計的目標是逐步不斷提升用戶滿意度,前面兩有個定語:“逐步“、”不斷”,對于用戶而言,永遠沒有所謂“最滿意”的說法,只有“相較于上一次體驗更滿意”.所以除非定義一種可量化的終極滿意度模型作為指標參照,否則用戶體驗設計是一個永遠都有優(yōu)化空間的過程。


2、用戶體驗設計是圍繞過程的設計,在互聯(lián)網(wǎng)行業(yè)中,這個過程主要指用戶與產(chǎn)品(app、PC端,客戶端、VR等)的交互過程中,所以下文重點討論的是在互聯(lián)網(wǎng)行業(yè)中的用戶體驗設計。



Part 02 - 用戶體驗設計是一個崗位嗎?


以2018年2月為時間節(jié)點的目前來說,用戶體驗設計不是一個崗位,現(xiàn)階段來看,它更像是一個協(xié)同目標,每個公司的所有設計師(UI/視覺/交互),用研人員,包括開發(fā)人員其實工作的目標都是為了逐步提升自己公司產(chǎn)品的用戶體驗。


雖然用戶體驗設計目前還不是一個崗位,但是它正在趨向于成為一個崗位。要解釋這一點,我們還是要從用戶體驗的定義說開去,還記得用戶體驗設計是什么嗎?用戶體驗設計是通過改善和優(yōu)化用戶與產(chǎn)品交互過程,從而提升用戶的滿意度的過程。


既然要改善和優(yōu)化用戶與產(chǎn)品交互過程,那把這個句子拆分開來,大概需要的知識儲備有:

1、從主語的角度看:首先你要了解用戶吧?用戶是人,要提升人的滿意度,對人感到心理滿足的機制是不是需要了解?


2、從客體的角度看:客體是產(chǎn)品,在互聯(lián)網(wǎng)行業(yè)表現(xiàn)為手機(app)、pad(app)、PC(軟件)和VR設備等等。這些產(chǎn)品是我們著重需要關注的點,比如一個app中視覺信息的呈現(xiàn),app的信息架構、app的交互設計、app的可用性和易用性等等,都是需要考慮的。


3、既然是用戶與產(chǎn)品交互過程,是不是要知道人和產(chǎn)品(手機、app、PC)到底是如何交互的?每一次的點擊,滑動對于用戶來看心理應該是怎樣,產(chǎn)品的每一次反饋都意味著什么?


吶,你現(xiàn)在來看,其實我們互聯(lián)網(wǎng)行業(yè)現(xiàn)在劃分的UI/視覺/交互/用研,甚至往廣了說包括產(chǎn)品/開發(fā)/測試,工作內(nèi)容都是構成用戶體驗的要素,它需要的知識面特別特別廣,對人的綜合素質(zhì)要求很高,所以目前來看,用戶體驗還不能是一個崗位,但是很多大公司,比如騰訊阿里,他們期待設計師能夠變成有更大洞察和對業(yè)務、人性有更多了解的全方位人才,而不是一個只會畫圖的美工,所以說未來,用戶體驗設計師可能會變成一個title,但是可以預料的是,用戶體驗涵蓋的這么多方面知識,每個人都是有側(cè)重和專長的:可能有些人就是很喜歡視覺設計和UI設計,那他們在精研這部分的同時,相應的懂一些交互方面的知識,這就算是優(yōu)秀的偏視覺方向的用戶體驗設計師;那視覺表現(xiàn)很差的人能不能算優(yōu)秀設計師呢?當然可以,比如他是心理學或者HCI(人機交互設計)的研究生,對人和用戶心理有自己獨特的認識,再加上精通定性和定量研究方法,對數(shù)據(jù)有獨特的敏感,那他未來可能是用戶研究方向的用戶體驗設計師。


只不過我們現(xiàn)在因為崗位固化,大多數(shù)公司,每個人的工作職責僅限于那一塊,你是做視覺/UI的,那就好好畫界面,你是做交互的,那就好好研究布局,你是用研,你是DBA,你是什么職位就做什么職位的事情,從來不越界,這樣其實是不利于人的發(fā)展的,那我們追求上進的設計師們只能自己下來多看書,多去做研究,私下來多花時間修煉自己的內(nèi)功心法,才能讓自己立于不敗之地。


用戶體驗設計發(fā)展到今天,目前包含了最大的三個有模糊邊界的模塊是用戶研究、交互設計、視覺設計?,F(xiàn)在絕大多數(shù)互聯(lián)網(wǎng)公司也都是按照以上這三個模塊去設置崗位的,這樣有一個很大的問題其實是不利于設計師的發(fā)展。


阿里巴巴1688的設計總監(jiān)汪方進關于這三個崗位,有這樣的一番評述:

比如交互崗位,如果對接的是一位能力較強的PD,他們可能把交互稿定了七八成,交互設計師完善后交付給視覺設計師,而對接的視覺設計師又有一些交互Sense,他也許把交互稿又改了改,那么這個過程下來,交互設計師的內(nèi)容,還能保留多少呢?我所說的這種情況,可能也是當下我們交互設計師同學所面臨的痛。

而視覺設計師又是怎樣的現(xiàn)狀呢?視覺設計師拿到交互稿后,在交互稿的基礎上美化潤色一下,自主發(fā)揮空間不太大。從我們集團總體情況來看,視覺設計師的(P級)成長是比較慢的,因為我們講求論述自身設計的價值是什么,但把視覺從整體中剝離出來,視覺設計師設計的某一個頁面,具體能帶來多少商業(yè)價值?視覺設計師很難去論述這點。


關于用研、視覺、交互這三個模塊,我也想分開來談談,希望能對目前剛?cè)胄谢蛘呷胄胁痪酶械矫悦5男』锇橛兴鶐椭?



Part 03 - 用戶研究


上面我們說到,用研、交互、視覺這三個模塊構成了一個用戶體驗設計的能力維度,要搞清楚這三個維度,我們不妨先看看業(yè)界最出名的一張用戶體驗要素圖:

我們一般把最下面戰(zhàn)略層的部分分解開,其中除了產(chǎn)品和公司戰(zhàn)略之外,關于用戶需求的定義交給用研(用戶研究)人員去完成。


關于用戶研究,如果是一個從0到1的產(chǎn)品,產(chǎn)品初期是需要對產(chǎn)品用戶進行定位劃分和用戶畫像,就是我的這個產(chǎn)品是為了解決什么樣的用戶的什么需求的,這些用戶的屬性是怎樣的,他們具有什么樣的特質(zhì)和顏色、他們一般使用產(chǎn)品的情景是如何的?


這里需要注意的是,如果你不是一位有用研經(jīng)驗的人去第一次嘗試做用研,需要留心我們很容易落入理想化用戶設計的陷阱。再客觀的站在用戶角度去思考,去設計也會有主觀和流于表面的情況出現(xiàn)。我們不能想當然的按照理想情景去思考用戶需求,用戶需求是復雜的,再加上企業(yè)自己的,以及各部門的需求紛繁,所以一般在產(chǎn)品迭代的過程中新的功能很容易陷入想當然的“用戶就是需要啊”的思維之中。所以對于成熟的產(chǎn)品來說,需要劃分核心主流和普通用戶并分別畫像。關于用戶畫像的方法有很多很多,大家可以去隨意搜索在這里就不細談了。


還有如果是一個初次開展用戶研究的同學做用戶研究的時候,可以掌握幾種常見的方法,訪談法,焦點小組,易用性測試,問卷調(diào)查這些方法各有利弊,最重要的是找到當前情境下解決問題且行之有效的方案,比如訪談或者焦點小組,精心整理問題并邀請公司的一些員工或者核心用戶進行訪談并全程錄音,在結束后認真提煉訪談中多次被用戶提到的關鍵詞,從關鍵詞中按維度抽象整理出用戶的需要,是訪談的核心價值。并且輸出文檔,賦予思考,再以此作為整個設計改版的核心依托,讓里面用戶提到的關鍵詞在設計頁面中體現(xiàn),這才是有效的設計。


關于用戶研究的常用方法,具體推薦給大家兩本大部頭的書,大家感興趣或者不知道自己感不感興趣,可以去看看《設計調(diào)研》和《洞察用戶體驗方法與實踐》 第二版。



Part 04 - 交互設計 


交互設計的輸出物是產(chǎn)品原型,也就是你們看到的線框圖。那線框圖是怎么產(chǎn)生的呢?這個需要從產(chǎn)品經(jīng)理那邊對功能梳理開始。

一般大一點的有交互團隊的公司,比如新浪微博啊之類的,他們的產(chǎn)品經(jīng)理的工作重點會更加focus在功能本身到底是不是用戶所需要的,而經(jīng)過產(chǎn)品提出來的需求文檔,一般只有功能需求List和他們的優(yōu)先級,如果遇到要畫圖說明的,也就是簡略的幾一個草圖。

這時候,交互設計師會根據(jù)產(chǎn)品的提出的功能需求List去進行整理和區(qū)分:

這里整理和區(qū)分的方法是合并,拆分和歸納。

比如功能A是可以拆分成更細顆粒度的需求A1和A2的,其中A1和A2又碰巧屬于不同的已有的兩個功能區(qū)塊,那么就可以把他們拆分到不同的功能線上,如果某些功能發(fā)現(xiàn)他們有同樣的屬性,那是不是考慮把他們整合在一起?


這樣整合完了需求,再按照優(yōu)先/重要的二維表格去劃分,最后得到一個需求量表:

然后我們根據(jù)這樣的版本需求量表優(yōu)先級和重要性,有的放矢的去設計功能入口和信息架構,就會游刃有余:


而一般復雜產(chǎn)品新增功能的時候,往往要考量很多因素,不能一味的去做功能堆砌,還是需要把不重要的功能隱藏或轉(zhuǎn)移,突出重要的功能,再把一些同屬性的功能入口組織在一起并列,這些都是在原型之前需要思考的問題。再往下,那就是根據(jù)一個一個的信息去設計產(chǎn)品低保證原型圖,那就沒啥好說的了,你們看到的原型圖幾乎都差不多,但是至于你們的交互設計師的原型是不是按照我上面步驟一步一步推演出來的,那就要打個問號了,這可能是區(qū)分一般交互設計師和高級一點的交互設計師的一種辦法。(如果你見到聽到功能就開始畫低保真的交互,那…)



如果你以為交互設計師就是畫個原型,那你就錯了,交互設計師切記不要淪為產(chǎn)品助理……其實在真?zhèn)€UX體系中,交互設計師承擔的是最重要也是最核心的一個環(huán)節(jié),那就是優(yōu)化用戶路徑(即優(yōu)化流量路徑)。


什么叫優(yōu)化用戶路徑呢,舉個例子,全民k歌是一款唱歌的app,那用戶最核心的功能就是在上面唱歌,而關于唱歌,大概有獨唱、合唱兩種維度。比如現(xiàn)在,我作為普通用戶,想要去完成獨唱一首歌的行為。這種行為從用戶路徑上看就是用戶從任何頁面到唱歌詳情頁。那么到底有多少條路?既是說,到底有多少個頁面可以跳轉(zhuǎn)到唱歌詳情頁?然后你會發(fā)現(xiàn),其實能跳到唱歌詳情頁的,除了清唱那種獨特的方法以外,其他的都是要通過伴奏詳情頁跳轉(zhuǎn),那么問題又來了,到底有多少個頁面可以跳轉(zhuǎn)到伴奏詳情頁呢?

就這樣,去窮舉所有的用戶路徑,然后看看這些路徑過程中有沒有一些冗余操作是可以刪減的:


窮舉所有用戶路徑,看看有沒有哪一跳是可以被優(yōu)化的(以唱吧為例



這里面有很大很大的學問,如果展開說的話可能是一個幾萬字都說不清楚的篇幅。

總之,一個好的app一定是功能和產(chǎn)品形態(tài)足夠扁平簡單。

要讓產(chǎn)品形態(tài)足夠扁平簡單,就需要根據(jù)app的形態(tài)去整理和梳理交互層級,針對流量問題進行具體的分流設計:

比如當我們看到一個200wpv的頁面,下屬三個平行按鈕分別只有40w、12w和3wpv,刨除場景問題之外,從交互出發(fā)那是不是我們可以設計一個內(nèi)頁的segment組件去完成三個內(nèi)頁的滑動跳轉(zhuǎn)、降低操作成本呢?

比如淘寶這樣:

又或者說,我們是不是可以未一個pv較低卻承載功能較大的頁面另外設置另多個入口呢?

比如像外賣產(chǎn)品這樣:

最后的最后,交互設計的工作產(chǎn)出就是原型了,既然都思考妥當了,畫個圖就就沒啥好說的了...



Part 05 - UI設計



再往后,交互設計師會把原型給到UI設計師,UI設計師的工作范圍大家想必很了解,就是把低保真的原型變成高保真的設計稿。


在這里再啰嗦一遍?。?


UI設計師的基本技能是精確的信息視覺傳達,不是視覺炫酷的界面!

UI設計師的基本技能是精確的信息視覺傳達,不是視覺炫酷的界面!

UI設計師的基本技能是精確的信息視覺傳達,不是視覺炫酷的界面!


重要的事情說三遍!


我們唱吧UED最近一直在招人。

看UI的簡歷,然后發(fā)現(xiàn)一個很大的問題是,我發(fā)現(xiàn)UI設計師的簡歷真的是千奇百怪五花八門,有那種插畫畫的很好的,有那種第一眼上來就是一個很立體的3D建模渲染震撼到你的,也有那種大漸變dribbble風給你一種好像很厲害的樣子的,但是這些都不重要,如果一個界面上的內(nèi)容信息沒有主次區(qū)分,或者展現(xiàn)得沒有層級對比,再花哨的東西都沒有用。


關于UI需要掌握的比如格式塔啊之類的東西已經(jīng)有太多人說了,在這里就不贅述,具體也可以看我的文章《形式與內(nèi)容的關系 -  app的視覺美成因分析》


UI設計其實都不是鬧著玩的工作,也絕對不是純主觀感性的工作,判斷一個UI界面的好壞可以通過易用性和易讀性測試、瞇眼測試的方法檢驗,判斷一個產(chǎn)品交互設計的優(yōu)劣也可以從易用性測試和用戶反饋中得出線索,判斷哪種交互手段和信息架構更為可行通過ab test的方法得出結論,這一些的一些設計它都是一個有著科學的方法論作為指導的。


希望從此之后大家審視產(chǎn)品的時候不要以UI美丑這種最低級的主觀因素去思考(當然UI的一致性和美觀度很重要),但是更多的,要想想更深層次功能布局和信息架構,以及產(chǎn)品打的人群上往更加宏觀和抽象的高胃度進行思考。


文章來源:站酷   作者:Seany

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務




從交互維度量化用戶體驗

純純

和大家分享一些在產(chǎn)品和交互設計中的一些自己的方法。



Part - I 什么是交互

狹義的交互(Interaction)定義交互主體必須是人本身,而客體可以是產(chǎn)品,環(huán)境,服務等等,且不論交互客體是什么,只要主體是人,人和客體去進行交互的時候,一定是人帶著心理預期施加一個行為,然后客體會根據(jù)這個行為給與一個反饋(沒有反饋本質(zhì)也是一個反饋),而人會根據(jù)這個反饋是否符合預期去進行心理修正。如下圖所示,這就是我理解的最小交互模型:

當時我舉的例子是用翻頁器去控制ppt翻頁:


如上圖所示,拆解這一套交互行為:

當我我點擊翻頁器的“下一頁”按鈕,我點擊行為附帶的心理預期是“PPT翻往下一頁”,然后我點擊的時候,遙控器塑膠按鈕給到我手指一個物理反饋,證明我按下的行為已經(jīng)完成了,這是“輸出端(我的手)的交互與反饋”,這時候遙控器接收到按鈕指令,把指令通過紅外線傳輸?shù)経SB接收器上,接收器把指令傳到PC端然后完成翻頁動作,再通過大屏幕傳到我的眼(輸入端)中,我就可以確認這一次交互反饋是符合預期的。BTW這里有一點想要補充:設備對設備(上圖中黑色箭頭),也屬于廣義的交互,只不過現(xiàn)階段大家研究的交互設計都是狹義的,人為主體的交互。


在我們?nèi)沼每萍籍a(chǎn)品的早期,有兩個東西是無法跳過的,那就是按鍵手機和PC電腦:


他們幾乎是同步在發(fā)展的,而這兩個產(chǎn)品的交互行為基本上延續(xù)到了觸屏手機時代,所以為了弄明白觸屏手機的交互,這兩個產(chǎn)品是值得講一講的。


先看按鍵手機(就是我們小時候用的非智能手機):

在按鍵手機中,最讓用戶困惑的其實是按鍵和屏幕之間存在一個映射關系,而不同廠商缺乏一個統(tǒng)一的規(guī)范,各家映射規(guī)則不一樣。大家是否還記得當年的手機說明書那可以說是相當厚,因為說明書必須要給用戶建構一個心理模型;比如上圖,點擊左上角和右上角那兩個“-”按鈕,其實一一對應的是屏幕左下角的“Goto”和右下角的“Names”。這個一一對應關系作為今天的用戶來看應該是很平常而且很易懂的,但是當年沒用過手機的人,需要花很長時間閱讀說明書,才能夠明白物理按鍵和屏幕上的映射關系,這就是觸屏手機很難用的地方,也是很反人性的地方。因為作為用戶來說,心智上,我們當然希望所觸即所得。

再來看PC,作為和按鍵手機差不多一起出現(xiàn)的載體形式,人們操作PC端人是通過媒介(也就是鼠標+鍵盤)輸入的,其實本質(zhì)上也是我們通過鼠標在桌面上滑動x-y區(qū)域?qū)诫娔X桌面上指針的移動來創(chuàng)造屏幕中x-y的映射關系,然后鍵盤上幾十個鍵配合輸入完成操作。


大家發(fā)現(xiàn)了么,上述的兩種設備其實本身就是在制造一種一一對應的映射關系去完成交互行為,這兩種載體從出身開始就還是需要很大交互成本的。

隨著科技的發(fā)展,觸屏感應技術推出了之后,印象中觸屏手機就是兩三年時間就摧枯拉朽的淘汰了按鍵手機,本質(zhì)上是干掉了一一對應的交互映射,所按即所得:

觸屏手機出現(xiàn)之后,交互專家們不禁要問一個問題了:

手和觸摸屏到底有多少種交互方式?

答案是有很多種:

越是高階越是隱藏的交互手勢越復雜,所謂的“交互成本”也越高,比如錘子三指滑動換屏保那種,就是利用了高階交互便捷實現(xiàn)邊界功能。那這么看起來,iOS也好還是所有的安卓手機都好,從用戶端而言,就是組合交互手勢,讓信息更好的傳達而已。那么同理,在App中也是一樣,如果我們了解了每一個交互行為的用戶心理預期,對設計工作而言就能做到有的放矢:


我們以“單擊”和“滑動”這兩個最簡單的交互行為舉例。

所謂單擊手機屏幕,用戶其實最核心的是有兩個預期:

第一是選中一個元素,比如Radio組件。第二是邏輯上的Next,比如點了一件衣服,應該Next到衣服的詳情;點了付款,應該出現(xiàn)付款流程,點了返回,應該back到上一路徑點等等。


劃動交互也是一樣的,用戶在一塊手機屏幕上單指劃劃劃,用戶內(nèi)心的預期其實也不復雜,最核心的預期也就兩點:

第一是查看屏幕外的線索(前提是設計師給用戶留下線索了或者是這個UI組件長得就是可以劃動的樣子)第二是查看相鄰標簽的內(nèi)容,或者查看同一個標簽下的相鄰元素,比如iOS的segment controlle組件就是典型例子:


當我們了解了這些之后,我們在實際的設計工作中就可以根據(jù)上面這些理論來合理選擇UI組件去呈現(xiàn)對應的信息了。




Part - II 從交互維度合理選擇UI組件

我們在設計工作中,選擇UI組件,本質(zhì)上就是選擇信息的呈現(xiàn)形式。

每一個常見的UI界面和UI組件,都一定也滿足上面所說的最小交互模型:



在這里我舉一些例子說明。

第一個例子:同樣的內(nèi)容,選擇不同的UI組件呈現(xiàn),給用戶呈現(xiàn)的是完全不同的產(chǎn)品結構:

大家看下面這張圖:


這兩個UI模塊擺在大家面前,大家應該能清晰的感受到,左邊是一個segment控制下面內(nèi)容的UI;而右邊是一個所有內(nèi)容列表的集合頁,只不過通過tab聚類了而已。

第一件事應該想到的是如果需要采用右邊的排列形式就必須要控制tag的字數(shù);然后由于右邊的tag占據(jù)了推薦貼的位置,導致推薦貼可能沒有左邊的那種展現(xiàn)形式更加醒目。但是相對的,圖右的優(yōu)勢在于,由于豎向排列tag可以讓一個屏幕顯示更多的tag,可以讓用戶更方便的定位內(nèi)容,比如外賣產(chǎn)品之所以用右邊這種形式是因為力求一屏展示更多的菜,而且外賣產(chǎn)品的左側(cè)tag一般是一家店鋪的菜的品類,用戶下滑菜品配合點擊品類,點完即走,很方便(京東和淘寶電商類平臺也是類似的)。

但是比如今日頭條,新聞類客戶端只能采用左邊的這種形式,因為新聞類客戶端是需要用戶長時間沉浸的,比如用戶選中一個“體育”的tag之后一般要沉浸的看好久好久,用戶需要沉浸在這個tag下的內(nèi)容中,那這個時候顯然用右邊這種設計方式讓tag常駐屏幕左側(cè)是不合適的。


再來看第二個例子,就是UI應該會隨著內(nèi)容而進行調(diào)整和優(yōu)化:


這里舉一個唱吧的例子,唱吧從7.0到8.6之間做了三次改版,大家可以看到,唱吧團隊幾乎是損失了屏幕效率來加大了間隔和突出了歌名,這是為什么呢?

這是因為頁面承載的關鍵任務不同,大家對比著7.0時候和8.6時候的UI樣式,正好是今天快手和唱吧的對比:

大家會發(fā)現(xiàn),其實這個頁面,快手和唱吧承載的內(nèi)容都是消費轉(zhuǎn)化,都希望用戶點擊進去消費內(nèi)容,但是兩款產(chǎn)品做了截然不同的UI風格,原因是什么呢?

快手在這個頁面,其實承載的關鍵任務是:“迅速讓用戶找到感興趣的點”,它這么設計的本質(zhì)原因是因為它的截圖可以幫助用戶判斷內(nèi)容本身,比如第一張圖是一個人在打高爾夫,右邊是一個工人,然后第二排左邊是一個游戲的鏡頭,右邊是一個傳遞正能量,大家可以很方便的通過圖片識別里面的內(nèi)容,用戶更沉浸更聚焦的去選自己喜歡的點擊進入消費就可以了。但是唱吧的視頻截圖其實是不能識別里面內(nèi)容的,大家可以看到,第一張圖是一個妹子,第二場圖是一個妹子,第三張圖還是一個妹子,那用戶點擊進去的動力在哪兒了?除了這個照片長相之外,更多的其實是文字決定的,是這個人唱的這首歌的歌曲名是不是我喜歡的,或者是這個演唱者的的歌手等級。

所以基于這種跟深層次的邏輯,唱吧和快手兩款產(chǎn)品的這個頁面都是為了促進消費轉(zhuǎn)化,但是UI長相上完全不同。


我們看第三個例子:


同樣組件下,選擇不同的交互方式,也會使得效果完全不同,比如現(xiàn)在有一個UI頁面,主要由一個tab(iOS叫segment controlled)組件控制下面的內(nèi)容,樣子張這樣:


我先假定一個前提:這個app中的這個組件不支持橫劃,只支持點擊切換。

好了,現(xiàn)在我假設這是一款已經(jīng)穩(wěn)定運營了一年的產(chǎn)品,為了說明問題,我假設一個理想數(shù)據(jù):

假設每天有20W的uv訪問這個頁面,其中分流情況是:

10Wuv消費“推薦”下的內(nèi)容

2Wuv消費“生活”下的內(nèi)容

1Wuv消費“段子”下的內(nèi)容

3Wuv消費“美女”下的內(nèi)容

4Wuv消費“游戲”下的內(nèi)容


這時候,為了優(yōu)化交互行為,有一天決定把這個tab組件從不可橫向劃動改成可以劃動的(并且告訴用戶這里可以滑動了喲~),然后給你一次機會重新排列這五個tab順序,你會怎么做呢?最簡單的辦法當然是把五個tab按照用戶消費意愿逐一排列,即:“推薦、游戲、美女、生活、段子”。

這樣排列當然沒有任何問題,但是還有沒有更優(yōu)解呢?我給出的解決辦法是這樣的,大家評判一下:

按照用戶的消費量,“游戲”是消費量第二的一個tab,毫無疑問我會把它排在第二項,這樣可以刺激用戶劃動行為,然后“美女”是消費量第三的,我會把他放在第四位,這時候我會把“段子”和“生活”這兩個消費率最低的tab分AB test做兩個版本放在第三和第五位拿去測,以判斷之前的“段子”和“生活”是由于自身內(nèi)容不夠優(yōu)質(zhì),還是之前交互成本太低導致的數(shù)據(jù)較差:



最后我們來看第四個例子:


比如一個app,他的UI張如下圖所示的這個樣子


現(xiàn)在假設在運營和市場團隊不做任何努力的情況下,單從產(chǎn)品交互的角度,能不能優(yōu)化上面這個版塊的點擊率?

首先我們來分析一下頁面架構:

如果我們認為,不管是點擊右上角的“>”,還是點擊留個圓形入口都算完成轉(zhuǎn)化的話,我們現(xiàn)在的這個紅色的UI組件,入口位置一共有7個。根據(jù)長尾理論,如果我們把這個圓形入口從6個擴展到比如九個,是不是一定對轉(zhuǎn)化率有正向影響?答案并不一定:

為什么呢?因為主要是這樣的改動會帶來一個未知的泳道橫劃交互,它會產(chǎn)生一定的影響,如下圖所示:

用戶看到這個泳道之后可能出現(xiàn)三種行為:

a.“用戶完全不滑動”——那入口就從7個變成了7.5個,別的沒有變量影響。

b.“用戶滑動看完了之后,點擊某一個或者左上角的“>”進入”——這是我們想要的轉(zhuǎn)化

c.“用戶滑動看了這些圓形入口之后松手,就是不點擊進去”——這是我們不愿意看到的結果

想到這里,那為什么我們不能讓用戶直接滑動之后松手就跳轉(zhuǎn)呢?


想到這里,所以優(yōu)化方案如下圖所示,給與用戶一個x軸區(qū)間,滑動手勢操過那個區(qū)間則告訴用戶你現(xiàn)在松手默認跳轉(zhuǎn),用戶不愿意跳轉(zhuǎn)也可以回劃,只要不足這個x區(qū)間就給與用戶自主選擇的機會:


我之前在上家工作的時候,我們把6個圓形入口變成了10個,然后用這個“松手跳轉(zhuǎn)”的交互把單元模塊的穿透率從21%提升到了31%,這是一個實戰(zhàn)當中的真實例子。


當然了,請大家再思考這樣的一個問題:


一個頁面的流量就這么大,一個地方漲了11%,那勢必別的地方就會相應的損失11%。一般情況下app首頁承擔著80%以上的分流工作,根據(jù)流量漏斗來看的話每一次引流都會導致其他模塊的數(shù)據(jù)下降,所以設計師們應該要根據(jù)運營策略和公司大的產(chǎn)品OKR來合理選用合適的交互組件,以達到想要的目的,還是那句話:“小孩兒才分對錯,大人只看利弊。”




Part - III 從交互的維度量化用戶體驗

移動互聯(lián)網(wǎng)產(chǎn)品設計中,尤其是在中國的app產(chǎn)品,有兩大分歧陣營:

“扁平”陣營表示了,我們需要產(chǎn)品足夠扁平,最好就是三次交互可以觸達所有app界面:

“簡潔”陣營也表示了,我們需要頁面信息足夠簡潔,最好一個頁面只完成一個核心任務:



雙發(fā)你來我往,誰也說服不了誰,如下圖所示,“簡潔”陣營反駁“扁平”陣營說:你們一點都不遵守席客定律,層級扁平是扁平了,但是相應的頁面信息變得越來越多,給用戶呈現(xiàn)的干擾就越來越多,用戶做出決定的時間也越來越多,所以你們“扁平黨”都是辣雞。這時候“扁平”陣營也找到了反駁的論點,他們說你看你頁面足夠簡潔了,但是頁面層級就很深啊,交互成本這么高,每一次都伴隨流失,可用性這么差,你們還有理了?所以“簡潔黨”你們才是辣雞!


中國的互聯(lián)網(wǎng)產(chǎn)品,很難做到既簡潔又扁平,這個問題的根源在于永遠有那么多信息需要呈現(xiàn),永遠有那么多功能需要添加,這個是中國的激烈市場競爭導致的,并不是說中國的產(chǎn)品就不如國外的好(我的哥哥之前在Facebook現(xiàn)在Airbnb工作,他經(jīng)常感嘆道國外的互聯(lián)網(wǎng)產(chǎn)品到中國來真的都得死...)我想要討論的是,面對中國現(xiàn)在互聯(lián)網(wǎng)產(chǎn)品市場現(xiàn)狀, 如果一款產(chǎn)品非要你站隊上面兩派陣營,你會選哪一派?我現(xiàn)在的選擇是“扁平黨”,因為用戶面臨一款眼花繚亂的app,如果是經(jīng)常使用,缺功能布局信息架構很少改動的前提下,早晚也會習慣和適應的,但是如果一些核心的東西不能第一時間暴露在用戶眼中,很有可能用戶就不知道你有這種功能。這個就是為什么我們設計經(jīng)常會說這個產(chǎn)品經(jīng)理傻逼吧,怎么什么東西都想展現(xiàn)出來,這一堆東西找個入口集合收起來頁面多干凈多清爽多好看呀~~我早年間也是和諸位一樣的觀點,但是現(xiàn)在我越來越覺得,界面清爽了,你的大功能feature因為設計隱藏沒有被發(fā)現(xiàn),不是設計開發(fā)測試都白做了么,說好的ROI在哪里?


我們大家都是互聯(lián)網(wǎng)從業(yè)者,不管看到這篇文章的你是一位設計、產(chǎn)品、還是開發(fā)、測試、運營人員,我們都明白用戶體驗這個詞是由N多維度綜合而成的一個過程性評價,它和方方面面都有關系。



那既然是這么專業(yè)且牽連甚廣的一個名詞,我們真的就沒有辦法去量化評價它了嗎?

永遠不要忘記,用戶體驗是個過程,而我們每個人也都是用戶本身。在這里我提供一種普通用戶維度的比較好用的用戶體驗評估方法是“窮舉分析用戶行為路徑”。


比如你是一款外賣產(chǎn)品的設計師,那么用戶在不同產(chǎn)品模塊下定一個外賣的流程路徑大概有多少種,都窮舉出來。比如你是一款在線演唱類的產(chǎn)品設計師,那么用戶在產(chǎn)品中完成一首歌需要的用戶路徑到底有多少條,窮舉所有路徑之后一一優(yōu)化,讓路徑變得更加扁平,或許是一個最“笨”但是有效的方案,怎么優(yōu)化呢?用淘寶消息頁舉個例子:


淘寶消息頁上面有“交易物流”、“通知”、“互動”三個tab,這時候我們假設一個用戶三個按鈕下面都有消息,用戶想要看完這三個消息大概需要幾次交互?答案是至少6次:“點擊第一個進去 - 返回 - 點擊第二個進去 - 返回 - 點擊第三個進去 - 返回”,這樣的交互顯得呆板且冗長,淘寶團隊巧妙的把三個內(nèi)頁集合成一個頁面的三個tab形式,大大縮短的交互成本,這就是所謂的“把用戶路徑變得更扁平”:


大家在使用很多產(chǎn)品的過程中,多多留心就會發(fā)現(xiàn)原來細節(jié)里面總有魔鬼。


文章來源:站酷   作者:Seany

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 平面設計服務


為什么交互設計能幫助產(chǎn)品解決問題

純純

市面上大量出現(xiàn)同質(zhì)化產(chǎn)品、設計,就是因為大家都在按照現(xiàn)有的,常用的模版在設計,現(xiàn)在其實比早兩年會好很多,很多設計師已經(jīng)開始從美化工作逐漸深挖到區(qū)分甚至自我驅(qū)動或者價值探尋的工作。


例如下面的案例,這是一個電瓶車電池租賃的一個產(chǎn)品。



undefined



從美觀角度,左側(cè)的界面更加簡潔信息也有規(guī)律,有美觀的banner和看起來讓人有點擊欲望的大按鈕以及“令人覺得很熱門”的熱門租賃板塊。當我不放出右側(cè)的對比圖時,大家在第一反應中,有多少人可以重啟自己的視角,還是說已經(jīng)被這個頁面所拉入到不可自拔的漩渦中去了呢?


如果讓你盯著第一個界面進行改版,我相信還是會有很多小伙伴可能只是會把底下的信息流挪上來,或者新增一些“我們覺得”有用的板塊。但其實這整個形態(tài)就是錯的,即便將錯誤路徑3改成了路徑2,你以然還是在錯誤的路徑上,本質(zhì)沒變。所以為什么我們說要做正確的事而不是正確的做事。





交互不僅僅能夠讓產(chǎn)品好用的,也要讓產(chǎn)品走對方向。


另外,UI也是交互的一部分,屬于看的懂。好用可以分為看得懂,學的快,用的會,交互體現(xiàn)在人們?nèi)粘K佑|到的大部分媒介,并且與之產(chǎn)生聯(lián)系。例如一把水壺,水壺的設計形式首先通過視覺讓你感知這是一個水壺,如果把水壺的外形做成一個馬桶,你覺得它還是一個水壺嗎,這叫看的懂。學的快指的是當我看懂了之后我馬上就可以對這個產(chǎn)品進行基礎操作,例如裝水、倒水。而用的會就是這個水壺更多的附加功能,例如燒水、定時、調(diào)溫等等。



1.交互設計中媒介與人的關系


1.1順應


交互的媒介是不可缺少的,大家是否去研究過為什么古代人們撰寫文字是從上至下,從右往左而現(xiàn)代人的習慣是從左右的?古代受限于工具、媒介,竹簡是主流的記錄文字信息的媒介, 有人會說竹簡可以從做往右寫不是非要從上往下啊,但是大家可以看到人們是如何打開進行閱讀的,如果是橫著閱讀但是打開是上下展開就會非常不自然了。


所以在當時人們?yōu)榱诉m應非常有限的工具資源,改變了自然的操作方式。但現(xiàn)代社會如果說你的產(chǎn)品不為用戶的使用和場景去考慮,那基本也就涼涼了。


從2g到5g時代的發(fā)展,除了生活方式發(fā)生翻天覆地的變化外,我們所接觸到的媒介也發(fā)生了變化,從2g時代以文字為主的信息到5g時代視頻、游戲、影音等為主的信息化進步,讓人們對信息的獲取更加方便快捷。除了內(nèi)容,外對于像移動手機這樣的設備用戶對其操作方式和習慣也有了更多的變化,從當初的搬磚按鍵手機到支持ar等新技術的超智能化手機,改變了我們的認知也改變了我們的生活方式。



1.2遷移


平臺遷移的交互成本,很多同學可能都玩過moba類游戲-dota,這是一款在電腦端戰(zhàn)術競技類游戲。在dota中我們經(jīng)常使用的交互形式主要分為鍵盤和鼠標的控制,鍵盤用來控制技能的釋放和其他快捷物品的使用,都是通過按按鍵的形式進行釋放。通過鼠標右鍵來控制人物的移動和左鍵選擇技能和物品釋放的目標,這是端游中基本的交互行為與操作。





在現(xiàn)在非?;馃岵⑶夷J胶蚫ota相似度很高的王者榮耀手游中,我們看到了,如何從端游到手游的交互遷移。從鼠標控制移動到左手拇指來控制移動,右手拇指來控制技能的釋放,在這里大家要注意,在端游中技能的釋放是可以非常精準的,并且可以指向性釋放在某一個角色中,但手游不行。鼠標擁有移動、視角、釋放技能、使用物品多個功能,但是在手游中我們無法做到選中某一個技能再點擊到某一個角色上,所以手游中只能進行非指向性的預判技能釋放。







同樣在端游和手游的吃雞游戲中,端游鍵盤控制人物移動,鼠標控制射擊與視角,但是在手游中控制射擊與視角就需要2個手指來完成非常不方便,也很影響射擊的精度,但是如果做成吸附式準星那么也就失去了很多的樂趣。所以很多的廠商為了解決的這個用戶痛點開發(fā)出了吃雞專用的輔助設備,專門用來給多余的手指進行射擊操作。


另外,大家如果做b端的同學應該也深有感觸,平臺遷移的成本非常高。想要把集成非常復雜的業(yè)務后臺切換到移動端是一件很麻煩的事,因為在網(wǎng)頁端我們有大量的空間和更自由的控件形式去承載信息,比如聯(lián)動的左側(cè)標簽導航和頂部聯(lián)動的標簽導航,在增刪改查的操作中顯得清晰高效。但是到移動端上雖然可以到做聯(lián)動導航,但是頁面顯示實在有限,很多的信息完全無法在一個界面中呈現(xiàn),所以要么將頁面進行左右滑動,要么拆分進行多步操作。但本身擁有復雜業(yè)務功能的后臺系統(tǒng)就不適宜遷移到移動端上。


web端的工具和網(wǎng)頁通常都會有撤銷操作,按CMD(ctrl)+Z大部分都可進行撤銷上一步操作,但是在移動端我們無法通過特定、或者統(tǒng)一的手勢進行撤銷,所以很多時候在表單輸入的時候會有一鍵刪除圖標,卻無法進行撤銷。所以我在想是不是可以在用戶一鍵刪除信息后,刪除按鈕變?yōu)槌蜂N按鈕,有待考量。



2.交互認知的盲區(qū)


到底什么是交互設計,這個問題其實是比較復雜的,也是我一直在思考的問題。所以也翻閱了很多文獻,嘗試做更多的案例來解釋。交互設計的概念真的挺多的,光網(wǎng)上能夠找到的定義就不下5種,這些對交互設計的定義中,比較頻繁出現(xiàn)的是行為、場景、用戶等詞匯,交互設計到底設計的是用戶的行為,還是設計用戶正在交互的媒介或者是用戶正在使用媒介這件事情,我覺得可能還是沒有能夠解釋清楚交互設計的本質(zhì)。


中國歷史文字的演變,它并不是一個模仿的過程,而是一個從底層對文化、自由、精神、環(huán)境、人的深刻理解而發(fā)生的一種進化過程。但現(xiàn)在其實很多的交互形式都是來源于一些大流量產(chǎn)品的模仿,更多的是擔心用戶成本過高而妥協(xié)為滿足用戶預期。



2.1信息不對稱


事實上,為什么我們講不清楚什么是交互設計,其實UI設計也一樣,她絕不可能單純的指代用工具繪制出用戶界面,其實是因為信息不對成、詞不達意或者叫做你說的比人聽不懂。我可以舉例的是我們的漢語


例如“你可以意思一下”,單就這句話,我們大概知道最關鍵的是“意思”二字,包含了特別多的含義,含義需要通過語境、使用場景來區(qū)分,說者的“意思”是想告訴聽者什么呢?沒人知道,是一口氣干完一瓶酒,還是喝一口?還是送一點禮還是?應付一下?


當然這句話中的“可以”也很有講究,加上“可以”說明你也能選擇不“意思”,是不是覺得這7個字讓我們整一句話都活了起來,說者與聽者如果不在一個境中,聽著就壓根不知道說者的具體表達含義。


同樣的,在設計領域,很多設計師喜歡用大氣、高級、逼格、有呼吸感描述的自己的感受。 說出來自己都要笑出聲,還有什么五彩斑斕的黑等等。就比如呼吸感這樣的詞,這個詞聽起來比較抽象,讓聽者都有點不太好意思追問什么是呼吸感,其實你問了,說者也不知道怎么描述??赡苷f者覺得現(xiàn)在信息太密集讓人無法呼吸,但設計者覺得現(xiàn)在剛好,所以本身就沒有一個標準,更多的就是主觀的感受,讓你不得不接受這個建議的原因是因為兩者的身份。


我們用我們能夠講述的語言去描繪我們不懂的事物,再例如設計師和開發(fā)還原只會說往左移動10px,而不會說給這個view加上padding left 10px。還有你和開發(fā)為什么溝通起來那么累就是因為你倆完全無法站在對方的角度對這件事達成共識,設計師通常喜歡描述從左到右或者從上到下,但是在開發(fā)的語音認知理,他需要知道的是空間坐標,并且具體的移動單位。所以為什么我們那么鼓勵廣大設計師去學習一些開發(fā)知識,開發(fā)也盡可能的去補充設計背景。


在這里,交互設計師產(chǎn)出的交互說明文檔就是能夠幫助設計師與開發(fā)有一個更好的溝通,所以能力較強的交互設計或者視覺設計都能夠把自己想表達的信息表達的很清楚。


再舉個例子,不知道大家有沒有編輯過問卷或者做過用戶訪談,很多時候是不是覺得收集到的信息無效、無用,其實很多的原因是因為我們和用戶對于這些問題壓根不在一個頻道,比如:你的問卷問的是,您喝酒的頻率是多少,選項有:從不、偶爾、經(jīng)常,在用戶的眼里偶爾可能是1年喝一次,而我們覺得差不多1個月喝一次算偶爾,再比如訪談的時候問用戶這個問題:您覺得您喜歡下面哪個頁面的風格?用戶:“什么是風格?”


所以交互設計師有一個能力久顯得很重要了:讓萬物都可與之對話的能力,對話需要什么,是語言。




3.交互語言的淺見


我們都知道,語言是我們溝通的根本,語言是由詞匯按照一定的語法結構在不同的語境中所組成的復雜系統(tǒng)。不同的種族有不同的語言,不同的專業(yè)有不同的語言例如在圍棋中有長、立、并、空、頂?shù)鹊龋缭谀P褪洲k中有分線、滲線、勾線、補土等,這也都是在特頂專業(yè)領域中的一些術語,但這些并不是語言,只是在某個領域中大家總結出來便于溝通的文字符號。


所以我們再回到上方看一下定義,首先語言是由詞匯所組成,詞匯是由符號做組成,大家可能都聽說過比如樂高啊、原子理論這樣的組件搭建方法,但這些都僅僅只是規(guī)范,而并不是語言。語言擁有更強的普適性和通用性。


那么我所認為的語言他首先包含了能夠組成詞匯的符號,這些符號大概就是指:點、線、面、體、色彩由這些點線面體可以組成的詞匯有:按鈕、文字、圖標、圖片等。但是光有詞匯不行,在漢語中有12種詞類:名詞、動詞、形容詞,在由句子組成的詞匯中包含了不同的成分:主、謂、賓、定、狀、補...這里不過多敘述。


語言很重要的一點它具有語境,語言的運用包含了看聽讀寫4個方面,看和聽指的是輸入,讀和寫指的是輸出,那么交互設計語言中,也包含輸入和輸出兩種屬性,例如輸入指的是由不同“詞匯”組成的“句子”,比如由標題、箭頭、色塊組成的一個itme,是一個可被理解、看懂的輸入屬性的控件。輸出指的是該控件可被出發(fā)并且進行狀態(tài)的變化和所進行的任務跳轉(zhuǎn)。



這里的控件雖然有兩個屬性,但是還需要語境來幫助我們理解,一個是它本身所能夠輸出的默認狀態(tài)的,比如點擊之后的跳轉(zhuǎn)頁面,另外他也可以具備產(chǎn)品賦予的自定義屬性,例如底部滑出picker。




還有,在漢語中“去買兩個桃子吧”,這里的“兩”肯能是虛數(shù)也可能是實數(shù),但是在交互設計中,我們?nèi)绾伪硎军c擊1下和兩下或者是多次呢,一般單擊的屬性通??梢杂幸恍┨匦缘姆枌傩运硎境鰜?,例如加下劃線的文字、一個帶箭頭的item、一個圖標、一個帶有主色的文案等等,那么雙擊的話可以用雙箭頭來表示嗎,當然不可以,雙擊在移動端的手勢中具有放大、點贊、返回頂部、定位消息、定位光標等功能。






那我們發(fā)現(xiàn)如果把交互設計能夠做成類似于語言的系統(tǒng)是非常有意思,并且有用的。這會讓更多信息不對稱的情況消失,不僅僅是設計師,在產(chǎn)品團隊中大家都能夠有一套共性的交互語言系統(tǒng),無疑是一件非常提高效率的事。但是目前的很多交互規(guī)范的文檔中,大多都是多種元素的拼合,給出常用的、可復用的控件、組件,但是大家依然還是無法從語言角度去創(chuàng)新,這就導致了很難會有新的、有用的交互形式的出現(xiàn),比如很多搜索控件都是承載在頂部導航欄中,那么在做規(guī)范的時候也只能在這個組件上去微調(diào),殊不知搜索這個控件的“語境”并不單單只能在頁面頂部,例如高德地圖做的就很好。這樣一來,這個組件的常規(guī)規(guī)范形式就能和很多產(chǎn)品區(qū)分開來了,當然要視產(chǎn)品形態(tài)不同。



4.業(yè)務背景與交互形態(tài)


4.1不同業(yè)務背景下的信息組織


市面上有許多的新零售電商產(chǎn)品,頁面中的信息流也是大同小異,但是無論是交互還是產(chǎn)品在做設計師必須要考慮的就是產(chǎn)品定位與當前狀態(tài)。例如目前我們看到的都是以下的信息流樣式,但是我們要知道,30000個sku和3000個sku的展示策略肯定是不同的根據(jù)算法的瀑布流在30000個sku中可以隨意展示,但是3000個就不行了,很可能在算法的過程中用戶會頻繁看到重復的商品。所以使用雙列布局的方法并不合適。





所以這樣的產(chǎn)品首屏策略就顯得非常關鍵。我們可以看到常規(guī)的電商產(chǎn)品中,首屏基本上都是呈現(xiàn)這樣的策略,從頂部的搜索、分類、banner、分流入口、cta、營銷瓷片區(qū)這樣的布局,從基本上能夠滿足一個大量sku電商產(chǎn)品的所有需求,但是如果用戶定位和產(chǎn)品本身的基礎無法支撐起這樣的場景又該如何去做首屏策略呢?


從交互角度入手,那么既然我們無法做到大而全,那么我們至少可以做到精準、限時,讓用戶上癮的策略,上癮模型這邊不再贅述。所以類似云集在首屏的策略可以概括為整合搜索與banner、分流入口、cta、營銷瓷片以及以時間為緯度展示的大圖信息流。重點在于可隨意控制的營銷工具,以及時間軸的商品推薦,讓有限的資源呈現(xiàn)更多的形式變化以及讓用戶有時間概念,每天固定時間來進行活躍。





4.2營銷工具化


通過交互手段我們也可以給運營工具更加靈活化打基礎。例如我們經(jīng)??吹降臓I銷瓷片可以劃分為非常多樣式與可能性,并且在后臺工具中靈活控制,同時除了日常的營銷目的之外,在大促或者活動需求下更可以將整一個首屏切換為極具氛圍的信息呈現(xiàn)。


4.2.1更加靈活的控制方式




4.2.2多樣的營銷結構



最后總結一下,我認為交互設計也包含了視覺,所以我們在決定用什么樣的設計形式之前需要考慮更多,入業(yè)務、用戶價值等等,從而用更加有價值的交互策略提出問題、解決問題會比單純的用規(guī)范去搭建界面更加有效。






二、為什么UI配色那么難


不管是做UI設計還是畫插畫,有很多同學覺得自己是因為天賦不夠所以對色彩的敏感度不夠,其實不然。一個可能是大家總結的太少,從來都是憑感覺和運氣去配色,但其實都是有講究的。本文不會給大家重復講解什么是rgb,什么是hsb,什么是cmyk或者什么三原色,這些大家都可以從某度中直接搜到。我今天要給大家分享的是人們是如何認識色彩,并且在產(chǎn)品設計中使用的。



1.人類對色彩感知的原理


大家都知道,對于不同的顏色,我們對其的感知是不同的,有人覺得暖色在前,冷色在后。暖色更醒目,冷色不醒目。那這是什么原因呢?首先我們要知道我們眼睛內(nèi)存在兩種感光細胞:視錐細胞和視桿細胞,視桿細胞能夠感知光線強弱但無法感知顏色,而視錐細胞卻相反,視錐細胞內(nèi)還有3種對不同頻率光敏感的細胞。我們經(jīng)常會用到視錐細胞,而視桿細胞卻用的少,更多的是在黑暗的環(huán)境中使用的多。


視錐細胞的三種類型分別是低頻、中頻和高頻視錐細胞,分別對紅、綠、藍三種顏色的光敏感。而且這三個視錐細胞分別也有重合的部分。低頻視錐細胞對整個可見光頻譜都敏感,它的范圍包含的比較廣,特別是對于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍視錐細胞可以感知。





大家在平時生活中都能看到,在馬路上、機動車道上以及一些警示牌都會采用黃色、橙色等標識,因為這些非常醒目。更容易被紅視錐細胞感知到,但如果你的標識用的是冷色調(diào)那這個交通事故可能要發(fā)生的頻繁的多。



1.1人對色彩邊緣的對比更加敏感


我們來做個實驗,如下圖,大家覺得在中間的灰色塊是純色還是漸變色,可能很多同學看上去都會覺得是個漸變色,但其實它就是一個純色,不信的同學可以自己在工具中嘗試一下。




但如果你把這個色塊拿出來后,不在這個環(huán)境中直接進行邊緣對比,那就不會出現(xiàn)漸變的情況了。那光說原理,我們也來看一下在產(chǎn)品設計中需要注意的地方,因為在UI界面設計中我們通常需要把一些圖片、卡片疊加放置,這樣就會造成邊緣視覺的對比,本來不明顯的兩個元素重疊之后變的很明顯。所以例如一些標簽的背景色和頁面整體的背景色。





如果你想要讓兩個顏色接近的元素具有識別度,那么最好將這兩個元素進行重疊擺放而不是分開擺放。另外,如果是卡片樣式的設計,背景色一定不要過于灰暗也不要過于淺白,過于深的話會讓卡片輪廓過于明顯而導致整體看上去顯臟以及很明顯的對比,顯得不自然和舒適。如果過于淺的話也會導致信息的不聚焦。





還有,為什么被框起來的文字會看上去更加有點擊的欲望其實也是這個道理,因為文字和背景疊加產(chǎn)生的輪廓只是文字的輪廓,在我們的第一印象中只是一種符號,當它被賦予顏色之后我們才會意識到它需要我們?nèi)プ⒁饣蛘呖杀稽c擊,但依然還是不夠明顯,所以為了強化可點擊這個感覺,我們才用了線框、背景色、箭頭等方式。





2.色彩在UI設計中的作用


1.加深品牌印象與品牌感


一般來說,產(chǎn)品都會有一個品牌的主色。而這個品牌的主色也通常會運用在外面的產(chǎn)品界面中,所以例如閑魚、馬蜂窩等,主色都采用了黃色,黃色具有非?;顫姟⒂腥?、好玩的特性,無論是線上還是線下都使用了這個品牌黃色,從每一個線上元素的主色,到線下包裝的印刷色。


但一定要注意的是,如果品牌的主色偏灰偏暗的話,可能不太適合線上的產(chǎn)品進行通用。例如之前的嚴選、云集、711便利店、宜家等產(chǎn)品的主色都是偏深和暗的,所以在線上的界面用起來會非常不和諧,和整體偏淺色、輕的風格對比起來太強烈,引起不適。





而且線上覺得還OK的顏色,由于印刷的原理,實物也會更加偏低飽和和偏暗。



2.引導用戶視覺凹增加易讀性


我們在上一篇十萬個為什么文章里提到了人們?nèi)绾伍喿x信息,提到了一個視覺凹的概念。所以在界面中,什么樣的地方使用色彩是有講究的。所以在這里通常會需要使用顏色的地方在于希望引導用戶和吸引用戶注意的地方才會使用色彩。例如下方產(chǎn)品,使用了高亮色來引導用戶視覺。







當然色彩的運用也會講整個頁面的層級凸顯出來,而不單純的用中性色來區(qū)分層級。


3.區(qū)分信息交互的狀態(tài)


同樣是上兩張圖,大家可以清晰的看到,美團中的附近熱賣好點、滿減標簽、價格,其實都只具備信息的呈現(xiàn),但不具備交互的特征和狀態(tài)。但淘票票中的“4.7萬”和“展開”卻不一樣,“展開”使用了輔助藍色,這里的展開就具備這個文案所描述的這個控件具備的交互特性-點擊后將隱藏的文字展示出來。藍色一般我們都會使用在某個可點的鏈接上,當然也會有其他的色彩來表示可點擊。


所以不是所有的元素都要賦予顏色,這樣會使整個頁面非?;靵y





另外,UI設計中主色除了引導用戶的作用外,也可以表示當前正被激活的信息狀態(tài)。例如愛奇藝app中播放詳情頁面,當前板塊標簽和正在播放劇集的激活狀態(tài)。





4.營造氛圍傳遞熱度


色彩除了上方所述的字段中的不同使用,在圖片和整體氛圍營造中也起了很大的作用,目前很多2c的產(chǎn)品往往會在界面氛圍的營造中運用一些手段。例如導航欄、底部標簽欄上的圖標,或者在首頁營銷板塊的瓷片區(qū)域都會用品牌色在活動時段內(nèi)進行氛圍打造





3.在UI設計中色彩運用的坑與技巧


1.色彩的正反兩面

在色彩的心理學上,大家都知道每個顏色具有一定的性格特征和表達。而且都會有正反兩面,可以看下方多種色彩的描述。





然而其實很多的產(chǎn)品使用的色彩和我們所認知的會有一些差別,比如咖啡品牌的主色選擇,在我們常規(guī)人之中,咖啡應該是褐色、棕色,但是大家看到星巴克、瑞幸、漫咖啡其實都用了和咖啡本質(zhì)沒什么關系的顏色





在瑞幸剛出來的時候,很多人其實不太習慣把這個藍色和咖啡結合起來,但是為了塑造品牌差異化,瑞幸一直將“藍色”作為品牌的主基調(diào),“小藍杯”這一稱呼不但讓消費者感到親切,也在眾多的咖啡中有了屬于自己的記憶點。在這支廣告片中,主基調(diào)同樣是使用藍色,不但符合了當下消費者的視覺偏好,也在為用戶留下記憶點之后,也讓用戶在看到藍色時自然而然的想到瑞幸咖啡。





2.顏色的禁忌用法

但凡各位使用了這樣的配色,保證各位過不了試用期,相信我。所以大家千萬要避開。


1.高飽和度的色彩

會讓人產(chǎn)生“幻覺”!讓人產(chǎn)生視覺疲勞,例如我將餓了么這個界面的色調(diào)調(diào)整一下大家看一下,不亮瞎算我輸。




2.灰部使用過多的配色

為什么很多時候我們總覺得界面臟兮兮的。是因為我們在界面或者配色中使用了過多的低飽和度、灰度較多的配色。所以這個也是要避免的




3.沒有規(guī)律且過多的配色

讓界面或者插畫看起來非?;靵y。一般來說顏色的使用也需要有側(cè)重點,所以我們常用的方法是6、3、1的色彩配比。





4.熒光色

熒光色絕對不可以使用在UI界面中,尤其是主色。會讓你瞬間失明!





5.太輕柔的顏色

在很多dribbble的飛機稿中,經(jīng)常能看到這樣的配色和練習。無論是在練習中還是實際項目中,這樣的界面也完全無法讓用戶看到想看的信息,沒有重點且輕飄飄的感覺。





6.現(xiàn)在很火的新擬物化設計

說真的,這樣的風格確實耳目一新,但個人覺得可能不會成為主流。因為它就和第五種一樣:信息可識別性很差。就不說色弱的人群,就正常的用戶來說大面積的白色+飽和度低的元素結合感覺就是得了“白內(nèi)障”。另外我們常說的一點就是所有元素都強調(diào)就等于什么都沒有強調(diào),這樣的風格在每一個元素都具有陰影的情況下都在爭先恐后讓用戶感知,原則是輕量化卻又需要那么多陰影,這樣就有點自相矛盾的感覺。


為了營造這樣的“新擬物”的輕量氛圍,還不得不在整個界面中簡化大部分元素,能不加文字就不能加文字,說的好聽叫做使用了奧卡姆剃刀原則,有一句話一直非常影響我做設計:“設計是需要被簡化的,但是簡化的過程一定不簡單”。所以不是單純的簡化所有元素為了達到這個風格的目的。




7.不要將對抗色重疊

例如下方,兩種對抗色重疊后會引起視覺閃爍的感覺。是不是覺得我有點帥的晃眼





4.正確的UI配色方法


定義主色


首先我們必須要說,色彩肯定是需要結合產(chǎn)品和用戶的定位去指定和提煉的,所以前期會需要去做一些研究例如用戶畫像,品牌沖刺或者是情緒板等方法。得到幾類“真實的虛擬用戶”,從而確定一些主色的方案。然后我們在主色的選擇中需要避開上面體到的坑,并且對市面上的app進行總結,我們發(fā)現(xiàn)大部分的產(chǎn)品色,簡單來講在我們HSB模式中去色都在一個固定的范圍,就像這樣。

 




在上文中也說到用色比例的631法則,所以在選取輔助色的時候我們需要定義好輔助色可以用在什么地方。例如知乎,其實輔助色沒有非常明顯的1種或者兩種,都是多色的輔助色方案,都在一個配色的系統(tǒng)中選取顏色即可。大部分產(chǎn)品目前都是這樣的策略,一個主色搭配多個輔色,如果有其他獨立的板塊可能需要重新定義專屬的配色策略。






定義中性色


其次再定義中性色,比如字體和線條以及背景色。字體是為了讓信息有對比,顯示層級,那么通常給2-3種層級即可,至少2種,至多3種。在選擇3個層次的中性色文字是,給大家一個建議:標題/正文文字顏色HSB的B值不要大于20.備注和次要文字b值不要大于50,默認文字不要大于80,大家可以去嘗試一下,且中性色不得使用純黑。







文章來源:站酷 作者:應駿



分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

圖標設計,你需要了解這些...

純純

目錄

  • 圖標風格匯總

  • 圖標設計流程

  • 案例講解

  • 圖標資源輸出



01 常見圖標風格匯總

  • 線性

  • 面型

  • 線面



1、線性

  • 單色

  • 雙色

  • 漸變

  • 不透明度

  • 一筆成形

  • 斷點



1.1單色

單色線性擁有簡潔、清晰的特性,在視覺層級上較低,適用于基礎功能圖標。b端較為常見,移動端常見在設置頁面或?qū)Ш綑谕ㄖ?、分享等圖標設計上。 


1.2雙色

雙色線性在單色的基礎上豐富配色,解決了單色線性原本過于單調(diào)的問題,在提升趣味性的同時,也將視覺層級進行了提高,同樣適用于基礎功能圖標。在使用過程中需要注意的是豐富的配色會偏向年輕化,需要考慮是否符合產(chǎn)品風格及主流目標用戶審美。 



1.3漸變

線性漸變還可以在用色上進行區(qū)分,簡潔的用色可以給人帶來科技、炫酷感,在車載ui中較常見。豐富的漸變配色則更適合運營入口設計,有著年輕化、熱烈的氛圍。 



1.4不透明度

線性雙色可以和不透明度風格進行很好的比較,前者視覺更跳躍,個性更鮮明。而后者在使用時普適性更強,即豐富配色細節(jié),又避免視覺過于跳躍(可以把它理解為同類色配色)。所以在大多數(shù)使用場景下,不透明度風格都是一個很好選擇。 



1.5斷點

斷點風格有線性單色&雙色該有的個性,并且在線性雙色基礎上繼續(xù)提升趣味性,使用需要注意產(chǎn)品目標人群年齡段。 



1.6一筆成型

該風格設計感和個性都極強,很考驗設計師對造型繪制的把控,功底不夠就很容易導致設計后出現(xiàn)識別問題。所以設計難度較大,且延展性較弱,難以表達復雜語義,使用需謹慎。



2、面性

  • 單色

  • 雙色

  • 不透明度

  • 晶白

  • 磨砂玻璃

  • 等軸側(cè)(2.5d)

  • 漸變

  • 新擬態(tài)

  • 輕質(zhì)感

  • 明暗質(zhì)感

  • 寫實

  • 抽象

  • 卡通插畫

  • 像素風格



面性與線性的區(qū)別在于前置視覺面積更大,整體視覺層級比線性高。下面部分和線性風格重疊的內(nèi)容就不贅述。




2.1單色



2.2雙色



2.3不透明度

面型不透明度風格,通過調(diào)節(jié)前后不透明度可以帶來較強的空間感,使用場景較廣泛。



2.4晶白

晶白嚴格來說也算質(zhì)感圖標(白色質(zhì)感)的一種,常見于品類圖標設計,通過透明度、投影、漸變等參數(shù)調(diào)節(jié),使整體立體感和空間感都很強。



2.5磨砂玻璃

又叫毛玻璃風格,是通過背景模糊,或剪切模糊圖層的技法來表達通透、有層次、精致的視覺感受,但由于容易與淺色背景相融,造成對比度不足難以識別的問題,所以在使用中需要注意無障設計。



2.6等軸側(cè)

也叫2.5d,有很強的趣味性,及識別度,適合重要入口或運營設計。但這類風格較為卡通,且表現(xiàn)花哨。使用需要注意應用場景及目標人群年齡段,避免干擾信息閱讀和不符和產(chǎn)品風格。



2.7漸變

這類風格可以很好的吸引用戶注意力,在電商、美食類產(chǎn)品中較常見,主要注意配色干凈協(xié)調(diào)。



2.8新擬態(tài)(Neumorphism)

新擬態(tài)圖標色彩相對單一,與背景融合度較高,通過高光、投影表現(xiàn)一定的立體感。通常是整個產(chǎn)品就是新擬態(tài)風格時才使用。所以該風格局限性較大,再有這類風格與背景對比較弱,無障設計問題較大。



2.9輕質(zhì)感

通過大量漸變、投影來表現(xiàn)立體感,整體風格偏年輕化,常見在教育類產(chǎn)品中,使用注意配色干凈和諧。



2.10明暗質(zhì)感

通過調(diào)節(jié)同一色相不同明度、飽和度來營造前后空間感,整體風格統(tǒng)一。


2.11寫實

這類圖標特點很明顯,有極高的識別度,目前美團外賣品類區(qū)入口就是該風格,整體偏年輕化。主要考驗設計師造型繪制、技法表現(xiàn)能力。



2.12抽象

通過幾何圖形組合、色彩使用來表達美的視覺感受。這類圖標藝術(裝飾)價值更大,不追求識別度,美觀即可。



2.13卡通插畫

這類風格既可以做圖標又可以做空狀態(tài)插圖,設計美觀有特色即可。



2.14像素風格

這類移動端界面較少見,目前只在一個海外電商產(chǎn)品(Jollychic)中看過,還有就是一些像素游戲中,比如「泰拉瑞亞」、「我的世界」。



3、線面

  • 線面

  • 描邊插畫



3.1線面

和線性雙色圖標類似,趣味性較強,具備個性化特點,可以做Tab選中狀態(tài)。 



3.2描邊插畫

類似卡通插畫,在卡通插畫基礎上加入描邊。同樣顏色,在一些特定的前后交接處利用線條做區(qū)分,算是多一種設計表現(xiàn)形式,同樣美觀有特色即可。 




4性格

  • 粗線

  • 細線

  • 圓角

  • 直角



4.1粗線

力量感、穩(wěn)重、男性等感受



4.2細線

品質(zhì)感、精致、女性化 



4.3圓角

安全、親和、年輕



4.4直角

嚴謹、正式、果斷利落 

由于圖標風格繁多,所以以上列舉并不包含所有圖標風格。



02 圖標設計流程

  • 明確語義

  • 關鍵詞詳解發(fā)散

  • 確定風格

  • 提取造型

  • 創(chuàng)意輸出



1、明確語義

圖標存在的目的是起引導作用,在豐富頁面視覺的同時,幫助用戶更快的獲取信息(當然圖標的使用意義還有很多)。設計師在將文字翻譯成圖標前,必須先理解其文字含義。因為最終呈現(xiàn)的圖標,需要用戶一眼能準確反翻譯其中含義(藝術抽象、裝飾類圖標除外)。

在C端設計中,以Tab為例,一些常見文案:首頁、分類、發(fā)現(xiàn)、我的,這類語義還算比較清晰的。但在B端設計或工具類APP中就會遇到一些復雜語義。以我的工作來說,目前在做一款網(wǎng)站搭建工具,后臺常會需要設計組件及對應的圖標,比如:滑動商品、多圖列表、上拉圖文列表這些語義比較復雜的圖標,在一定程度上會比較難精準傳達文案。



2、關鍵詞詳解發(fā)散

這一步有點類似情緒版使用,但不同的是:我們需要將確定的詞(A)進行詳細解釋,再將解釋文案中關鍵的詞語進行發(fā)散,得出一系列相關聯(lián)的詞(A1、A2、A3…)。有時間還可以根據(jù)這些詞找到對應的圖片,再看在這些相關聯(lián)的圖片中,有哪些細節(jié)可以傳遞最開始我們確定的那個詞(A)的意思。



3、確定風格

我們可以借助情緒版,根據(jù)產(chǎn)品定位和目標用戶描述,再結合應用場景,在目前已有的風格中找到符合產(chǎn)品氣質(zhì),符合當前模塊視覺層級的圖標風格。

前面我們已經(jīng)了解了目前常見的圖標風格有三大類:線性、面型、線面,其中還有很多細分,比如在線性中又分粗線(沉穩(wěn)、力量)、細線(品質(zhì))、曲線(女性化),還有圓角、直角,每種類型所傳遞的感受都不同。在創(chuàng)意前期,我們將每個點合理進行隨機組合(如下圖)即可創(chuàng)造一種更新穎的風格。



4、提取造型

經(jīng)過關鍵詞詳解發(fā)散,其實我們已經(jīng)獲得了很細節(jié)點,接下來將這些細節(jié)點進行合理融合后,就可以得到代表同一語義但形式各異的基礎圖標樣式(此時還只是想法階段,可以通過手繪方式記錄組合形式,不用特別精細化)。




5、創(chuàng)意輸出

在設計執(zhí)行前我們需要先了解兩個大知識點: 
  • 圖標設計規(guī)范

  • 圖標設計注意點


5.1圖標設計規(guī)范

  • 常見圖標尺寸

  • 圖標盒子使用


5.1.1、常見圖標尺寸

在界面圖標設計中最常用尺寸:12x12、16×16、24×24、32×32、48×48(其他尺寸:64×64、96×96、128×128、256×256、512×512)



5.1.2、圖標盒子使用

什么是圖標盒子?其作用是什么?

圖標盒子即圖標約束網(wǎng)格,來源于Material design。使用圖標盒子有利于使我們創(chuàng)造的系列圖標保持規(guī)范與統(tǒng)一。



5.2圖標設計注意事項

  • 簡潔美觀

  • 易于識別

  • 細節(jié)統(tǒng)一

  • 像素對齊

  • 視覺大小一致

  • 飽滿透氣

  • 融入品牌基因



1、簡潔美觀

圖標是否美觀,會受設計師對圖標造型把控、圖標構成元素比例、配色等設計能力影響。在UI界面功能圖標設計中,通常會盡量減少不必要的細節(jié),降低圖標復雜度,來幫助用戶快速識別。當然圖標也有豐富細節(jié)的做法,常見在一些重要運營入口上。



2、易于識別

識別度的問題,在最前面明確語義中就有提到過,這里就不贅述。



3、細節(jié)統(tǒng)一

在細節(jié)中包含:表現(xiàn)風格、描邊粗細、端點類型、圓角大小、斜角角度、配色、投影參數(shù)等(不同風格圖標的細節(jié)不同,這里只是列舉部分),上述細節(jié)在系列圖標中都應保持一致。



4、像素對齊

在圖標繪制中,需盡量避免坐標位置xy或?qū)捀邊?shù)出現(xiàn)小數(shù)點,以此保證最終導出的圖標是清晰的。



5、視覺大小一致

由于不同圖標外輪廓不同,就會導致哪怕在物理大小上相同的圖標(假設都是24x24),但視覺上可能還是會給人大小不一致的感受,因此我們需要借助前面提到的圖標盒子進行約束調(diào)整。


6、飽滿透氣

圖標的飽滿透氣,不一定需要加入很多筆畫(描邊、裝飾等)細節(jié)。而是盡可能在形成風格的同時,簡化能影響識別度的關鍵筆畫,通過調(diào)節(jié)筆畫大小、長短、位置使圖標達到一個最平衡狀態(tài)。


以如下途牛_我的頁面_功能區(qū)圖標為例:

圖中標紅圖標就存在飽滿度不足,及內(nèi)部較擁擠的情況,第一感受是看起來不舒適,品質(zhì)感比較低。除此外,還存在如下問題:


  • 圖標大小很明顯不一致

  • 設計語言不統(tǒng)一,有圓角有直角

  • 圖標風格不一致,有透明度+分割形式(我的保單)、有純透明度形式(專屬顧問、我的收藏)、還有其余單色實心形式



7、融入品牌基因

在圖標中融入品牌基因可以有效的提升產(chǎn)品品牌感,作為高階設計師必備技能之一,常見提取維度:

  • 顏色

  • 設計語言

  • Logo輪廓 


以我之前的豆果美食項目為例,提取到如下細節(jié):

顏色:提取黃色、綠色兩類顏色 
曲率(設計語言):品牌Logo走線順滑、自然、圓潤,個性鮮明 
分離(設計語言):黃色區(qū)域與綠色區(qū)域雖不相交,但存在聯(lián)系。(分離間留白) 


根據(jù)提取到的基因,最終得到如下兩套風格不同,但語言相同且都具備品牌感的圖標。


Logo輪廓:在圖標中融入品牌logo外輪廓(Google Play),或根據(jù)logo輪廓結合應用特性進行延展(Microsoft)。



03案例展示

就以途牛為例,對我的頁面功能圖標進行優(yōu)化。 


1、明確語義

根據(jù)文案進行詳細翻譯,幫助我們充分理解文案。



2、關鍵詞詳解發(fā)散

以「專屬顧問」為例:

釋義:有專門的知識或經(jīng)驗,受聘為機關團體或單獨個人提供專門咨詢的人。

提取釋義中關鍵信息,生成關鍵詞:專業(yè)專人,再根據(jù)關鍵形容詞發(fā)散一系列具象名詞。



3、確定風格

根據(jù)產(chǎn)品調(diào)性和模塊視覺層級以及考慮延展性,初步確定如下風格組合起來是比較適合:


線性:雙色、不透明度、斷點 
面性:單色、雙色、不透明度、輕質(zhì)感、明暗質(zhì)感 
線面:線面 


在實際查看中,發(fā)現(xiàn)Tab的風格為單色+不透明度+斷點風格。

為了和Tab拉開差異,最終確定以如下風格進行組合表現(xiàn)比較符合產(chǎn)品調(diào)性:

線性:雙色

面性:單色、雙色、不透明度、輕質(zhì)感、明暗質(zhì)感

線面:線面



4、提取造型

通過手繪或大腦想象進行造型構思,這里我就不展示手繪過程(行吧,我承認就是畫的太丑了不敢放)。



5、設計執(zhí)行

由于不同風格對圖標造型構思有所影響,且圖標類型很多,不同特點組合起來樣式更多。案例精力有限,所以只以線性雙色風格做演示,希望大家靈活使用。


這一步就是將手繪圖形矢量化,在矢量化創(chuàng)意過程中,我們可能會對手繪的圖形進一步簡化細節(jié)或新增造型,這都很正常。只需注意在整個繪制過程中遵循圖標設計規(guī)范,以及注意圖標設計注意事項即可。

圖標盒子使用


創(chuàng)意輸出


Tips

在繪制造型時需注意,圖標文案詳解中的關鍵詞也有優(yōu)先級,以如下「禮品卡」圖標為例,是表達禮品的意思多?還是表達卡的意思多?這個會影響圖標中相關元素的面積大小。站在商業(yè)角度看可能會更傾向于方案2,突出禮品,來吸引用戶。站在入口文案清晰傳達的角度,可能我會更傾向于方案1。 

1or2?


最后對專屬客服進行多風格嘗試,最終效果如下:


附上部分繪制過程中的淘汰稿:



04圖標資源輸出

在將圖標輸出給前端前,需要溝通好使用何種格式,目前常用圖標格式分為兩大類: 


矢量格式

  • SVG:縮放無損、體積小、支持前端樣式修改參數(shù)、單色情況下方便前端修改顏色來表達圖標狀態(tài),減少重復上傳。


位圖格式

  • PNG:支持透明格式

  • JPG:兼容性強,適合大尺寸高飽和度圖像

  • GIF:動態(tài)圖標使用,缺點是透明情況下邊緣容易出現(xiàn)鋸齒。



這里主要介紹靜態(tài)圖標中,svg格式在工作中如何輸出給前端同學使用(借助iconfont)。


svg圖標交接方式:

1、圖標資源優(yōu)化

在iconfont官方繪制指南中有描述,在導出前需要按如下規(guī)則優(yōu)化圖標資源:



2、選中圖標導出svg格式

以Figma為例,優(yōu)化圖標資源后,選中圖標將輸出格式選擇為導出svg。



3、上傳iconfont

在資源管理下,選擇需要上傳的位置。


選擇上傳圖標 



4、選擇顏色提交模式

去除顏色并提交:適合單色圖標,去除顏色提交可以方便前端使用代碼修改參數(shù),減少不同狀態(tài)圖標重復上傳。

保存顏色并提交:適合多色圖標(注意:在單色情況下,選擇保留顏色提交,前端則無法通過代碼修改圖標顏色)。



最后當我們把圖標都上傳好后,就可以將前端同學拉入團隊項目中開心進行玩耍。



好了,以上就是本篇要分享的全部內(nèi)容,希望對各位有所幫助。



文章來源:站酷 作者:幺零三

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務

別光抄了,信息卡片應該這樣設計!

純純

工作中我們經(jīng)常會接到一些信息卡片的設計需求,在早期很長一段時間里都困擾著我。和大多數(shù)剛?cè)腴T的小白一樣,當接觸到這類需求的時候,下意識就是打開自己的的Eagle,找合適的參考,去借鑒排版布局。但是其實最后只知道參考這樣做好看,對于作者的設計思路并不清楚。后面我嘗試去總結其中的規(guī)律,也得出了自己的一些設計思路。





02 這里講的信息卡片是什么?

讓我們先看下各類App中,一些比較不錯的信息卡片長什么樣:




03 一個信息卡片包含什么內(nèi)容?

  • 圖片

  • 圖標

  • 文字

  • 標簽

  • 按鈕

  • 布局



1圖片 】

圖片理解很簡單,就是該卡片想表達的信息主體,可以是商品、風景、插畫等,PGC內(nèi)容圖片通常由運營把控,UGC內(nèi)容為用戶自行上傳。雖然上線后實際上傳的圖片,對于設計來說沒有太多關系,但在設計稿中還是需要嚴格控制圖片質(zhì)量。(一定程度上也能提高過稿率)

圖片挑選需要注意如下:

  • 高清無碼

  • 主體突出且簡潔

  • 配圖與文字信息相關聯(lián)

  • 多圖片情況下,視線保持同一水平線或同一角度



2【 圖標 】

圖標的出現(xiàn)有以下幾類:品牌特定logo、特殊字段圖形化(如性別、定位、點贊、VIP、關閉等等,將字段圖形化后可以減少該組件內(nèi)的文本信息,方便設計排版的同時提升整體閱讀體驗)、氛圍點綴(主要在于豐富卡片,提升設計感來吸引用戶注意)

圖標設計需要注意如下:

  • 清晰度:品牌圖標避免過小,導致難以分辨。

  • 識別度:字段圖形化后一定需要確保擁有足夠的識別度,盡量在大眾認知范圍內(nèi)。比如“+”可以代表添加和關注、“x”代表關閉,“大拇指”和“愛心”代表點贊、“皇冠”代表VIP等等。

  • 風格一致:氛圍點綴圖標在配色上,需要保證與產(chǎn)品調(diào)性一致,或在色彩情緒上,與該模塊傳遞的感受一致。還有一些細節(jié),比如線性圖標描邊粗細,圓頭還是方頭端點,這類盡量保持一致(當然也可根據(jù)情況演變新的風格,但注意風格種類不宜過多)



3【 文字 】

文字即對圖片的描述信息,通常分為:標題、正文、輔助信息、優(yōu)惠信息、數(shù)據(jù)信息(評分、價格、點贊評論數(shù)等) 

文字信息處理需要注意如下:

  • 對比:需明確頁面信息權重,突出重點,便于有效傳遞信息。移動端常見對比方式:特殊字體對比、字號差對比、色彩對比、修飾元素(點線面)點綴對比。重點需要注意,避免在一個卡片中,采用過多不同大小字號和顏色去表現(xiàn)信息層級,盡量使層級精簡與規(guī)范。

  • 對齊:保證卡片內(nèi)信息之間存在某種視覺聯(lián)系,信息結構清晰。對齊方式分類:左對齊(符合左到右的閱讀習慣,閱讀體驗最佳)、右對齊(閱讀類文本比較少見,一般是為了將分好組的信息填充卡片四角)、居中對齊(居中傳遞嚴肅、正式感,在移動端中較少見,適合信息較少的情況下使用)

  • 親密性:將信息通過留白、分割線、色塊等方式來成組劃分,避免信息散亂。



4【 標簽 】

標簽指活動通知、產(chǎn)品賣點、重要時間、優(yōu)惠信息等這類需要突出的內(nèi)容,標簽按視覺層級由高到底依次劃分為:異型標簽、色塊型標簽、描邊型標簽3大類。 


標簽處理需要注意如下:

  • 視覺層級:一個卡片內(nèi)可能出現(xiàn)不同類型的標簽,比如同時有活動通知、優(yōu)惠信息、產(chǎn)品關鍵詞,這個時候就需要了解各類信息重要層級,正確選擇標簽形式(異型、色塊、描邊),幫助用戶快速抓住產(chǎn)品重點。

  • 極限場景:標簽內(nèi)字段不宜過長,需要考慮最大寬度,進行合理布局。(牽扯到屏效比)

  • 呼吸感:合理定義標簽內(nèi)部文字與底板的上下左右間距,避免擁擠。

  • 設計感:標簽多數(shù)是帶有活動屬性,在設計手法上可以嘗試破型設計,還可以嘗試加入一些小圖標、紋理,一方面營造活動氛圍,提升產(chǎn)品品質(zhì)感。一方面圖標具有一定語義,可輔助用戶識別。(適合單個特殊標簽添加,而不是一類標簽,因為多個一樣的標簽配上圖標同時展示太亂)

  • 對比度:在色塊標簽中需要重點注意,通常色塊標簽又分以下3類:有彩色底板+白色文字、帶不透明度的有色彩底板+有彩色文字、消色底板+消色文字,在挑選顏色時需注意文字與底板對比足夠清晰,減少閱讀障礙。



5【 按鈕 】

按鈕是卡片上最重要的元素之一(部分卡片也可能沒有),作為一個行動點,Ta的作用在于吸引用戶點擊。按鈕在表現(xiàn)形式上和標簽一致,我們最常見的有彩色底板+白色文字、消色底板+消色文字、描邊框+文字(有彩色描邊或有彩色字)。 


按鈕和標簽在處理上很相似,可參照標簽。



6【 布局 】

布局指上述所有圖片、圖標、字段等信息,在卡片內(nèi)的排布方式,常見布局方式:上下布局、左右布局、居中布局。 


信息布局需要注意如下:

  • 拓展性:卡片中字段的長短對布局的影響較大,字段較長且多的情況下需要的占用的空間更多,所以常見是上下布局。

  • 屏效比:上述拓展性與屏效比的關聯(lián)緊密,在卡片中,為了保證一行文字最大顯示,通常文字都是單獨一行,避免左右存在元素占用文字橫向空間。但單獨一行就意味著增加了卡片高度,雖然單個卡片內(nèi)文字顯示多了,但整個一屏中展示內(nèi)容變少。為了便于理解上面這段話,這里我們可以看到淘寶這個案例,淘寶的推薦卡片中信息很多,在遇到文案很長的情況下,為了平衡上面講的這個問題,使用到了如下較少見的布局方式。

  • 合理性:在列表式左右布局中,是選擇左文右圖,還是左圖右文。這需要看產(chǎn)品類型,在新聞資訊類產(chǎn)品中常見是左文右圖,而在美食、電商類產(chǎn)品中是左圖右文。再有在信息布局上也應符合人眼左到右,上到下的閱讀習慣。



04 如何做好一個信息卡片?

  • 明確產(chǎn)品類型

  • 明確應用場景

  • 了解目標用戶

  • 劃分信息權重

  • 同類信息歸組

  • 增強信息對比

  • 設計細節(jié)表現(xiàn)

  • 確定最終布局


1【 明確產(chǎn)品類型 】

產(chǎn)品類型不同主要對布局產(chǎn)生影響。

  • 以文字為主的產(chǎn)品,比如前面講到的新聞資訊類,通常采用左文右圖的布局。

  • 以圖片為主的產(chǎn)品,比如美食、電商類,通常采用左圖右文或上圖下文。 

原因:新聞資訊類,吸引用戶產(chǎn)生點擊的并不是因為圖片,而是具體的標題,通過標題用戶才能了解更多關于該卡片的信息。而美食、電商類產(chǎn)品則相反,這類產(chǎn)品圖片比文字更吸引人。



2【 明確應用場景 】

在我之前一號店改版中提到,信息卡片可以分為列表式和卡片式兩大類,對應的優(yōu)缺點如下: 


卡片式:在卡片式中圖片是設計的重中之重。這是因為人是視覺動物,在卡片式設計中使用高質(zhì)量的圖片能瞬間抓住用戶的眼球??ㄆ皆O計實現(xiàn)了圖文的完美結合,能給用戶呈現(xiàn)良好的視覺效果。

應用場景:

  • 圖片為主,需要利用圖片給用戶帶來良好的視覺沖擊,提升瀏覽過程中的趣味性,從而吸引用戶長時間瀏覽。

  • 適合隨機推薦的內(nèi)容,不適合進行查找。

  • 豐富內(nèi)容展示,適合元素較多情況,可以讓各種形式的元素保持井然有序。


列表式:信息集合一般是簡單的圖文組合(小圖+標題)或純文本信息。由于列表垂直排列每一行內(nèi)容,相對卡片式,在同樣大的屏幕中可以展示更多內(nèi)容,可供用戶閱讀信息更多,新聞類和數(shù)據(jù)類應用更青睞于這種設計。


應用場景: 
  • 信息直白,用戶無需點擊查看,即能盡可能了解內(nèi)容信息,適合快速查找。

  • 文本重要程度高于圖片,需要靠標題吸引用戶點擊。

  • 小屏幕應用場景。




3【 明確目標用戶】

目標受眾的屬性,對信息權重的劃分影響很大,比如對價格敏感的用戶,優(yōu)惠信息的視覺層級就需要抬高。為了便于理解下面的案例,這里我定義的就是對價格敏感性用戶。



4【 劃分信息層級 】

定義了目標用戶后,將卡片內(nèi)所有元素羅列出來,并借助四象限分析的方法,對各個元素的權重進行劃分。



5【 同類信息分組 】

將同類信息分組,便于后面確定元素之間的親密性關系。



6【 增強信息對比 】

前面我們借助四象限,將信息重要程度進行了劃分。接下來對元素之間親密性和對比進行處理,設計用戶瀏覽視線,在該過程中對案例中的元素進行如下處理:

  • 圖片:這里圖片及比例保持不變

  • 圖標:將原版會員圖標+字段的方式更改為圖標,原因有兩個:1、會員圖標+字段的方式占用了較多的橫向空間,導致標題字段信息展示減少,同時還導致用戶在閱讀完標題后,閱讀下一行內(nèi)容時視覺錯行嚴重(會員圖標+字段過長導致)。2、由于會員圖標代表會員內(nèi)容,這是絕大對數(shù)產(chǎn)品對用戶有過的教育,所以這里重設了會員圖標并單獨展示。

  • 字體:對標題字體進行加粗,(16pt,Medium),價格字體加大加粗(24pt,Medium),劃線價加粗(12pt,Medium),按鈕文字&活動標簽文字(14pt,Medium)精簡其他輔助信息層級(12pt,Regular)

  • 標簽:優(yōu)惠信息標簽由0.5pt改為1pt,提升視覺層級。活動標簽為色塊降低不透明度+有彩色文字。

  • 按鈕:由于標簽為描邊樣式,為了拉開差異,突出按鈕,所以將按鈕改為實心色塊。


做完上面這些后,可能大部分人覺得到這就可以了,但其實我們還可以再增加設計細節(jié),這也是你與其他設計師拉開差距的地方。



7【 設計細節(jié)表現(xiàn) 】

由于案例不同,增加細節(jié)的方式不同,所以需要具體案例具體分析。在本次案例中,我通過新增圖標設計以達到豐富卡片細節(jié)的作用。在活動標簽中新增小喇叭圖標,來增強活動氛圍、增強信息視覺上的互動性、增強代入感。在按鈕中新增時鐘圖標,配合預約文案,讓用戶預知操作后可能的結果,并且提升按鈕視覺層級、提升點擊欲望。



8【 確定最終布局 】

在布局中主要考慮兩個點:

1、合理性&拓展性

由于該卡片的應用場景為推薦列表,所以這里保持原有的上下布局,遵從人眼閱讀習慣。

2、屏效比

將活動標簽選擇放置在圖片與底板分割處,好處有: 
  • 借助這個方式,使圖文內(nèi)容過渡順暢,閱讀體驗更佳。

  • 盡可能減少了標簽對產(chǎn)品圖的遮擋。

  • 壓縮卡片高度,最終達到提升屏效的目的。



解決部分人可能存在的疑惑:


Q1: 3張設計稿中活動標簽為什么進行修改?

:稿1到稿2,活動標簽樣式修改,位置調(diào)整,對應不同的用戶,對于價格敏感性用戶,顯然稿2更能刺激他們點擊。稿2到稿3,對標簽樣式再次進行加強。稿3到稿4,考慮該應用場景是在推薦列表中,為了避免出現(xiàn)多個同類型活動的卡片,導致過亂,所以修改了設計樣式。


Q2:在稿3到稿4中優(yōu)惠標簽這一排內(nèi)容,和預約按鈕這一排內(nèi)容,上下調(diào)整的原因是什么?

:1、將文字區(qū)域看做一塊完整的矩形區(qū)域,稿3整體看起來更完整,而稿2像是右下缺了一個角。2、在信息閱讀順序設計上,稿3的處理是優(yōu)先讓用戶看到優(yōu)惠相關信息,更加迎合價格敏感性用戶的需求。


Q3:你認為最終稿還有優(yōu)化空間嗎?

:這個案例,是我截圖與我司相關App的。我認為如果可以,還需要再了解目標用戶畫像,了解用戶真正在意的信息是那些,這些都會對最終方案產(chǎn)生影響,也只有知道這些才能得出最合適的哪個方案。這里我定義的是對價格敏感的用戶,基于這類用戶來說,我認為最終方案是合適的

文章來源:站酷 作者:幺零三

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

純純

失敗的網(wǎng)頁設計各不相同,但是優(yōu)秀的網(wǎng)頁設計則有著共通的特點。你需要思考人們想要的是什么,什么東西能夠觸動他們,讓他們欲罷不能,無法忘懷。

聽起來似乎很簡單,不是嗎?取悅用戶的關鍵在于像用戶一樣思考。并不是每一次創(chuàng)新、每一次重塑、每一種新技術都能讓用戶愉悅,那些真正易于理解、便于使用、降低難度的技術、設計手法和抓人的視覺元素,才是一切的關鍵。下面總結的7項秘訣,會讓你的網(wǎng)頁脫穎而出的。

1、定制化

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

定制化,或者說個性化,是今天網(wǎng)頁設計中最典型的趨勢之一。用戶希望瀏覽網(wǎng)頁的時候獲得更加私人的瀏覽體驗,無論是玩頁游還是購物。

看看世界上最著名的那些網(wǎng)站是怎么做的吧。Amazon 為用戶提供基于購買歷史的產(chǎn)品推薦,Netflix 則會推薦相關的作品、有待觀看的下一部,并且基于用戶 Twitter 上的內(nèi)容來進行推薦。

每一個微小的自定義設計,都能讓用戶感覺這些用戶體驗設計是為他們而做的。同時,這種設計也會給用戶一種參與感和溝通的體驗,從而加深用戶的忠誠度。如此一來,用戶會更好地融入整個網(wǎng)站的用戶群或者社區(qū)。

2、簡練的動效

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

另外一個大熱的流行趨勢,就是動效設計。它不僅能為用戶帶來驚喜,而且具備強大的引導性。

動效設計的精髓在于簡單。令人頭暈或者不知所措的動效,應該不是你要的東西吧?動效應該是有目的性的,和其他所有的設計元素一樣,有針對性,達成目標是它存在的意義。

對動效或者說動畫最熟悉的,無疑是迪士尼。Frank Thomas 的《生命的錯覺:迪士尼動畫》中,就詳細總結了創(chuàng)造今天動畫的12個原則:

·擠壓和拉伸
·預期
·登臺
·連續(xù)動作和姿態(tài)對應
·緩進緩出
·弧形運動
·次要動作
·時序
·夸張
·立體刻畫
·吸引力

3、使用約定俗成的設計模式

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

對于常見的問題,設計模式就是可靠且可復用的解決方案。簡而言之,最常見的信息和交互方式被整合到一個界面當中,比如點擊按鈕,滾動頁面,滑動解鎖,它們都是設計師模式。

你需要熟悉這些常見的設計模式,并且在設計界面和交互的時候?qū)⑺鼈冇眠M去。這符合用戶在體驗上的訴求,也是易用性的最基本構成。

同時你也要在自己的設計中創(chuàng)造設計模式,在不同的頁面中使用相同、相似或者規(guī)則化的設計,讓用戶習慣。比如,不同頁面中的CTA按鈕的色彩保持一致,卡片式的元素使用相同的樣式,等等等等。

4、給設計以性格

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

沒人會喜歡單調(diào)無聊的設計。你的網(wǎng)站應當同你的品牌保持一致的性格,擁有獨特的氣息。

要做到這一點,通常需要用到微妙走心的文案和親切自然的語調(diào)如果你真的不知道怎么做,可以看看MailChimp 是怎么做的。(請注意他們的文本和圖片是如何無縫地連接到一起的)

5、在屏幕內(nèi)思考

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

用戶同網(wǎng)站交互都是在屏幕內(nèi)進行的,無論是桌面端還是移動端,整個體驗都是圍繞著屏幕進行的。

這并不是一句廢話。屏幕是一個區(qū)域,它界定范疇,賦予概念,創(chuàng)造隱喻。這也解釋了為什么視差滾動和卡片式界面是如此的流行。這兩種概念將一定量的信息合理地放置到屏幕這個容器中,讓用戶隨之同下一個元素進行互動。

如何運用好這個概念其實并不是那么容易。一個屏幕內(nèi)應當承載多少信息,需要仔細考慮。一個桌面端頁面所能承載的信息量在移動端屏幕上,可能需要劃分到幾個頁面當中去。

從屏幕的角度來考慮問題,可能會讓你的計劃更加龐大復雜,但是這種考量是有價值的,這種基于屏幕或者基于設備的考慮能讓用戶感覺更加便捷貼心。

6、一體化的內(nèi)容和交互

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

視頻、游戲、測試都爭取讓用戶能與之進行互動,這種互動的目的在于驅(qū)動用戶參與到設計中來。用戶與界面交互的越多,用戶所獲得的體驗就越好。

不過,有趣的元素能讓這一切截然不同。

讓交互內(nèi)容盡量簡單,不要牽扯太多,讓用戶可以一目了然,讓他們輕松獲得反饋的信息,不用在冗雜的體驗中淪陷。這其實和美劇的5分鐘原則有著異曲同工之妙。

7、輕松有序的設計

眼前一亮!7大秘訣幫你設計出令人難忘的優(yōu)秀網(wǎng)站

最后一個秘訣并非不重要,它甚至可以說是最基礎的原則:讓你的設計保持干凈、整潔和有序。使用柵格可以讓每一個頁面元素都有準確的位置。將響應式設計落實到每一個元素,能讓頁面能從一個設備兼容到另一個設備。

簡約風和極簡風能成為設計趨勢是有道理的。用戶可以更輕松理解這一切。簡約的視覺設計更容易交互。沒有復雜信息并且被精心設計的界面能更好地運作,賦予更好的體驗。

蘋果的官方App Store 和Google Play 都推薦過的游戲 Two Dots 就是個典型案例。誰都可以拿起手機毫無障礙地開始玩兒,它設計簡單干凈,容易互動,視覺元素周圍有足夠的空間,無需擔心誤觸。同時,其他游戲所具備的東西它也有——有趣好玩,可以共享得分,能分享到社交媒體。

結語

界定一個網(wǎng)站的體驗與否有的時候并不是單一的標準,而今天所推薦的7條秘訣本身也更接近于基本的Guideline,了解用戶,熟悉趨勢才能提供優(yōu)秀的體驗。

文章來源:優(yōu)設  作者:陳子木
分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設計m.yvirxh.cn )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


日歷

鏈接

個人資料

藍藍設計的小編 http://m.yvirxh.cn

存檔