国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

為何一個(gè)設(shè)計(jì)的細(xì)節(jié)點(diǎn)會(huì)使人在感覺(jué)上的差異那么大呢？為什么優(yōu)秀的作品都叫做“別人的設(shè)計(jì)”？本文將為告訴你問(wèn)題的答案。

很多時(shí)候總會(huì)常常覺(jué)得，為什么自己做的界面看起來(lái)總是沒(méi)有別人的漂亮，為什么同樣的風(fēng)格設(shè)計(jì)，同樣差不多的設(shè)計(jì)時(shí)間，同樣的設(shè)計(jì)軟件，但出來(lái)的效果總是比別人差一點(diǎn)？到底是哪里出了問(wèn)題？

這種問(wèn)題往往會(huì)在一些剛?cè)胄械脑O(shè)計(jì)師身上出現(xiàn)（當(dāng)然也有一些工作數(shù)年的設(shè)計(jì)師），其實(shí)出現(xiàn)這些問(wèn)題并不是因?yàn)槟愕哪芰μ罨蛘哒f(shuō)什么審美出現(xiàn)問(wèn)題，很大的原因就在于你沒(méi)有關(guān)注設(shè)計(jì)細(xì)節(jié)！

那么什么是設(shè)計(jì)細(xì)節(jié)，設(shè)計(jì)細(xì)節(jié)又包括什么？為什么說(shuō)設(shè)計(jì)上的細(xì)節(jié)會(huì)讓我們之間的設(shè)計(jì)效果看上去會(huì)有明顯的差異呢？接下來(lái)讓我們一同來(lái)探討一下。

說(shuō)到設(shè)計(jì)細(xì)節(jié)，我這里借用一下來(lái)自Robin Williams編寫的《寫給大家看的設(shè)計(jì)書》上所提到的“4大基本原則”，這“4大基本原則”包含了我認(rèn)為在設(shè)計(jì)細(xì)節(jié)上最關(guān)鍵的四個(gè)部分：對(duì)比（Contrast）、重復(fù)（Repetition）、對(duì)齊（Alignment）、親密性（Proximity）。

幾乎每一個(gè)優(yōu)秀的設(shè)計(jì)都一定會(huì)包含這“4大基本原則”，那么我們應(yīng)該如何在設(shè)計(jì)上去運(yùn)用這些原則，去幫助我們提升設(shè)計(jì)的質(zhì)量，接下來(lái)我們結(jié)合實(shí)際項(xiàng)目去逐一的分析。

對(duì)比（Contrast）

什么是對(duì)比呢？相信很多設(shè)計(jì)師馬上會(huì)想到關(guān)于設(shè)計(jì)界面上的字體大小、顏色深淺、圖形大小、線條寬細(xì)等等這些元素的比較。而這些不同元素的比較就是在界面上建立一種有組織的層次結(jié)構(gòu)，讓界面上的元素避免太過(guò)相似，從而達(dá)到吸引眼球的效果，這就是對(duì)比。

當(dāng)然，對(duì)比不單單只是用作在界面上吸引用戶的眼球。他還是設(shè)計(jì)細(xì)節(jié)上非常重要的一步環(huán)節(jié)，適當(dāng)?shù)倪\(yùn)用對(duì)比，可以讓設(shè)計(jì)界面上的不同層級(jí)更加清晰，通過(guò)元素對(duì)比在頁(yè)面上指引讀者，并且制造焦點(diǎn)。

讓我們來(lái)看看下面這個(gè)視覺(jué)案例，對(duì)比對(duì)于界面的細(xì)節(jié)提升有多到的幫助。

如圖1-1上所顯示，上面的“關(guān)注話題”按鈕的各種狀態(tài)，你能分辨得出都什么樣的狀態(tài)嗎？

如圖1-1

很明顯上面的“關(guān)注話題”按鈕的狀態(tài)樣式都是一樣的，按鈕元素樣式設(shè)計(jì)上并沒(méi)有建立一種層次結(jié)構(gòu)，導(dǎo)致用戶無(wú)法快速通過(guò)當(dāng)前樣式快速判斷當(dāng)前到底是一種怎么樣的狀態(tài)。另外“關(guān)注話題”與“已關(guān)注”的樣式設(shè)計(jì)上也過(guò)于相似，這樣也會(huì)明顯降低用戶對(duì)于按鈕狀態(tài)切換的感知，不利于用戶的體驗(yàn)感受。

那么我們應(yīng)該如去適當(dāng)運(yùn)用對(duì)比，讓體驗(yàn)更加優(yōu)秀呢？我們?cè)賮?lái)看看圖1-2所顯示，同樣還是“關(guān)注話題”的按鈕狀態(tài)切換，這次你應(yīng)該能快速分辨出按鈕的當(dāng)前狀態(tài)含義。從左到右分別是“未關(guān)注狀態(tài)、鼠標(biāo)選中狀態(tài)，鼠標(biāo)點(diǎn)擊狀態(tài)、已選中狀態(tài)”。

我們這次通過(guò)讓按鈕在不同狀態(tài)下，通過(guò)按鈕填充的顏色，文字的顏色，描邊的顏色等元素的比較，達(dá)到區(qū)分不同按鈕狀態(tài)的目的，讓用戶可以快速通過(guò)當(dāng)前元素對(duì)比辨別出當(dāng)前的按鈕狀態(tài)，提升按鈕之間的交互體驗(yàn)，這就是我們通常所講的設(shè)計(jì)細(xì)節(jié)中的對(duì)比關(guān)系。

如圖1-2

我們?cè)賮?lái)看下一個(gè)例子，如圖1-3這是金蝶云社區(qū)的一條回答卡片，卡片里包含了回答者姓名、職位、贊同次數(shù)、回答內(nèi)容、編輯日期。雖然說(shuō)信息的組織上沒(méi)有問(wèn)題，但是卻不利于用戶通過(guò)快速瀏覽卡片獲取相關(guān)信息。這是因?yàn)榭ㄆ显O(shè)計(jì)的信息缺少對(duì)比，他們所用的字體和顏色幾乎一樣，這樣所有的信息層級(jí)都會(huì)粘在一起，不利于區(qū)分。

我們?cè)賮?lái)對(duì)比一下圖1-4，明顯信息展示上都有了醒目的對(duì)比，根據(jù)信息不同的層級(jí)，改變其字體的大小和顏色，有助于突出對(duì)比效果，用戶瀏覽時(shí)也可以更快通過(guò)字體的對(duì)比變化，快速獲取需要的信息。所以運(yùn)用對(duì)比可以讓卡片信息更加清晰，表達(dá)更加清楚。

如圖1-3

如圖1-4

當(dāng)然對(duì)比在設(shè)計(jì)上的運(yùn)用除了上面提到的兩種案例之外，還有更多的方式，包括形狀、顏色、大小、空間等。但無(wú)論是哪種方式，最終的目的都是為了讓設(shè)計(jì)上的信息層級(jí)更加利于用戶理解，讓信息有更強(qiáng)的可讀性，也讓界面有更強(qiáng)的對(duì)比性。

重復(fù)（Repetition）

看到標(biāo)題，相信很多設(shè)計(jì)師都會(huì)覺(jué)得好奇，重復(fù)是什么意思？難道是要重復(fù)使用同一種元素設(shè)計(jì)？我們來(lái)看看《寫給大家看的設(shè)計(jì)書》上Robin對(duì)于重復(fù)原則的說(shuō)明：設(shè)計(jì)的某些方面需要在整個(gè)作品中重復(fù)。重復(fù)元素可以是一種字體、一條粗線、某個(gè)項(xiàng)目符號(hào)、顏色、設(shè)計(jì)要素、某種格式、空間關(guān)系等。用戶能看到的任何方面都可以作為重復(fù)元素。

看到這里，我們大概可以理解為重復(fù)指的是界面設(shè)計(jì)上的“一致性”。此“一致性”可以讓界面上不同的信息元素通過(guò)視覺(jué)表現(xiàn)成為一體，保證了設(shè)計(jì)樣式的統(tǒng)一，也同時(shí)加強(qiáng)了用戶瀏覽時(shí)的記憶。當(dāng)然不是所有的元素都能隨便重復(fù)使用，我們需要讓這些元素建立一種連續(xù)性，讓他們?cè)诮缑嫔细褚蝗赫w。

接下來(lái)我們還是通過(guò)兩個(gè)案例來(lái)進(jìn)一步分析探索重復(fù)在于界面設(shè)計(jì)上的運(yùn)用方式。

我們先來(lái)看第一個(gè)案例，如圖2-1顯示，案例設(shè)計(jì)為金蝶云社區(qū)中的提問(wèn)卡片，雖然這三張卡片都為同一類型卡片并且信息展示層級(jí)也相同，但是從視覺(jué)上明顯的會(huì)讓用戶覺(jué)得這三張卡片并不統(tǒng)一，原因出在哪里？其實(shí)就出現(xiàn)在三張卡片并沒(méi)有保持界面設(shè)計(jì)上的“一致性”，如“提問(wèn)作者“以及”提問(wèn)內(nèi)容“。字體的大小以及字體的粗細(xì)都各不相同，所以這三張卡片同為提問(wèn)卡片，但是里面的元素并沒(méi)有建立一種連續(xù)性，那么用戶就無(wú)法感受到卡片的一致性。

如圖2-1

所以為了保證卡片視覺(jué)上的“一致性”，我們必須要讓卡片的信息元素重復(fù)，例如圖2-2所顯示，這次明顯可以感受到卡片在設(shè)計(jì)上的統(tǒng)一性，原因就在于每張卡片里相對(duì)應(yīng)的元素設(shè)計(jì)樣式都是重復(fù)相同的。從設(shè)計(jì)上來(lái)說(shuō)，重復(fù)的元素設(shè)計(jì)可以保持界面上的“一致性”，從而幫助用戶在瀏覽時(shí)快速分辨相同模塊內(nèi)容，增強(qiáng)閱讀簡(jiǎn)易性。

如圖2-2

除了上述案例提到的文字元素的重復(fù)原則，我們還能重復(fù)其他的設(shè)計(jì)元素來(lái)讓我們的界面保持“一致性”，如圖2-3，除了文字元素設(shè)計(jì)樣式的重復(fù)使用，還包括了按鈕元素的設(shè)計(jì)、標(biāo)題與內(nèi)容分割線的元素設(shè)計(jì)，以及插畫元素的風(fēng)格設(shè)計(jì)。其實(shí)這些元素的重復(fù)都讓我們的界面設(shè)計(jì)更加統(tǒng)一。

如圖2-3

在設(shè)計(jì)上，我們除了可以對(duì)單張頁(yè)面上的設(shè)計(jì)元素使用重復(fù)原則，也可以使用在多張頁(yè)面上，讓他們連在一起，從而達(dá)到增強(qiáng)整個(gè)作品的統(tǒng)一性。但使用重復(fù)原則時(shí)必須要有個(gè)控制的范圍，不然過(guò)多對(duì)某種元素重復(fù)使用，會(huì)使得頁(yè)面整體缺少對(duì)比性，反而讓頁(yè)面在感覺(jué)上會(huì)不舒服。

對(duì)齊（Alignment）

說(shuō)到對(duì)齊相信很多設(shè)計(jì)師都不會(huì)陌生，因?yàn)樗闶俏覀冊(cè)O(shè)計(jì)里面最基礎(chǔ)的原則了，但往往也是我們剛?cè)胄械脑O(shè)計(jì)師們最用容易出問(wèn)題的地方，尤其是在頁(yè)面空間設(shè)計(jì)的把控上，很多設(shè)計(jì)師在設(shè)計(jì)一個(gè)界面時(shí)，往往只會(huì)考慮把需要展示的文字、圖片、圖標(biāo)等元素網(wǎng)上一堆就完事了，完全沒(méi)有考慮頁(yè)面空間上的排版布局，從而給人一種雜亂無(wú)章的感覺(jué)，這也是往往出現(xiàn)最多的問(wèn)題。因?yàn)楹芏嘣O(shè)計(jì)師在做設(shè)計(jì)的時(shí)候根本沒(méi)有思考，只會(huì)追尋美感來(lái)做，這樣連基本設(shè)計(jì)原則都沒(méi)有的界面，只能說(shuō)是一種畫，而不是設(shè)計(jì)。

我們?cè)俅谓栌谩秾懡o大家看的設(shè)計(jì)書》上Robin對(duì)于對(duì)齊原則的說(shuō)明：任何元素都不能在頁(yè)面上隨意安放。每一項(xiàng)都應(yīng)當(dāng)與頁(yè)面上的某個(gè)內(nèi)容存在某種視覺(jué)聯(lián)系，對(duì)齊原則要求特別小心，再不能像從前那樣，只要頁(yè)面上剛好有空間就把元素隨意“扔”到那里。

讓我們來(lái)看看如圖3-1的這個(gè)案例，這是一篇社區(qū)上的話題文章，我們可以出設(shè)計(jì)師在對(duì)文章排版的時(shí)候，直接就把文章里所有的內(nèi)容已居中的格式來(lái)展現(xiàn)，這種局中的排版格式第一眼給人一種很業(yè)余的水平，而且整體的空間感會(huì)顯得比較凌亂，無(wú)法突出重要信息。

如圖3-1

讓我們來(lái)試試讓整篇文章采取左對(duì)齊試試，如圖3-2顯示，明顯感覺(jué)到文章空間排版更加的整齊，尤其對(duì)文章中標(biāo)題、作者、內(nèi)容有更好的層級(jí)表現(xiàn)關(guān)系，才能突出你想要用戶第一眼想注重到的信息。所以我們?cè)谠O(shè)計(jì)這類型的文章排版時(shí)，盡量讓內(nèi)容元素對(duì)齊排版，這樣頁(yè)面統(tǒng)一而且有條理。

如圖3-2

除了上面所述關(guān)于界面整體的元素對(duì)齊原則，還有一種情況，是我們新手設(shè)計(jì)師常常容易發(fā)生的，就是細(xì)節(jié)上的對(duì)齊。我們來(lái)看看如圖3-3顯示，乍一看上去好像沒(méi)什么問(wèn)題，但仔細(xì)一看就能發(fā)現(xiàn)里面標(biāo)題與數(shù)字并沒(méi)有對(duì)齊，這就使得卡片看上并沒(méi)那么精致，也是新手經(jīng)常會(huì)出現(xiàn)的問(wèn)題，給到用戶一種非常不用心設(shè)計(jì)的感受。但其實(shí)要解決也是非常簡(jiǎn)單，只要我們把標(biāo)題和數(shù)字居中對(duì)齊再看看，如圖3-4，是不是立馬讓卡片精致了許多，內(nèi)容更加的工整，馬上跟圖3-3拉開(kāi)了檔次，這就是為什么你的設(shè)計(jì)總是別人差那么一點(diǎn)，原因其實(shí)非常簡(jiǎn)單，細(xì)節(jié)決定一切。

如圖3-3

如圖3-4

無(wú)論是整體的元素對(duì)齊還是細(xì)節(jié)上的對(duì)齊，只要運(yùn)用得當(dāng)都能讓你的界面質(zhì)量提升一個(gè)檔次，對(duì)齊的根本目的就是使頁(yè)面統(tǒng)一而且有條理，所以，請(qǐng)牢記對(duì)齊原則，一定能讓你的界面更加的精美。當(dāng)然我們也要注意，對(duì)齊盡可能的保持統(tǒng)一，不要一個(gè)左對(duì)齊，一個(gè)右對(duì)齊，反而得不償失。

親密性（Proximity）

最后就是我們的親密性原則，關(guān)于親密性相信很多設(shè)計(jì)師在剛開(kāi)始學(xué)設(shè)計(jì)的時(shí)候都會(huì)出現(xiàn)過(guò)這樣的現(xiàn)象，在設(shè)計(jì)中，整個(gè)界面被填充的滿滿的，生怕一絲的空白會(huì)讓領(lǐng)導(dǎo)覺(jué)得你沒(méi)有認(rèn)真做設(shè)計(jì)，各種元素被放的密密麻麻的，一看就知道有多親密，但，這是我們想要的親密性嗎？不是的，親密性原則不是指你把元素放的有多滿，而是指將相關(guān)有聯(lián)系的信息以及元素組織在一起，增強(qiáng)他們的關(guān)聯(lián)性。

同樣我們借用《寫給大家看的設(shè)計(jì)書》上Robin對(duì)于親密性原則的說(shuō)明：將相關(guān)的元素組織在一起，移動(dòng)這些元素，使它們的物理位置互相靠近，這樣一來(lái)，相關(guān)的項(xiàng)將被看作凝聚為一體的一個(gè)組，而不再是一堆彼此無(wú)關(guān)的片段。

所以說(shuō)親密性不是指得你的元素再見(jiàn)面上放得有多滿，而是指要把有相關(guān)聯(lián)系信息的元素靠近放在一起，讓用戶能馬上了解頁(yè)面的組織和內(nèi)容。

我們來(lái)看看以下這個(gè)例子，如圖4-1顯示，大家能快速的辨別出“在線客服”對(duì)應(yīng)的是哪個(gè)圖標(biāo)呢？相信很多用戶都會(huì)錯(cuò)誤的把“重新注冊(cè)”的圖標(biāo)當(dāng)成了“在線客服”，因?yàn)檫@個(gè)頁(yè)面原本相關(guān)聯(lián)系的元素并沒(méi)有被靠近的移動(dòng)在一起，這樣一來(lái)他們之間的聯(lián)系就直接被斷開(kāi)了，而并無(wú)關(guān)聯(lián)的元素又因?yàn)楸诲e(cuò)誤的聯(lián)系在一起，導(dǎo)致用戶直接就會(huì)理解錯(cuò)誤，所以一定要正確的使用親密性原則，把相關(guān)聯(lián)系信息的元素組合放一起，這樣用戶才會(huì)聯(lián)想他們之間的關(guān)系。例如圖4-2顯示，當(dāng)我們把相關(guān)聯(lián)系的元素信息組合放在一起后，明顯的他們的關(guān)系層級(jí)一下子就清晰了，用戶也能很輕松的快速辨別相對(duì)應(yīng)的圖標(biāo)是哪一個(gè)，這就是我們應(yīng)該需要注意的親密性原則。

如圖4-1

如圖4-2

那是不是只有相關(guān)聯(lián)系的元素組合在一起才叫親密性原則？當(dāng)然也不是，親密性不單單指的是是相關(guān)元素都要靠近，有些時(shí)候，也需要給它們一些空間。我們?cè)賮?lái)看多一個(gè)案例，如圖4-3顯示，這張“課程信息“界面，乍一看感覺(jué)整體設(shè)計(jì)并沒(méi)有太大的問(wèn)題，但總覺(jué)在設(shè)計(jì)細(xì)節(jié)上差那么一點(diǎn)感覺(jué)，尤其是“課程描述” 、“ 適用人群”和“配套課件”之間的信息過(guò)于貼近，這樣我們就無(wú)法分辨出它們之間的關(guān)系，用戶也就無(wú)法快速理解界面里面的信息內(nèi)容，其實(shí)問(wèn)題就出現(xiàn)在信息與信息之間缺少必要的空白，這樣相關(guān)聯(lián)系的信息就無(wú)法展示他們的親密性，從而沒(méi)辦法組織他們的關(guān)聯(lián)性。

如圖4-3

其實(shí)我們只需要在相關(guān)聯(lián)的信息旁給一些空白空間，如圖4-4顯示，讓真正相關(guān)聯(lián)的信息組合在一起，形成一段一段的組合，讓有聯(lián)系的信息具有更近的親密性，這樣我們就很很輕松直觀的分辨出界面每一段的信息內(nèi)容了，視覺(jué)上也更加的美觀。

如圖4-4

親密性的根本目的是實(shí)現(xiàn)組織性，所以我們?cè)诮缑嬖O(shè)計(jì)時(shí)要靈活運(yùn)用親密性原則，組合關(guān)聯(lián)信息這樣信息才更有條理性和組織性，用戶瀏覽界面時(shí)才更容易讀區(qū)信息也更容易理解。

相信看到這里，各位應(yīng)該能明白為什么你的設(shè)計(jì)總是比別人差那么一點(diǎn)，原因就在于你自己對(duì)于設(shè)計(jì)細(xì)節(jié)的追求，而對(duì)于剛?cè)胄胁痪玫脑O(shè)計(jì)新手，非常建議閱讀來(lái)自Robin Williams編寫的《寫給大家看的設(shè)計(jì)書》，尤其對(duì)于“4大基本原則”會(huì)有更詳細(xì)的解說(shuō)，最后希望大家能夠更多的關(guān)注設(shè)計(jì)細(xì)節(jié)，提升升級(jí)能力。

本文由 @DC群 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議