![各設(shè)計崗位的工作重點](http://static.zybuluo.com/rabbielulu/01m39d39gtge515icrjbydwl/image_1bch01ufiit01sfq1bor1hm718bj9.png)
![用戶研究和文案撰寫通常由產(chǎn)品經(jīng)理負責(zé)](http://static.zybuluo.com/rabbielulu/5wykqc70e7vc7i86nurjw9c6/image_1bch2fc3k4km1s591utv8vidmi13.png)
線框稿,流程圖
用色克制但層次清晰
在完成需求分析以后举户,交互稿只是產(chǎn)品功能與業(yè)務(wù)邏輯的表現(xiàn)烤宙,為了更好的提現(xiàn)功能和邏輯,交互稿要少使用顏色俭嘁。使用黑白灰躺枕。
采用合理的頁面布局與黑白灰色調(diào)來表現(xiàn)頁面中的重要元素以及功能邏輯。
交互稿中出現(xiàn)的彩色是交互設(shè)計師向視覺設(shè)計師傳達的視覺設(shè)計建議供填,暗示視覺設(shè)計采用該色彩拐云,來強調(diào)元素。若非上訴情況下近她,交互設(shè)計師應(yīng)盡量少使用彩色叉瘩,一方面能夠盡可能的體現(xiàn)交互設(shè)計的邏輯,另一方面能夠減少對視覺設(shè)計師的視覺干擾粘捎,更大的發(fā)揮視覺設(shè)計師的創(chuàng)造性薇缅。
![](http://static.zybuluo.com/rabbielulu/ekqikewc33ikpnk0ujsqj3es/image_1bcf1qsnc4kt1qkp1962ho45tbm.png)
交互設(shè)計時的用戶細分(用戶研究)
始終要考慮兩個問題:1. 誰是我們的用戶危彩? 2.我們的用戶想要什么?
“目標驅(qū)動的設(shè)計” 設(shè)計的目的是什么捅暴,能解決什么樣的問題恬砂。
不要把自己當作目標用戶咧纠。
在符合行業(yè)特點的前提系蓬痒,交互方案要講求用戶細分,針對相應(yīng)的用戶角色設(shè)計個性化的交互方案漆羔。
功能簡單但考慮周詳
多功能流程的優(yōu)化梧奢,減少不必要的操作,讓用戶在不需要思考的情況下完成相應(yīng)的任務(wù)演痒。(減少操作步驟的前提是保證功能流程的完整亲轨,用戶不會出現(xiàn)功能使用障礙。)
![chrome瀏覽器的設(shè)置 顯示基礎(chǔ)設(shè)置鸟顺,隱藏高級設(shè)置](http://static.zybuluo.com/rabbielulu/ckg9n11215iiir7gpcyb6g90/image_1bcf9dj6e3ed1pf21croi081p7l80.png)
對于極端情況的一種,特殊頁面的處理讯嫂,不僅僅要告訴用戶出現(xiàn)錯誤了蹦锋,還要以用戶能夠懂的方式,告訴用戶哪里出現(xiàn)了錯誤欧芽,更進一步要告訴用戶該怎么操作莉掂。要引導(dǎo)用戶到正確的頁面中去,完成用戶功能千扔,提升用戶憎妙,讓用戶忘卻頁面錯誤帶來的不快。
![](http://static.zybuluo.com/rabbielulu/819dmblkrf4ho436hioecjzo/image_1bchmeksm11m1mscbq3fl5ajk9.png)
正向閉環(huán)
我們在做任何復(fù)雜的功能時曲楚,最好先只考慮一個正常的厘唾、無間斷的正向使用流程,因為這樣你的思路才能夠保證足夠的清晰龙誊。而在整個環(huán)節(jié)中抚垃,我們經(jīng)常會疏漏一些場景,使得整個流程沒有閉環(huán)载迄,舉個例子:
我們在做微信分享的功能時讯柔,會做如下幾個頁面:
![](http://static.zybuluo.com/rabbielulu/n8xw54b459mxs9zmotoozwqg/image_1bcf592vhqee1q95ocjbrjfpe2n.png)
然后忘記分享后的顯示界面
![](http://static.zybuluo.com/rabbielulu/a4od7g8vv443j49qrtnmmfvb/image_1bcf5a8l0tcp5bhrq9h9kbqc34.png)
注冊流程中的「打通斷頭路」
![](http://static.zybuluo.com/rabbielulu/pyh07ybeydu9a3uaxr3iixp8/image_1bchscsi41t1615dhdgsabl2hlm.png)
注冊流程中,在提示用戶號碼已注冊的結(jié)果頁上护昧,打通斷頭路魂迄,快速回到直接登錄
![](http://static.zybuluo.com/rabbielulu/tlrv9ajzvbpkon1w36kcviad/image_1bchsb41e185n1kb955t1r6utf79.png)
逆向閉環(huán)
如果有一個掃碼申請加入群聊的功能需求,方案如下:
![](http://static.zybuluo.com/rabbielulu/9c3wz4hj8241smqs0o3tk3t4/image_1bcf5dek5i631h1j119u110nr673h.png)
1.掃碼過后出現(xiàn)申請入群的頁面
2.點擊“申請入群”后惋耙,按鈕狀態(tài)變成“申請已發(fā)出”
群主如果答應(yīng)我捣炬,那我可以直接進入群聊熊昌,如果拒絕也會提示我已被群主拒絕,但是湿酸,如果群主沒有給出反饋呢婿屹?群主沒有同意也沒有拒絕,也就是說服務(wù)器是沒有接受任何指示信息推溃,那用戶下次再掃碼進來依然還是“申請已發(fā)出”的狀態(tài)昂利,不會有任何變化,所以通過反向推到后我們發(fā)現(xiàn)這個方案是不可行的铁坎。
方案改成:點擊“申請入群”后蜂奸,此頁面不變,而是進入新的狀態(tài)頁面硬萍,告知用戶申請已發(fā)出扩所,即使在群主忽略的情況下,用戶再次掃碼進來朴乖,還可以點擊申請入群祖屏,再次發(fā)出申請讓群主接收。
競品分析時避免盲目照抄
即便是同類產(chǎn)品买羞,它們的業(yè)務(wù)背景和策略也可能有很大的差異袁勺。
例如 電商產(chǎn)品也會有資訊頁面,可能是新品介紹或者是爆款推廣哩都,也可以是用戶試用心得魁兼。這個頁面的設(shè)計原理和新聞類、閱讀類漠嵌、社交類產(chǎn)品有很多相似之處咐汞,因此可以類比去看。
入口坑位設(shè)計中儒鹿,圖片化撕、標題和摘要的排布關(guān)系,
哪些采用了左圖右文约炎?
哪些采用了上下結(jié)構(gòu)植阴?
哪些使用了嵌套模式?
語句簡單但意義明確
![](http://static.zybuluo.com/rabbielulu/0g5qlytd24nkwxgph9j692yo/image_1bcf4bbhi1qgr1l9g13o51cv91nim1t.png)
在用戶要刪除文件時圾浅,二次確認的目的是減少用戶誤操作掠手。但是,左側(cè)的操作引導(dǎo)語狸捕,不論用戶采用哪一邊的操作都要去確認彈出框的內(nèi)容喷鸽,然后去進行提操作。而右側(cè)的操作引導(dǎo)語灸拍,具有明確的指引作用做祝,即使用戶不閱讀彈出框的文案砾省,也能根據(jù)操作引導(dǎo)語完成正確的操作,更加符合Don’t make me think設(shè)計理念混槐。
設(shè)計模式(Design Patterns)
-
使用用戶已經(jīng)熟悉的各種設(shè)計模式编兄,降低界面的學(xué)習(xí)曲線。
登錄声登,注冊狠鸳,表單校驗,下拉搜索等等通用情況下不要去造輪子捌刮。
http://ui-patterns.com/patterns (什么樣的情況下碰煌,應(yīng)該使用什么樣ui組件)UXpin ebook https://www.uxpin.com/knowledge.html
UXpin的Ebook都很不錯舒岸,總結(jié)了很多經(jīng)典實例绅作。 -
關(guān)注新的交互設(shè)計模型,在滿足易用條件下蛾派,尋求滿意度突破俄认。
例如: 普通的輸入表單
更加潮流的輸入表單
關(guān)于可用性
- 可學(xué)習(xí)性:對于一個新用戶來說,學(xué)習(xí)如何在界面中操作有多簡單洪乍?
- 可理解性:用戶能在多大程度上理解他所看到的眯杏?
- 效率:用戶完成一個任務(wù)有多快?
- 可記憶性:如果一個用戶離開這個系統(tǒng)一段時間壳澳,他們是否能很好的回憶起界面岂贩?
- 錯誤:用戶會造成多少錯誤?他們從錯誤中走出來有多快巷波?
- 吸引力:這個界面有多吸引人萎津?
- 規(guī)范性:界面依從規(guī)范、標準了嗎抹镊?
- 滿意度:用戶享受使用這個界面的過程嗎锉屈,以及他們對結(jié)果滿意嗎?