用戶界面設(shè)計(jì)整理

1?用戶界面：計(jì)算機(jī)屏幕顯示界面稱為用戶界面，它是人機(jī)交互操作的主要方式，是用戶與計(jì)算機(jī)信息傳遞的媒介。用戶界面設(shè)計(jì)是屏幕產(chǎn)品的重要組成部分。2?用戶界面設(shè)計(jì)分為：結(jié)構(gòu)設(shè)計(jì)、交互設(shè)計(jì)、視覺設(shè)計(jì)。結(jié)構(gòu)設(shè)計(jì)：是界面設(shè)計(jì)的骨架，通過對(duì)用戶研究和任務(wù)分析，制定出產(chǎn)品的整體架構(gòu)，界面的結(jié)構(gòu)設(shè)計(jì)是整個(gè)界面設(shè)計(jì)中的重要環(huán)節(jié)。交互設(shè)計(jì)：用戶界面是用戶和計(jì)算機(jī)之間信息互相傳遞的媒介，包括信息的輸入和輸出。視覺設(shè)計(jì)：在結(jié)構(gòu)設(shè)計(jì)和交互設(shè)計(jì)的基礎(chǔ)上，參照目標(biāo)群體的心理模型任務(wù)達(dá)成進(jìn)行視覺設(shè)計(jì)，包括色彩、字體、頁(yè)面等。圖形用戶界面（GUI）:采用圖形方式顯示的計(jì)算機(jī)操作環(huán)境用戶接口。圖形用戶界面分為：軟件用戶界面、網(wǎng)頁(yè)用戶界面、移動(dòng)設(shè)備用戶界面。軟件用戶界面四要素（WIMP）:窗口、圖標(biāo)、菜單、鼠標(biāo)指針；窗口是包括標(biāo)題欄、菜單欄、工具欄和操作區(qū)。圖標(biāo)是具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性的圖形符號(hào)。常見的菜單欄有工具欄、下拉式、卡片式、彈出式（右鍵菜單）和級(jí)聯(lián)式菜單等。鼠標(biāo)指針形態(tài)有箭頭、十字、等待沙漏、文本輸入1等。網(wǎng)頁(yè)用戶界面分為兩個(gè)部分：網(wǎng)頁(yè)表現(xiàn)形式的設(shè)計(jì)、網(wǎng)頁(yè)界面使用性的分析。在表現(xiàn)形式方面分為：頁(yè)面設(shè)置、文字編排、圖片設(shè)置、色彩設(shè)計(jì)等。計(jì)算機(jī)用戶界面的發(fā)展：從命令用戶界面到圖形用戶界面發(fā)展未來：人性與智能、多通道交互方式共同發(fā)展、虛擬現(xiàn)實(shí)用戶分類：新手用戶、中間用戶、專家用戶交互設(shè)計(jì)之父AlanCooper總結(jié)出一條交互設(shè)計(jì)中的公理：為中間用戶設(shè)計(jì)。中間用戶的特殊性：（1）中間用戶是最穩(wěn)定的用戶群。（2沖間用戶偶爾需要幫助，但過度的幫助會(huì)影響他們的操作。（3沖間用戶希望能夠?qū)W習(xí)。新手用戶：（1）提供幫助和學(xué)習(xí)。（2）提供良好的引導(dǎo)模式。⑶提供和用戶已有知識(shí)相銜接的交互方式。專家用戶：（1）專家需要的快捷模式。（2）專家用戶會(huì)持續(xù)學(xué)習(xí)。（3）專家用戶更希望有更新更強(qiáng)大的功能。3?用戶研究方法1） 定性研究的目標(biāo)（1） 現(xiàn)有的產(chǎn)品和使用情況（2） 潛在用戶的情況（3） 產(chǎn)品中涉及的技術(shù)情況2） 定性研究的方法3） 建立人物角色模型步驟：研究準(zhǔn)備與數(shù)據(jù)收集親和圖：是把大量收集到的事實(shí)、意見或構(gòu)思等定性資料，將其相近性進(jìn)行歸納整理的一種方法。用戶角色框架優(yōu)先級(jí)排列：考慮1.使用頻率2市場(chǎng)大小3收益的潛力4競(jìng)爭(zhēng)優(yōu)勢(shì)/策略等用戶角色（這里主要是完善用戶角色）了解用戶需求的意義：（1）對(duì)于項(xiàng)目：要保證項(xiàng)目順利進(jìn)行，交互和視覺設(shè)計(jì)能夠更好地表達(dá)產(chǎn)品意圖，我們需要對(duì)產(chǎn)品有了解，不能望文生義。（2）對(duì)于產(chǎn)品：摸清產(chǎn)品的底線，抓住基礎(chǔ)需求，改善基礎(chǔ)體驗(yàn)，才能降低用戶的門檻，有利于項(xiàng)目、產(chǎn)品的可持續(xù)發(fā)展。⑶對(duì)于資源：在沒有用戶研究團(tuán)隊(duì)支援的情況下，通過快捷、便利的方法，獨(dú)立研究，產(chǎn)生結(jié)論，無疑是節(jié)約資源的最佳辦法?；ヂ?lián)網(wǎng)的本質(zhì)：信息的傳遞。信息可視化概念：研究大規(guī)模非數(shù)值型信息資源的視覺呈現(xiàn)，如軟件系統(tǒng)中眾多的文件或者一行行的程序代碼，以及利用圖形圖像方面的技術(shù)與方法，幫助人們理解數(shù)據(jù)?？茖W(xué)可視化處理的數(shù)據(jù)具有天然幾何結(jié)構(gòu)，信息可視化處理的數(shù)據(jù)更為抽象。信息可視化形式：柱狀圖、趨勢(shì)圖、流程圖、UML圖、樹狀圖。交互設(shè)計(jì)的優(yōu)劣直接影響操作結(jié)果和用戶感受。信息可視化中的交互設(shè)計(jì)包括：數(shù)字交互、人機(jī)交互。人機(jī)交互要達(dá)到兩個(gè)階段的目標(biāo)：可用性目標(biāo)、用戶體驗(yàn)?zāi)繕?biāo)。信息可視化（Information訕$限也向訕“）包含兩個(gè)過程：1）將數(shù)據(jù)轉(zhuǎn)化為視覺圖形。2）通過人機(jī)交互，用戶控制轉(zhuǎn)化過程的各個(gè)階段以獲取信息。界面隱喻：以現(xiàn)實(shí)世界上已經(jīng)存在的事物為藍(lán)本，通過對(duì)界面組織和交互方式的比擬將人們對(duì)這些事物的知識(shí)運(yùn)用到人機(jī)界面中來，從而減少用戶必需的認(rèn)知和努力。界面隱喻是指導(dǎo)用戶界面設(shè)計(jì)和實(shí)現(xiàn)的基本思想。信息可視化原則:①對(duì)原始數(shù)據(jù)進(jìn)行篩選②尋找合乎用戶心智模型的視覺呈現(xiàn)形式③信息元素的正確表示④清晰簡(jiǎn)潔的傳達(dá)信息⑤提供給用戶多種選擇1.交互設(shè)計(jì)中的問題分為：引導(dǎo)、易用、反饋、視覺化。引導(dǎo)：①操作入口明確：（1）強(qiáng)化重點(diǎn)，弱化周邊。（2）入口信息明確，易識(shí)別。⑶根據(jù)用戶定制合適的入口。②避免用戶迷路：（1）幫助用戶確定"當(dāng)前位置"【L讓用戶隨時(shí)知道自己在瀏覽什么網(wǎng)站2.網(wǎng)頁(yè)細(xì)節(jié)體現(xiàn)3.面包屑導(dǎo)航4.逃生艙模式】（2）根據(jù)用戶需求，確定導(dǎo)航機(jī)制。（3）通過壓力測(cè)試檢驗(yàn)頁(yè)面的導(dǎo)航能力。易用：1.一次點(diǎn)擊。2.減少記憶負(fù)擔(dān)。3.別讓用戶思考。4.可及性。如何減少用戶的附加工作，保證用戶的工作效率？1.保證主操作及用戶常用功能的方便展現(xiàn)。2.合適地關(guān)閉與隱藏新手培訓(xùn)工具。3.平衡好視覺裝飾元素對(duì)用戶操作的干擾。4.不要輕易打斷用戶操作流。5、改善導(dǎo)航兩種記憶負(fù)擔(dān)：1.產(chǎn)品給予用戶的記憶負(fù)擔(dān)，包括產(chǎn)品的內(nèi)容信息、操作功能等。2.用戶自己的記憶負(fù)擔(dān)，包括自己的個(gè)人信息、安全問題的答案、輸入內(nèi)容、上次操作行為、操作流程等。如何減輕用戶的記憶負(fù)擔(dān)？1.使用常用的交互方式和文案。2.保持正確的對(duì)應(yīng)關(guān)系。3.控制信息量。4.幫助用戶記憶。設(shè)計(jì)方法：1.使用形狀+色彩的信息提示。2.簡(jiǎn)化操作方式。3.容錯(cuò)和及時(shí)幫助。4.使用視覺、聽覺、觸覺等多元化的手法傳達(dá)必要的資訊。反饋：1.反饋及時(shí)，有效，友好2.適時(shí)幫助。如何做到反饋及時(shí)、有效、友好：（1汲時(shí)：立刻：讓用戶經(jīng)歷最短的等待時(shí)間；適時(shí)：在最合適的時(shí)候回應(yīng)用戶的操作。（2）有效：交互力反饋的對(duì)稱性。（3）友好：不批評(píng)用戶，不打擾用戶。視覺化：1.簡(jiǎn)潔清晰，自然易懂。2.突出重點(diǎn)，一目了然。3.標(biāo)簽明晰，有效。一致性：1.系統(tǒng)工作的方式和人的思維方式的一致（心理一致）2.同一系統(tǒng)的不同部分或不同系統(tǒng)間有相似的顯示格式（外觀一致）3.同一系統(tǒng)的不同部分或不同系統(tǒng)間有相似的操作方式（行為一致）4.交互設(shè)計(jì)的目標(biāo)是一致的（概念一致）交互設(shè)計(jì)一致性的優(yōu)點(diǎn)：1.改善了易用性和易學(xué)性2.有效降低產(chǎn)品的開發(fā)成本，保證質(zhì)量和效率。3.幫助企業(yè)樹立品牌4.提升用戶滿意度。保證設(shè)計(jì)一致性的方法：1.研究用戶的心理和使用習(xí)慣，盡量將用戶現(xiàn)實(shí)世界中已有的使用經(jīng)驗(yàn)延續(xù)到產(chǎn)品設(shè)計(jì)中。2.研究同類產(chǎn)品中用戶已經(jīng)非常有使用經(jīng)驗(yàn)的的設(shè)計(jì)，將其用到自己的產(chǎn)品中。3.同公司的一系列產(chǎn)品，需要通過規(guī)范來統(tǒng)一界面風(fēng)格，文案，信息提示，布局，操作流程等各個(gè)方面，從而實(shí)現(xiàn)一致性的設(shè)計(jì)。4.對(duì)于同一產(chǎn)品中同樣的功能模塊，一般的情況下，需保證其設(shè)計(jì)一致性。5.保證產(chǎn)品各個(gè)細(xì)節(jié)的設(shè)計(jì)有同樣的理念。什么時(shí)候適時(shí)幫助：（1）適時(shí)：1.在新用戶第一次使用某產(chǎn)品功能的時(shí)候。2.在用戶已經(jīng)出錯(cuò)或?qū)⒁鲥e(cuò)的時(shí)候。3.在用戶遇到不明白的問題的時(shí)候。⑵幫助：1.幫助信息明顯，提示方式靈活。2.及時(shí)反饋操作，防止用戶出錯(cuò)；分析錯(cuò)誤原因，給出合理建議。3.及時(shí)補(bǔ)充，信什么是"簡(jiǎn)潔自然，清晰易懂”？（1）簡(jiǎn)介清晰：使信息最簡(jiǎn)化。提倡使用最少的元素來表達(dá)最多的信息。如果信息負(fù)載，將使用戶承擔(dān)大量的信息負(fù)擔(dān)，造成信息過載，影響效率，不能幫助用戶解決問題。（2）自然易懂：使用用戶語言。用戶獲取的方式多樣，對(duì)信息的理解程度也各有不同，所以用戶平時(shí)使用和理解的表達(dá)方式去傳遞信息，更容易被用戶接受。如何達(dá)到"突出重點(diǎn)，一目了然”？（1）為掃描而設(shè)計(jì)，不是閱讀：1.盡量符合用戶習(xí)慣的設(shè)計(jì)，讓人接收陌生的東西需要付出代價(jià)，除非我們覺得這個(gè)代價(jià)是必需的。2.在頁(yè)面上最重要的東西越突出，建立清楚的視覺層次。3.可以點(diǎn)擊的地方必須突出，讓人明顯知道可以點(diǎn)擊°4.把頁(yè)面劃分成明確定義的區(qū)域。省略多余文字。（2）將功能"藏起來”。信息表述的種類與設(shè)計(jì)原則：1.頁(yè)面布局。2.交互文本：產(chǎn)品界面涉及交互操作中需要用戶理解并反饋的所有的文字。包括標(biāo)題、按鈕文字、鏈接文字，對(duì)話框提示、各種提示信息、幫助等。界面色彩：1）根據(jù)不同的產(chǎn)品使用"場(chǎng)景”，選擇其合適的顏色。如，管理界面經(jīng)常使用藍(lán)色°2）考慮顏色對(duì)用戶的心理和文化的影響。比如，黃色代表警告，綠色代表成功等。3）避免界面中同時(shí)出現(xiàn)3種以上的顏色。4）顏色的對(duì)比度明顯，如在深色的背景中使用淺色的文字。5）使用顏色指導(dǎo)用戶關(guān)注到到最重要的信息。圖像圖標(biāo)：1）表意清晰明確，有高度的概括性與指向性，讓用戶能夠快速的聯(lián)想到對(duì)應(yīng)的功能和操作。2）同類或同一緯度的信息，在形式和色彩風(fēng)格上盡量保持一致性；3）僅在突出重要信息，用戶可能產(chǎn)生理解偏差的情況下使用。避免濫用。4）盡量與交互文本結(jié)合使用。聲音：（1）表述清晰，語氣親切，不生硬，有禮貌。（2）使用符合用戶認(rèn)知習(xí)慣的聲音。（3）使用不讓用戶反感的聲音°（4）在用戶可預(yù)知的情況下發(fā)出聲音。好的交互文本的特征：1.表述的信息盡量口語化，不用或少用專業(yè)術(shù)語。2.表述語氣柔和、禮貌，避免使用被動(dòng)語態(tài)、否定句等。3.簡(jiǎn)潔清楚的表達(dá)，文字較多要適當(dāng)斷句，盡量避免左右滾屏，折行。4.對(duì)于同種操作的交互文本，操作行文字保持統(tǒng)一性。5.字體使