2021-5-24 ui設(shè)計(jì)分享達(dá)人
一個優(yōu)秀的設(shè)計(jì)不僅要解決正確的問題，同時也是給用戶創(chuàng)造積極的情感。在過去，實(shí)體產(chǎn)品可以通過人類的五感來創(chuàng)造情感體驗(yàn)，但對于如今的數(shù)字化產(chǎn)品來說，這似乎很難達(dá)到，因?yàn)橹皇窃谄聊簧线M(jìn)行枯燥的交互來獲取服務(wù)。
所以，數(shù)字化產(chǎn)品設(shè)計(jì)師們需要更深入的理解每種類型的情感，以及創(chuàng)造它們的心理學(xué)原則。
根據(jù)唐.諾曼（Don Norman）的研究，人們對一個物體產(chǎn)生情感有三個層次：本能、行為和反思。
本能層: “用戶想要的感覺是什么”
行為層: “用戶想要做什么”
反思層: “用戶想成為什么樣的人”
在第一層，用戶將通過視覺和與產(chǎn)品的交互設(shè)計(jì)中產(chǎn)生情緒。因此，這是UI設(shè)計(jì)師擅長發(fā)揮的地方。除了美學(xué)和基本的平面設(shè)計(jì)原則外，下面是我在工作中經(jīng)常應(yīng)用到設(shè)計(jì)中的心理學(xué)原則。
人類的眼睛傾向于將相似的元素連接成一個組，而大腦會認(rèn)為這些元素都有相同的目的。
因此，在設(shè)計(jì)具有相同功能和內(nèi)容的界面元素時，就應(yīng)該要保持一致性。（彩云注：這也是為什么要保持一致性的理論解釋）
應(yīng)用場景: 導(dǎo)航、控件、卡片、banner、內(nèi)容、分頁
人眼會將連續(xù)的元素視為一組。這一定律與對稱性和相似性非常相關(guān)，通過在一個序列上設(shè)計(jì)相似和重復(fù)的元素，我們可以將用戶的視線引導(dǎo)到我們想要的方向，它能使得閱讀信息更加連貫和清晰。
一點(diǎn)點(diǎn)的切割是在暗示用戶，這里還有更多的內(nèi)容等待你去查看。
應(yīng)用場景: 菜單、列表、排序、輪播、服務(wù)進(jìn)度
當(dāng)看到一幅不完整的圖像時，大腦會依賴之前的經(jīng)驗(yàn)進(jìn)行填充。
這是圖形和logo設(shè)計(jì)中常用的規(guī)則，但是在產(chǎn)品設(shè)計(jì)中，我們也經(jīng)常把它用在圖標(biāo)和Loading設(shè)計(jì)中。
應(yīng)用: 圖標(biāo)、loading、數(shù)據(jù)可視化
這是UI設(shè)計(jì)中的一個基本規(guī)則，因?yàn)槿搜蹠⑷魏蜗噜徳匾暈橐粋€組。
在設(shè)計(jì)的時候，我非常注重使用間距來將元素組合在一起。我通常使用大空間來分隔大內(nèi)容組，然后使用小空間來分隔大內(nèi)容組中的小內(nèi)容組。
應(yīng)用場景: 導(dǎo)航、控件、卡片、banner、內(nèi)容、分頁
我們的大腦喜歡看到對稱和平衡的東西。它是所有設(shè)計(jì)領(lǐng)域中使用最頻繁、最安全的法則。它幫助我們創(chuàng)造一種穩(wěn)定和秩序的感覺。
當(dāng)設(shè)計(jì)需要簡單和諧可視化的產(chǎn)品時，我經(jīng)常使用對稱律。當(dāng)用戶需要關(guān)注重要的事情時，它也能讓他們感到更舒服。缺點(diǎn)是，如果過度使用，產(chǎn)品會變得乏味和單調(diào)。通常，我用標(biāo)題或CTA按鈕來更好地強(qiáng)調(diào)和號召行動，打破畫面的單調(diào)格局。（彩云注：CTA是call to action的縮寫，中文通常翻譯為行為號召?？梢岳斫鉃橐龑?dǎo)用戶點(diǎn)擊的行為都算是行為號召）
應(yīng)用場景:控件，banner，強(qiáng)調(diào)內(nèi)容，產(chǎn)品顯示，清單，導(dǎo)航。
這個定律是關(guān)于人眼傾向于注意脫離背景或組合的事物。
我使用這個規(guī)則引導(dǎo)用戶的眼睛看到重要信息。它通常是一個卡片設(shè)計(jì)與一個輕投影在背景之上的層。此外，構(gòu)建整體也是應(yīng)用這一規(guī)則的一種方式。
應(yīng)用場景：卡片、內(nèi)容、列表、服務(wù)、摘要
在同一方向上移動的元素被認(rèn)為比固定的元素或在另一個方向上移動的元素更相關(guān)。這個規(guī)則應(yīng)用幫助我們建立組和狀態(tài)之間的關(guān)系。
在制作動畫時，我經(jīng)常更明確地使用這個規(guī)則。然而，我們?nèi)匀豢梢赃m用于許多不同的因素。
應(yīng)用場景：導(dǎo)航/下拉菜單，折疊，手風(fēng)琴，工具提示，產(chǎn)品滑塊，視差滾動和指示器。
當(dāng)我們看東西時，我們的眼睛傾向于首先關(guān)注最突出的元素。理解這種行為將幫助我們在設(shè)計(jì)中創(chuàng)建一個“錨點(diǎn)”，從而推動用戶查看我們的場景之后的內(nèi)容。
應(yīng)用場景:內(nèi)容、落地頁、價格、產(chǎn)品頁、banner
（彩云注：維基百科解釋為指個人對學(xué)習(xí)材料或所見所聞的資訊，容易記住最特殊的部分的現(xiàn)象。例如：有一些參考書將重要的資料，以不同顏色或特殊的字體標(biāo)示出來，就是利用雷斯多夫效應(yīng)來加深讀者的印象。）
這也被稱為隔離效應(yīng)，它表明人們傾向于注意并記住與其他部分不同的部分。這條規(guī)則很容易與焦點(diǎn)定律混淆。不同的是，應(yīng)用此規(guī)則的元素通常是獨(dú)立的，沒有為用戶導(dǎo)航更多信息的額外功能。
應(yīng)用場景：定價表、促銷banner、不同會員介紹
基于現(xiàn)實(shí)世界打造的視覺體驗(yàn)。比如，當(dāng)我們看一個視頻，每個高潮笑話時都有旁白跟著一起笑時，我們會更容易發(fā)笑（彩云注：想想《快樂大本營》）。用戶會喜歡我們的設(shè)計(jì)，如果它讓他們感覺良好和舒適。
（彩云注：這個理論的意思是說盡可能讓用戶產(chǎn)生沉浸感，把產(chǎn)品用到真實(shí)的環(huán)境上，比如大家平時使用的手機(jī)樣機(jī)，把設(shè)計(jì)的界面放到這些樣機(jī)中就能夠給人直觀的感受到應(yīng)用后的效果，也是這個理論的運(yùn)用）。
應(yīng)用場景：產(chǎn)品配圖、插圖、攝影
有很多研究表明顏色對我們的潛意識有特別的影響。對顏色的看法也因性別、宗教和文化而異。這張彩色心理學(xué)海報(bào)就足夠了（彩云注：感興趣的可以自行翻譯研究下）。
此外，我們不要忘記從早期到現(xiàn)在一直在廣泛使用的顏色，這些顏色的使用更符合用戶習(xí)慣：
紅色：錯誤
綠色：成功
藍(lán)色：進(jìn)行中
黃色：警告
就像顏色一樣，人類的潛意識對不同的形狀也有不同的反應(yīng)。例如:
圓形、橢圓形：傳遞積極的信息，通常與社區(qū)或關(guān)系有關(guān)。
方形和三角形：帶有強(qiáng)烈的信息，通常與力量和穩(wěn)定聯(lián)系在一起。
豎線：代表強(qiáng)度、力量或攻擊性。
橫線：表示平靜、相等、安靜。
這一理論解釋了人類需要視覺和語言信息來盡可能快地處理信息。此外，人類是視覺動物，我們的大腦處理圖像的速度是處理文本的6萬倍。為了最大化設(shè)計(jì)的有效性，我們不應(yīng)該去掉解釋性的文字。
（彩云注：根據(jù)這個理論，在做作品集時，就應(yīng)該盡可能的多用視覺化語言，文字作為輔助，對于視覺設(shè)計(jì)師來說，能用圖表達(dá)的就盡量減少文字的比重。）
一個很明顯的例子就是導(dǎo)航欄。大多數(shù)新的應(yīng)用或具有復(fù)雜功能的應(yīng)用都同時設(shè)計(jì)了圖標(biāo)和文字標(biāo)簽。
人類的眼睛傾向于看到平行因素比其他因素更相關(guān)。我經(jīng)常使用這一原則對同一屏幕內(nèi)的兩組不同內(nèi)容進(jìn)行分類。最容易看到的例子可能是Facebook messenger界面，當(dāng)帖子并排排列時，消息是平行的。
這一原則類似于格式塔原則中的相似定律，但它并不是完全相似。共同區(qū)域原則是通過我們使用分隔線、形狀或顏色的方式創(chuàng)建的。
如果一個界面需要用戶滾動更多來查看內(nèi)容，我們應(yīng)該有一些方法來更清楚地劃分它，而不僅僅是使用間距。
應(yīng)用場景：列表清單、信息流
根據(jù)NNGroup UXPin等組織或團(tuán)體的各種研究，兩種最常用的掃描模式是“F”和“Z”。
F的使用最為廣泛，尤其是對于內(nèi)容量大的網(wǎng)站。
Z用于不太注重文本的網(wǎng)站，通常強(qiáng)調(diào)在最后的號召行動。
一旦我們理解了如何使用這些模式，我們就可以選擇布局并有效地安排元素來實(shí)現(xiàn)我們的設(shè)計(jì)目標(biāo)。
第一印象是最令人難忘的，積極的體驗(yàn)可以在用戶和產(chǎn)品之間創(chuàng)造持久的關(guān)系。如果能讓用戶在一開始就喜歡上我們的設(shè)計(jì)，就能為我們的產(chǎn)品創(chuàng)造了一個很好的優(yōu)勢。
（彩云注：這些都是非?；A(chǔ)的理論，但基礎(chǔ)的厚度才是決定后期發(fā)展高度，我現(xiàn)在越來越能體會到這一點(diǎn)了，也希望大家能重視并加強(qiáng)基礎(chǔ)的學(xué)習(xí)。）
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：彩云Sky
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com