中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

對比（Contrast）

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

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

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

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

如圖1-1

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

那么我們應(yīng)該如去適當(dāng)運(yùn)用對比，讓體驗(yàn)更加優(yōu)秀呢？我們再來看看圖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)”。

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

如圖1-2

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

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

如圖1-3

如圖1-4

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

重復(fù)（Repetition）

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

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

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

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

如圖2-1

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

如圖2-2

除了上述案例提到的文字元素的重復(fù)原則，我們還能重復(fù)其他的設(shè)計(jì)元素來讓我們的界面保持“一致性”，如圖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ì)上，我們除了可以對單張頁面上的設(shè)計(jì)元素使用重復(fù)原則，也可以使用在多張頁面上，讓他們連在一起，從而達(dá)到增強(qiáng)整個(gè)作品的統(tǒng)一性。但使用重復(fù)原則時(shí)必須要有個(gè)控制的范圍，不然過多對某種元素重復(fù)使用，會(huì)使得頁面整體缺少對比性，反而讓頁面在感覺上會(huì)不舒服。

對齊（Alignment）

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

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

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

如圖3-1

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

如圖3-2

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

如圖3-3

如圖3-4

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

親密性（Proximity）

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

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

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

我們來看看以下這個(gè)例子，如圖4-1顯示，大家能快速的辨別出“在線客服”對應(yīng)的是哪個(gè)圖標(biāo)呢？相信很多用戶都會(huì)錯(cuò)誤的把“重新注冊”的圖標(biāo)當(dāng)成了“在線客服”，因?yàn)檫@個(gè)頁面原本相關(guān)聯(lián)系的元素并沒有被靠近的移動(dòng)在一起，這樣一來他們之間的聯(lián)系就直接被斷開了，而并無關(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)系層級一下子就清晰了，用戶也能很輕松的快速辨別相對應(yīng)的圖標(biāo)是哪一個(gè)，這就是我們應(yīng)該需要注意的親密性原則。

如圖4-1

如圖4-2

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

如圖4-3

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

如圖4-4

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

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

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

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