筆記-產(chǎn)品交互設(shè)計注意事項

各設(shè)計崗位的工作重點
各設(shè)計崗位的工作重點
用戶研究和文案撰寫通常由產(chǎn)品經(jīng)理負責(zé)
用戶研究和文案撰寫通常由產(chǎn)品經(jīng)理負責(zé)

線框稿,流程圖

用色克制但層次清晰
在完成需求分析以后举户,交互稿只是產(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)造性薇缅。

交互設(shè)計時的用戶細分(用戶研究)

始終要考慮兩個問題:1. 誰是我們的用戶危彩? 2.我們的用戶想要什么?

“目標驅(qū)動的設(shè)計” 設(shè)計的目的是什么捅暴,能解決什么樣的問題恬砂。

不要把自己當作目標用戶咧纠。

在符合行業(yè)特點的前提系蓬痒,交互方案要講求用戶細分,針對相應(yīng)的用戶角色設(shè)計個性化的交互方案漆羔。

功能簡單但考慮周詳

多功能流程的優(yōu)化梧奢,減少不必要的操作,讓用戶在不需要思考的情況下完成相應(yīng)的任務(wù)演痒。(減少操作步驟的前提是保證功能流程的完整亲轨,用戶不會出現(xiàn)功能使用障礙。)


chrome瀏覽器的設(shè)置 顯示基礎(chǔ)設(shè)置鸟顺,隱藏高級設(shè)置
chrome瀏覽器的設(shè)置 顯示基礎(chǔ)設(shè)置惦蚊,隱藏高級設(shè)置

對于極端情況的一種,特殊頁面的處理讯嫂,不僅僅要告訴用戶出現(xiàn)錯誤了蹦锋,還要以用戶能夠懂的方式,告訴用戶哪里出現(xiàn)了錯誤欧芽,更進一步要告訴用戶該怎么操作莉掂。要引導(dǎo)用戶到正確的頁面中去,完成用戶功能千扔,提升用戶憎妙,讓用戶忘卻頁面錯誤帶來的不快。

正向閉環(huán)

我們在做任何復(fù)雜的功能時曲楚,最好先只考慮一個正常的厘唾、無間斷的正向使用流程,因為這樣你的思路才能夠保證足夠的清晰龙誊。而在整個環(huán)節(jié)中抚垃,我們經(jīng)常會疏漏一些場景,使得整個流程沒有閉環(huán)载迄,舉個例子:

我們在做微信分享的功能時讯柔,會做如下幾個頁面:


然后忘記分享后的顯示界面


注冊流程中的「打通斷頭路」


注冊流程中,在提示用戶號碼已注冊的結(jié)果頁上护昧,打通斷頭路魂迄,快速回到直接登錄


逆向閉環(huán)

如果有一個掃碼申請加入群聊的功能需求,方案如下:


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)植阴?
哪些使用了嵌套模式?

語句簡單但意義明確

在用戶要刪除文件時圾浅,二次確認的目的是減少用戶誤操作掠手。但是,左側(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é)果滿意嗎?
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末垮耳,一起剝皮案震驚了整個濱河市颈渊,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌终佛,老刑警劉巖俊嗽,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異铃彰,居然都是意外死亡绍豁,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門豌研,熙熙樓的掌柜王于貴愁眉苦臉地迎上來妹田,“玉大人唬党,你說我怎么就攤上這事」碛叮” “怎么了驶拱?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵,是天一觀的道長晶衷。 經(jīng)常有香客問我蓝纲,道長,這世上最難降的妖魔是什么晌纫? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任税迷,我火速辦了婚禮,結(jié)果婚禮上锹漱,老公的妹妹穿的比我還像新娘箭养。我一直安慰自己,他們只是感情好哥牍,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布毕泌。 她就那樣靜靜地躺著,像睡著了一般嗅辣。 火紅的嫁衣襯著肌膚如雪撼泛。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天澡谭,我揣著相機與錄音愿题,去河邊找鬼。 笑死蛙奖,一個胖子當著我的面吹牛潘酗,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播外永,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼崎脉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了伯顶?” 一聲冷哼從身側(cè)響起囚灼,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎祭衩,沒想到半個月后灶体,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡掐暮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年蝎抽,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡樟结,死狀恐怖养交,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情瓢宦,我是刑警寧澤碎连,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站驮履,受9級特大地震影響鱼辙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜玫镐,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一倒戏、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧恐似,春花似錦杜跷、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至口四,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間秦陋,已是汗流浹背蔓彩。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留驳概,地道東北人赤嚼。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像顺又,于是被迫代替她去往敵國和親更卒。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容