入門交互設計


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

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

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



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

你的界面需要引導用戶來操作了赌,即作為用戶應該清楚的明白我在什么位置,我下一步可以去做什么操作玄糟。
現(xiàn)在app的很多設計基礎包括頂部的導航分欄和底部的tab bar都是為了告訴用戶他在哪里勿她。
在做一些概念設計時候,如果單純是為了更好的視覺效果阵翎,就對這些基礎分欄進行大刀闊斧的設計逢并,最終導致了好看是好看之剧,可是用戶都不知道這頁面是干什么的結(jié)果,很明顯是違背了最基本的交互原則 狀態(tài)可見原則砍聊。


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

用戶在你的界面是要做什么事情背稼,這是你在設計之前應該思考的問題。
如何把用戶要做的這件事情更好的呈現(xiàn)給用戶玻蝌,反饋給用戶以及有哪些信息需要反饋給用戶都是你要從交互的角度思考的蟹肘,這包括過去發(fā)生的信息和即將發(fā)生的信息,也包括正向反饋和負向反饋俯树。(這種操作是否成功了帘腹?這種操作進展到什么程度了?如果這樣操作會有什么后果许饿?點擊之后會達到什么頁面阳欲?這里是否可以點擊?)



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

image


image.png

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

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

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

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

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

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

image

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

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ī)范包括組件 色彩 間距 版塊結(jié)構 等性湿。規(guī)范可以讓你的產(chǎn)品一致性更強,你要讓用戶能夠?qū)δ愕漠a(chǎn)品產(chǎn)生一定的規(guī)范性印象满败,當他看到一張頁面就能聯(lián)想到這是什么產(chǎn)品肤频。

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)品在設計的時候要盡量讓用戶去選篱蝇,而不是去寫贺待。

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)美商佑,就是基礎性的原則就沒有完全落實貫徹。這里就不舉例厢塘,基本所有的設計都要遵守的原則茶没,很重要肌幽,很重要,很重要礁叔。


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

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

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


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

  • a. 無需文檔
    進行新頁面的設計盡量直觀清晰徒爹,符合用戶習慣,無需引導即可使用芋类。
  • b. 一次性提示
    改版引導或者新功能引導給予一定的提示
  • c. 常駐性提示
    對于產(chǎn)品的操作性功能或者操作必須注意到的問題隆嗅,產(chǎn)品需要進行一定說明
  • d. 幫助文檔
    用來解釋一些常見問題。

轉(zhuǎn)載 原文

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末侯繁,一起剝皮案震驚了整個濱河市胖喳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌贮竟,老刑警劉巖丽焊,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異咕别,居然都是意外死亡技健,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門惰拱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來凫乖,“玉大人,你說我怎么就攤上這事弓颈≌燃簦” “怎么了杈女?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我纠永,道長,這世上最難降的妖魔是什么胞此? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮款票,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘泽论。我一直安慰自己艾少,他們只是感情好,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布翼悴。 她就那樣靜靜地躺著缚够,像睡著了一般。 火紅的嫁衣襯著肌膚如雪鹦赎。 梳的紋絲不亂的頭發(fā)上谍椅,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天,我揣著相機與錄音古话,去河邊找鬼雏吭。 笑死,一個胖子當著我的面吹牛陪踩,可吹牛的內(nèi)容都是我干的杖们。 我是一名探鬼主播,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼肩狂,長吁一口氣:“原來是場噩夢啊……” “哼摘完!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起婚温,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤描焰,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后栅螟,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體荆秦,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年力图,在試婚紗的時候發(fā)現(xiàn)自己被綠了步绸。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡吃媒,死狀恐怖瓤介,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情赘那,我是刑警寧澤刑桑,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站募舟,受9級特大地震影響祠斧,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜拱礁,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一琢锋、第九天 我趴在偏房一處隱蔽的房頂上張望辕漂。 院中可真熱鬧,春花似錦吴超、人聲如沸钉嘹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽跋涣。三九已至,卻和暖如春赘娄,著一層夾襖步出監(jiān)牢的瞬間仆潮,已是汗流浹背宏蛉。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工遣臼, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人拾并。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓揍堰,卻偏偏與公主長得像,于是被迫代替她去往敵國和親嗅义。 傳聞我的和親對象是個殘疾皇子屏歹,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361