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

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

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

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

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

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

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