UI設(shè)計(jì)有哪些規(guī)范呢？

時(shí)間：2024-02-12 07:55:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2024-02-12 07:55:02 來源：網(wǎng)站運(yùn)營

UI設(shè)計(jì)有哪些規(guī)范呢？：UI 即用戶界面，用戶界面介于用戶和硬件之間，為彼此之間交互溝通而設(shè)計(jì)的，可以使用戶能夠方便有效地去操作硬件以達(dá)成雙向交互，完成所希望的工作。

在早期的 UI 設(shè)計(jì)師是與程序員聯(lián)系得非常密切的，在“網(wǎng)頁三劍客”時(shí)代，UI 設(shè)計(jì)師甚至還要求會(huì)寫代碼，因?yàn)?UI 設(shè)計(jì)師的工作就是由程序員的工作分化出來的。

這就決定了 UI 設(shè)計(jì)并非純粹是藝術(shù)化的視覺表現(xiàn)，它的背后與編程語言的呈現(xiàn)原理息息相關(guān)，有著嚴(yán)謹(jǐn)?shù)囊?guī)范和準(zhǔn)則。比如 UI 設(shè)計(jì)師必須要懂的一些平臺(tái)設(shè)計(jì)規(guī)范，他們同時(shí)考慮了開發(fā)者與設(shè)計(jì)師對工作質(zhì)量和效率的需求。

如果把用戶界面看作人機(jī)交互的媒介，我們介紹了 UI 設(shè)計(jì)的理性的一面，那么它另一頭——“用戶”，就展現(xiàn)了其感性的一面。

經(jīng)過互聯(lián)網(wǎng)行業(yè)幾十年的發(fā)展，UI 設(shè)計(jì)已經(jīng)形成了大量比較成熟的理論與設(shè)計(jì)原則，本文介紹一些現(xiàn)在比較主流的設(shè)計(jì)原則。

內(nèi)容會(huì)持續(xù)更新，希望對你有所幫助！

另外，有其他想要了解的泛互聯(lián)網(wǎng)類內(nèi)容可以評(píng)論或私信留言，感謝關(guān)注~

注：本文部分干貨知識(shí)點(diǎn)來源于知群全鏈路設(shè)計(jì)師系列課程-UI 設(shè)計(jì)部分，文末有試聽課程彩蛋~

一、以用戶為中心的設(shè)計(jì)原則

以用戶為中心的設(shè)計(jì)原則可以幫助你創(chuàng)建更完美的用戶體驗(yàn)。以用戶為中心原則，顧名思義就是要從用戶的真實(shí)需求出發(fā)，充分考慮用戶的需求，匹配用戶的期望值，為用戶提供他們完成各項(xiàng)工作所需的內(nèi)容，以用戶熟悉的方式來構(gòu)建信息和功能。

1.有用性：滿足有用性需要以目標(biāo)為導(dǎo)向的設(shè)計(jì)。

• 客戶目標(biāo) ：比如降低成本、提高利潤。
• 用戶目標(biāo)：比如提高效率、帶來娛樂、獲得訊息。
• 設(shè)計(jì)目標(biāo)：比如改變傳統(tǒng)方式、帶來不?樣的體驗(yàn)、解決某個(gè)流程的痛點(diǎn)。

2.易用性：潛意識(shí)中就能決定一件物品可能如何被使用的基礎(chǔ)性質(zhì)。

如一把剪刀的外形就足以讓你知道它們是如何使用，而 iPhone 卻不是，所以需要額外提示。

3.情感響應(yīng)：包含本能響應(yīng)、行為響應(yīng)、反思響應(yīng)。

• 本能響應(yīng)是基本的器官響應(yīng)，如看到剪刀就知道如何握住。
• 行為響應(yīng)是用戶體驗(yàn)過程中的行為的反應(yīng)，如產(chǎn)生再次購買的行為、分享的行為等等。
• 反思響應(yīng)是用戶根據(jù)自己的價(jià)值觀對產(chǎn)品做出的反應(yīng)，如玩完“紀(jì)念碑塔”之后，我們會(huì)覺得自己非常向往那樣的世界，因?yàn)槟呛臀覀儗τ谑澜缑篮玫南蛲?致的。

二、格式塔法則

格式塔理論是一個(gè)心理學(xué)名詞，旨在解釋人類的某些行為是如何產(chǎn)生的，也解釋了我們?nèi)祟惖囊曈X經(jīng)驗(yàn)如何與大腦的反應(yīng)產(chǎn)生聯(lián)系。作為 UI 設(shè)計(jì)師，其實(shí)只要理解這幾個(gè)原理的含義和使用方法，就可以對自己的設(shè)計(jì)作出指導(dǎo)和支撐了。

• 接近性法則：對象彼此接近時(shí)，他們往往認(rèn)為是一個(gè)整體；
• 相似性法則：外表相近的元素會(huì)被視為一組；
• 連續(xù)性法則：視覺傾向于感知的形式而不是分散的碎片。

三、拇指原則

人們主要用拇指來觸控，這意味著我們需要為拇指設(shè)計(jì)，而不是為點(diǎn)擊設(shè)計(jì)。屏幕上的重要元素都應(yīng)該易于觸控，而不需要他們費(fèi)力的伸長拇指，或動(dòng)用兩只手。

界面設(shè)計(jì)遵從了這樣的拇指規(guī)律，把高頻的東西放在拇指熱區(qū)：

應(yīng)用原則

1. 始終把拇指驅(qū)動(dòng)作為原則，熟悉不同的手勢、屏幕大小對應(yīng)的熱區(qū)。
2. 把高頻的東西放在拇指熱區(qū)。
3. 把破壞性的操作放在拇指盲區(qū)，提高數(shù)據(jù)被破壞的門檻。
4. 越來越需要考慮大屏手機(jī)的手指習(xí)慣和操作系統(tǒng)的影響。

四、尼爾森十大可用性原則

尼爾森十大原則由畢業(yè)于哥本哈根的人機(jī)交互學(xué)博士 Jakob Nielsen 發(fā)表，Jakob Nielsen 對人機(jī)交互有很多研究，他提出十大可用性原則，用來評(píng)價(jià)用戶體驗(yàn)的好壞，每個(gè)產(chǎn)品設(shè)計(jì)者都可以根據(jù)這十大原則進(jìn)行自查。

尼爾森通過總結(jié)分析 200 多個(gè)可用性問題，提出了尼爾森十大可用性原則，掌握了這些原則可以幫助在產(chǎn)品設(shè)計(jì)中有效提升用戶體驗(yàn)。

原則一：狀態(tài)可見原則（Visibility of system status）

系統(tǒng)應(yīng)該讓用戶時(shí)刻清楚當(dāng)前發(fā)生了什么事情，也就是快速地讓用戶了解自己處于何種狀態(tài)，對過去發(fā)生、當(dāng)前目標(biāo)、以及對未來去向有所了解，一般的方法是在合適的時(shí)間給用戶適當(dāng)?shù)姆答仯乐褂脩羰褂贸霈F(xiàn)錯(cuò)誤。

原則二：環(huán)境貼切原則（Match between system and the real world）

設(shè)計(jì)的一切表現(xiàn)和表述，盡可能貼近用戶所在的環(huán)境，將現(xiàn)實(shí)環(huán)境的操作功能巧妙地轉(zhuǎn)化為線上功能，使其貼近用戶。使用用戶能聽懂的專業(yè)術(shù)語，涉及專業(yè)化語言時(shí)要轉(zhuǎn)化成用戶熟悉的語言。

原則三：用戶可控原則（User control and freedom）

對于用戶的誤操作，提供二次確認(rèn)或者撤銷的功能，這樣可提高用戶的操作可控性。

原則四：一致性原則（Consistency and standards）

遵循統(tǒng)一的產(chǎn)品設(shè)計(jì)規(guī)范/邏輯。這里的一致性包含產(chǎn)品和跨平臺(tái)產(chǎn)品之間的一致性。

原則五：防錯(cuò)原則（Error prevention）

設(shè)置防錯(cuò)的機(jī)制，減少用戶犯錯(cuò)。在用戶選擇動(dòng)作發(fā)生之前，就要防止用戶容易混淆或者錯(cuò)誤的選擇。

原則六：易取原則（Recognition rather than recall）

減少用戶記憶負(fù)荷，在適合的時(shí)機(jī)給用戶需要獲取的信息。

原則七：靈活高效原則（Flexibility and efficiency of use）

提供靈活的操作和高效地獲取信息能力。

原則八：優(yōu)美且簡約原則（Aesthetic and minimalist design）

保留產(chǎn)品最主要的信息，如果不是優(yōu)先級(jí)最高，要盡一切可能避免去影響產(chǎn)品的簡潔和美觀。

原則九：容錯(cuò)原則（Help users recognize, diagnose, and recover from errors）

用戶在使用產(chǎn)品過程中出現(xiàn)了問題，及時(shí)準(zhǔn)確的告知用戶出現(xiàn)問題的原因。

原則十：人性化幫助原則（Help and documentation）

在用戶需要的時(shí)候提供必要的幫助說明。

當(dāng)然，在具體工作中的設(shè)計(jì)原則還有很多，以上是應(yīng)用比較廣泛的一些具備指導(dǎo)性意義的設(shè)計(jì)原則，后面結(jié)合具體的控件設(shè)計(jì)，平臺(tái)設(shè)計(jì)規(guī)范更新一些實(shí)操性比較強(qiáng)的設(shè)計(jì)原則。

---

感恩看到最后，如果有幫助，可以持續(xù)關(guān)注，后期繼續(xù)更新互聯(lián)網(wǎng)行業(yè)的設(shè)計(jì)師、產(chǎn)品經(jīng)理的學(xué)習(xí)內(nèi)容、學(xué)習(xí)方法。

昆哥在互聯(lián)網(wǎng)行業(yè)工作了 15 年，從無藝術(shù)功底到學(xué)設(shè)計(jì)專業(yè)，從交互到產(chǎn)品，從 to B 到 to C，從打工到創(chuàng)業(yè)，一路摸爬滾打，不斷從零基礎(chǔ)入門，還和很多業(yè)內(nèi)資深的朋友參與產(chǎn)品經(jīng)理課程的教研，也了解產(chǎn)品經(jīng)理的系統(tǒng)知識(shí)。

希望個(gè)人的經(jīng)驗(yàn)?zāi)芙o大家提供有價(jià)值的參考，內(nèi)容稍長，但全是干貨，還有福利。

下面是知群全鏈路設(shè)計(jì)師課程試聽申請入口。如果有同學(xué)需要系統(tǒng)的提升自己作為設(shè)計(jì)師的能力，或者想零基礎(chǔ)轉(zhuǎn)行，想深入的了解一下互聯(lián)網(wǎng)行業(yè)，可以申請一下，目前對本站的同學(xué)是免費(fèi)開放的：