《UI設(shè)計(jì)規(guī)范》偏視覺(jué)

1、執(zhí)規(guī)范表現(xiàn)規(guī)范規(guī)范是指明文規(guī)定或約定俗成的標(biāo)準(zhǔn)，具有明晰性和合理性。 引言設(shè)計(jì)中處理視覺(jué)元素的基本原則對(duì)比重復(fù)對(duì)齊親密中文字體的處理方法 理解 分類 粗排 精排與校對(duì)好的，重新設(shè)計(jì)總結(jié) 設(shè)計(jì)中處理視覺(jué)元素的基本原則 親密 重復(fù) 對(duì)齊 對(duì)比引言關(guān)于這張卡片，你的想法是？親密將相關(guān)的項(xiàng)組織在一起，移動(dòng)這些項(xiàng)，使它們的物理位置相互靠近，這樣一來(lái)，相關(guān)的項(xiàng)將被看作凝聚為一體的一個(gè)組，而不再是一堆彼此無(wú)關(guān)的片段。在一個(gè)頁(yè)面上，物理位置的接近就意味存在著關(guān)聯(lián)。 Ps.不要在元素之前留出同樣大小的空白，除非各組同屬于一個(gè)子集，不同屬一組的元素之間不要建立關(guān)系！如果元素彼此無(wú) 關(guān)，要把它們分開(kāi)！對(duì)齊任何元素都

2、不能在頁(yè)面上隨意安放。每一項(xiàng)都應(yīng)當(dāng)在頁(yè)面上的某個(gè)內(nèi)容存在某種視覺(jué)聯(lián)系。找一條明確的線，并用它來(lái)對(duì)齊，讓頁(yè)面統(tǒng)一而有條理。 Ps.避免在一個(gè)頁(yè)面上混合使用多種文本對(duì)齊方式，并且著力避免居中對(duì)齊，除非你需要一種比較正式、穩(wěn)重的表達(dá)方式。重復(fù)這組圖片重復(fù)了哪些元素呢？ 中文字體的處理方法那么對(duì)于漢字，究竟應(yīng)該以一種什么樣的原則和原理來(lái)進(jìn)行編排才能使字、句、段、篇看起來(lái)美觀清晰呢？我在實(shí)踐中，有一些經(jīng)驗(yàn)可以拿出來(lái)與大家商討，在進(jìn)行漢字編排時(shí)我一般遵循的流程是： 理解分類粗排精確細(xì)排校對(duì)理解對(duì)比如果兩個(gè)元素不同，就會(huì)產(chǎn)生對(duì)比。倘若兩個(gè)元素存在某種不同，但差別并不是很大，那么你做出的效果并不是對(duì)比，而是沖

3、突。如果兩個(gè)項(xiàng)完全不相同，就應(yīng)當(dāng)使之不同，而且應(yīng)當(dāng)是截然不同。 Ps.對(duì)比的第一個(gè)目的是增強(qiáng)頁(yè)面的效果，如果一個(gè)頁(yè)面看上去很美觀，也更有可讀性，另一個(gè)目的有助于信息的組織，能讓讀者第一眼就看到被強(qiáng)調(diào)的重點(diǎn)。如果你想要形成對(duì)比，就要加大力度，讓它們看上去截然不同！要想實(shí)現(xiàn)有效的對(duì)比，對(duì)比就必須強(qiáng)烈，千萬(wàn)不要畏畏縮縮！在進(jìn)行文字的編排之前，首先要理解文字的內(nèi)容。我見(jiàn)過(guò)很多設(shè)計(jì)師只注重版式美現(xiàn)而不關(guān)注文字內(nèi)容，把文字一拿到手就開(kāi)始編排，從不考慮文字在說(shuō)什么，他們的原則是文字一定要服從于版式需要。這是不正確的設(shè)計(jì)方法，必竟文字才我們真正要傳達(dá)的信息！對(duì)于一篇文案稿，如果我們不去理解它的表述內(nèi)容，就很容

4、易本末倒置。 理解分類也就是把我們理解的文字段分成幾個(gè)層級(jí)，并為其分配相應(yīng)的占用空間和大致的視覺(jué)位置。誰(shuí)是主標(biāo)題，誰(shuí)是廣告詞，誰(shuí)是副標(biāo)題，誰(shuí)是內(nèi)容，把這些問(wèn)題搞清楚了，我們就可以為把這些文字分類成幾個(gè)層級(jí)。 分類第一級(jí) 最重要和最突出的（主標(biāo)題、利益點(diǎn)等）第三級(jí) 最次要的（補(bǔ)充說(shuō)明的文字，注釋，序列號(hào)等）第二級(jí) 是對(duì)第一級(jí)的輔助說(shuō)明或者是次于第一級(jí)的（補(bǔ)充說(shuō)明的文字及次級(jí)利益點(diǎn)）每個(gè)元素都一定要有相對(duì)獨(dú)立的空間，要讓它看起來(lái)本來(lái)就應(yīng)該在那兒，那塊空間本來(lái)就是為它而留下的，而不是讓人感覺(jué)是沒(méi)有地方放了硬塞在那兒的。 經(jīng)歷了前面的過(guò)程，設(shè)計(jì)師心中應(yīng)該已經(jīng)有了一個(gè)初步的構(gòu)想，粗排的過(guò)程就是把這些構(gòu)想

5、視覺(jué)化，以形成一個(gè)基本的編排風(fēng)格 粗排 內(nèi)容文字一種就是把整個(gè)篇幅平均分成幾個(gè)相同容量的段塊，另一種就是根據(jù)文本內(nèi)容的結(jié)構(gòu)，以自然段為基礎(chǔ)進(jìn)行分欄（15-25個(gè)字的欄寬視覺(jué)效果相對(duì)舒適）字體的設(shè)置真正經(jīng)得起推敲的幾種字體是：宋體（標(biāo)宋、書(shū)宋、大宋、中宋、仿宋、細(xì)仿宋）、黑體（中黑、平黑、細(xì)黑、大黑）、楷體（中楷、大楷、特楷）、等線體（中等線、細(xì)等線）、圓黑體（中圓、細(xì)圓、特圓），這些字體是一些標(biāo)準(zhǔn)的基礎(chǔ)字體，雖然普通卻很耐看。 常用的幾種搭配字體a.微軟雅黑+方正中等線b.方正報(bào)宋簡(jiǎn)+方正蘭亭黑c.方正楷體簡(jiǎn)+方正報(bào)宋 字號(hào)大小的確定1. 各個(gè)層級(jí)元素之間的對(duì)比關(guān)系，a應(yīng)該比b大多少，c應(yīng)該比

6、b小多少，應(yīng)該要把各個(gè)層級(jí)之間的輕重關(guān)系體現(xiàn)出來(lái)。2.版面整體比例關(guān)系，也就是讓文字突出但不唐突，弱化但要可見(jiàn)。以952x200的banner為例(字體為微軟雅黑)：標(biāo)題文字： 44-46px副標(biāo)題：18-20px說(shuō)明文字：12-14px字距和行距的再設(shè)計(jì)字距：楷體字距小，黑宋字距大行距：一般在字高的50%以上（14px 20px;12px 18px）對(duì)齊永遠(yuǎn)都要記住，對(duì)齊！對(duì)齊！對(duì)齊！就要大功告成了，可以再拉拉輔助線看看是不是有些地方?jīng)]有對(duì)齊，有沒(méi)有錯(cuò)別字等，也可以站遠(yuǎn)看看整體的效果，氣口留得夠不夠，是否符合人們的視覺(jué)流程走向。 細(xì)排與校對(duì) 內(nèi)容文字一種就是把整個(gè)篇幅平均分成幾個(gè)相同容量的段塊，另一種就是根據(jù)文本內(nèi)容的結(jié)構(gòu)，以自然段為基礎(chǔ)進(jìn)行分欄（15-25個(gè)字的欄寬視覺(jué)效果相對(duì)舒適）字體的設(shè)置真正經(jīng)得起推敲的幾種字體是：宋體（標(biāo)宋、書(shū)宋、大宋、中宋、仿宋、細(xì)仿宋）、黑體（中黑、平黑、細(xì)黑、大黑）、楷體（中楷、大楷、特楷）、等線體（中等線、細(xì)等線）、圓黑體（中圓、細(xì)圓、特圓），這些字體是一些標(biāo)準(zhǔn)的基礎(chǔ)字體，雖然普通卻很耐看。 常用的幾種搭配字體a.微軟雅黑+方正中等線b.方正報(bào)宋簡(jiǎn)+方正蘭亭黑c.方正楷體簡(jiǎn)+方正報(bào)宋好的，重新設(shè)計(jì)！1.文案用詞精確，層次清晰，一般控制在三層。2.加重