描邊插畫：可以簡單理解為眾多線面結合圖標組合在一起，互相呼應而組成一個大畫面。畫面中的元素除了面以外，還具有描邊，因此也叫描邊插畫。
本文內容：文章會詳解如何畫一張描邊插畫，教程素材沒有用我之前的插畫來做步驟分解，而是新畫了一張插畫以作示范，繪畫原理都一樣，理解原理就好。除了具體步驟以外，會針對一些易犯錯誤的地方添加重點標記。
一點建議：看完文章后，可以按照我分享的方法來臨摹一遍，但我更趨向于小伙伴們能夠發(fā)揮自己的想象力，做一張屬于自己的原創(chuàng)插畫。畫完后若有不清楚的地方，歡迎在我的公眾號中添加微信并附帶插畫，可給予建議。
這次插畫的主題源自于我的一個夢：在草地上，遺落的帆布鞋里面長滿了鮮花，小鳥守在花的旁邊歌唱。
確定主題后，把腦海里的畫面畫出來，可以畫在紙上，也可以用數(shù)位板在 ps 里面畫，按照個人習慣就好。我比較喜歡手繪，因此在紙上畫。
新建畫布1600*1200
視圖-勾選對齊點
在描邊插畫中，常見的問題之一就是描邊的粗細問題. 以及描邊間關系的處理問題。
描邊粗細問題（下圖以之前的四季插畫為例子）
描邊間關系處理
描邊設置
描邊的粗細是根據(jù)畫布大小而決定的，1600*1200的畫布，我習慣用 8pt 的粗細的線條，但是如果畫布是1200*900，8pt 則顯得過粗。具體的粗細可以根據(jù)情況而調整。
布爾運算法
形狀斷點重連法
形狀生成器
鋼筆勾勒法
鋼筆勾勒法顧名思義就是用鋼筆直接描出物體的外形。在這個插畫中，植物的形狀比較隨性，因此用鋼筆直接勾勒比形狀剪切要快。繪制的過程中，注意調整線條的平滑度. 弧度，使其規(guī)整。在此不作示范。
最近看到 kit8 大神的畫，突然想到如果白線運用在線性插畫會怎樣，就嘗試了這種風格。把線稿復制一層置于頂上，改成白色，2px 粗細的線，然后向旁邊移動錯位，破一下畫面沉悶的感覺。
看到這里，你應該也發(fā)現(xiàn)了，畫面是比較灰的，因為我都是選擇低飽和度的顏色，如果需要調整，就在 AI 中把插畫導出 SVG 格式。然后拖到 PS 里面進行色相飽和度的調整。
在顏色調整過程中，遇到喜歡的配色就保存下來，這樣一張插畫就完成了。
我們都知道一個版面中必定有版心的概念。何為版心呢？版心就是除去天頭、地腳和左右頁邊距余下的區(qū)域，也是我們頁面內容的擺放空間。下圖中灰色塊的區(qū)域就是此頁面的版心。
知道了版心，那么何為版面率呢？版面率就是版心所占頁面的比例，通俗一點講就是版面的利用率。
上面左圖中版心的面積非常大，四周的余白少，版面的利用率高，所以版面率就高。右圖版心面積小，版面利用率比左圖低，所以版面率就低一些。
版面中也有滿版與空版的概念。如上圖，滿版就是沒有天頭地腳與左右頁邊距的，此時版心即整個版面，版面利用率為100%?？瞻婢褪前婷胬寐蕿?%的。從滿版到空版之間的版面率是遞減的關系。
說完版面率的概念我們再來說一說版面率對畫面氣質的影響。
一般來說版面率越高，視覺張力就越大，版面也會更活潑與熱鬧；反之，版面率越小，給人感覺就越典雅與寧靜，版面也會更有格調。
上圖中高版面率的海報相對于低版面率的更熱鬧與活潑；低版面率的則更典雅。
畫冊中也是一樣的，上圖是我早些年做的一個案例。同樣的內容跟圖片，只是版面的利用率不同，我們可以發(fā)現(xiàn)右邊低版面率的作品更安靜和典雅。
版面率的高低能夠影響版面的氣質，所以我們實際工作中也要根據(jù)項目的氣質分配合適的版面率。比方說典雅氣質的項目我們就要用低版面率版面，如果用高版面率顯然是與項目本身的氣質相悖的。
說完版面率我們再來說一下留白，留白的概念大家都懂。而這里所說的留白更多的是指頁面的負空間。
頁面中去除內容后的空間就是負空間，如下面這個頁面。
圖中灰色塊代表圖和文字信息等內容，除去這些圖片和文字后，頁面中的其他空間都可以看作是負空間，也就是留白。當然，留白并不一定是白色，所有除去頁面內容后的空間都是負空間，如上圖右側案例，黑色部分即此頁面的留白。
負空間的多少即是留白的多少。留白的多少我們可以用留白率來表示，如上圖，負空間小的留白肯定少，留白率就低。負空間大的的留白肯定多，留白率就高。
留白率就是版面留白的多少，實際上與版面率的概念差不多，如下。
空版留白最多，滿版留白最少。當然這也不是絕對的，有的作品中雖然是滿版，但空間廣闊，比如天空什么的，都可以當作留白來看待。
上面說來留白率跟版面率也有一定的關聯(lián)，所以他們對畫面氣質的影響也是如出一轍的。我們可以先來看一下低留白率與高留白率的幾個作品。
通過這幾個作品我們可以看出留白少的信息更豐富，版面更有活力，也更熱鬧，親和力也更強。而留白多的更雅致，更安靜典雅，更有格調跟品質感，但親和力稍弱。
下面進行案例演示吧，首先看一看文案。
這一步我們需要把文案的層級關系拉開，大中小區(qū)分的明顯一點。這個文案的層級關系肯定是 欲望の森林 ＞ 英文 ＞ 欲望是無盡的森林 ＞ 小文字信息的。
首先我們做一個有張力的版面，那么我們可以想一想什么樣的版面是有張力的呢？
首先版面率要大，其次留白要小，讓版面中的信息緊湊一點。
上圖就是對版面的布局，可以看到圖片是出血版的，沒留天頭與左右頁邊距。這樣做的目的也是使版面率更大。
布局做好之后我們把圖片與編排好的文字放置上去就可以了，如下。
上圖可以看到留白比較少，符合留白率低的理論，雖然具備張力，但不是很明顯。這種情況下我們可以改變一下底色使之感覺留白率更低，如下。
做完了留白少版面率高的，我們再來做一個典雅一點的。
根據(jù)本篇文章的內容思考一下什么典雅與安靜的的排版版面率與留白率分別是什么樣的？
一定是低版面率和較多留白的版面更能體現(xiàn)典雅與安靜感。所以我們在版面安排上要使其留白更多，同時版面率要小一點。下圖就是一個基本布局。
最后我們再根據(jù)版面布局置入圖片微調一下就可以了，如下。
版面率跟留白率都能夠影響版面的氣質，我們做項目的時候具體問題具體分析，根據(jù)項目氣質去設定版面率跟留白率的大小。
大家好，從今天開始我要以大白話且通俗易懂的方式，來與大家分享我的知識和觀點。
主要講解的是平面設計基礎理論知識與實際用法，后期會講一些高階的設計思維。
本章節(jié)適合設計小白和需要填補設計基礎的設計師學習閱讀。
目錄
1、理解、提取與布置
2、貼近與遠離
3、排列與對齊
4、視線移動方向
5、組織與重復
1、理解、提取與布置
理解、提取與布置指的是根據(jù)設計的意圖來進行信息的整理，然后再將整理好的信息中重要和不重要的信息按照優(yōu)先級排列出來，最后再根據(jù)排列好的信息按個人美感和美學理念擺放到平面中。
1.1 理解部分
當收到一個海報設計需求時，我們不是要馬上動手去做，而是要去思考需要設計的海報受眾群體是哪些人，具體要怎么展示它，它展示的目的是什么。 
下面我就簡單介紹一下設計思維及方法，首先要設置定一個需求【現(xiàn)代美術館，需要設計一個簡潔大方的海報】。根據(jù)這個需求在進行具體的思維延伸。
1.1.1 海報的受眾群體
當我們收到設計需求時，要考慮海報的受眾群體，男人/女人，少年/青少年/中年/老年，每種受眾群體接受教育的程度和經(jīng)歷均不同，要根據(jù)不同的受眾做合適的設計。當我們按照具體需求定義好受眾群體后，就可以考慮推斷用哪種風格來展示海報了。
對于現(xiàn)代美術館需要一個簡潔大方的海報，這個需求所涵蓋的年齡區(qū)間比較大，基本上所有人都可以參觀美術館。那我們只要避免使用“個性化”的表象特征元素就可以解決這個問題了。
意思就是不要加入柔美的線條（除非展品的構成是柔美的線條），游戲和女妝這類具有一定代表性的象征元素，不要夾雜太多表現(xiàn)形式，用最容易讓人理解的表象形式來處理就可以了。
1.1.2 怎么展示海報
現(xiàn)代美術館，需要設計一個簡潔大方的海報這個需求，可以根據(jù)主關鍵詞“現(xiàn)代”和“美術館”，次關鍵字“簡潔”和“大方”來推斷要采用哪種設計語言?！艾F(xiàn)代”的表現(xiàn)形式是無襯線體、干練（有棱角）、簡潔、沒有太多情緒。而“美術館”只要在圖片的處理上讓主題與圖片串聯(lián)共通就可以了。
簡潔大方的設計需求可以采用直線（字有時也是線）或大留白、配色多些白色、舒適的高純度高明度、整體干凈清爽，同時也要注意禁止添加太多顏色（如撞色）。
1.1.3 運用理解部分生成原型
根據(jù)前面的分析大概有了個原型，分為上下構圖。上部分是美術館的部分場景圖片，下部分是具體的內容信息部分。所有要素均以現(xiàn)代感、簡潔干練、配色不復雜、線性、整潔、清爽、專業(yè)、無太多情緒為基礎進行設計的。
以上就是“信息的整理”中的“理解部分”，當設計師收到需求時，不要馬上著手去做。先思考采用哪種表現(xiàn)形式（視覺語言）更適合需求，分析后再去做設計，這樣才能準確表達具體的需求，也能做出更符合需求的設計。
1.2 提取部分
提取部分就很好理解了，顧名思義是將整理好的信息中重要和不重要的信息按照優(yōu)先級排列出來。我們只需要根據(jù)優(yōu)先級進行排序，并把最重要的信息排列到平面中就可以了。例如需求中有【ABCDEFGHIJKL】這么多種信息，把最重要的【CGIL】提取出來再排列優(yōu)先級【IGCL】。由【ABCDEFGHIJKL】-【CGIL】-【IGCL】這個過程就叫“提取信息部分”。
1.3 布置部分
把提取并排列好優(yōu)先級的信息規(guī)整好，就可以布置在平面上了。用之前設計好的原型套用已提取好的信息就可以了。特別要注意重要的內容放大，不重要的內容弱化。
* 要點
理解：首先要理解作品的受眾群體、要怎么展現(xiàn)、目的是什么。
提取：其次要明確作品內容中什么是最重要的、根據(jù)優(yōu)先級排序。
布置：最后把排列好的信息加以布置，重要的內容放大，不重要的內容弱化。
2、貼近與遠離
貼近和遠離的概念也是比較好理解的。與格式塔視知覺的親密性與遠離性是一個道理，初期只講一些通俗易懂的概念，像格式塔視知覺以后會講。
2.1 貼近和遠離的 基礎概念
貼近是指同類要素擺放在一起會呈現(xiàn)出一種共通性或產(chǎn)生某種規(guī)則，而遠離是指同類要素分開擺放看上去就沒有共通性或不會感到有某種規(guī)則。
當把同類要素（男人女人）放到一起，會覺得他們有一定的共通性，而且看上去像一對情侶。相反把同類要素（男人女人）分開來放，會覺得他們毫無關系。
我們把這種概念應用在平面設計上，如下圖所示。
相同的要素擺放在一起會有一定的共同性，相反分開擺放則看上去沒有關聯(lián)。
貼近與遠離基礎概念的實際案例
2.2 貼近和遠離的 進階概念
把同類要素放到一起有種井然有序的感覺。如果要處理較為規(guī)整傳統(tǒng)的版式時，可以考慮多將要素放到一起形成規(guī)則。另外把同類要素分開擺放，會感到?jīng)]有共通性和規(guī)律規(guī)則，但是能為平面增加節(jié)奏感和沖擊力。
貼近與遠離進階概念的實際案例
其次遠離能使平面產(chǎn)生留白，通過留白也能使平面具有關聯(lián)性。
雖然說遠離能使要素看上去沒有共同性和規(guī)則，但如果要素處在一個平面中，利用留白呈現(xiàn)出一種關聯(lián)性。這就像吵架的夫妻一樣，同在一個床上，女的偏床左側，男的偏床右側，呈現(xiàn)一種遠離性。但他倆還是處在“床”這個平面中，也會呈現(xiàn)一種關聯(lián)性。
貼近與遠離進階概念的實際案例
* 要點
同類要素貼近擺放在一起相互關聯(lián)，同類要素遠離擺放相互排斥。
同類要素貼近擺放在一起平面有規(guī)則，同類要素遠離擺放增添節(jié)奏。
留白也能使要素有一定的關聯(lián)性。
3、排列與對齊
排列與對齊的概念比較簡單，也很容易理解。轉化一下思維，把排列比作軍隊隊伍中的“集合”，把對齊比作隊伍中的向前/左看齊，就很好理解了。
3.1 排列
排列是指將要素按照一定的規(guī)則進行布置，使平面達到一種平衡與和諧。道理與收拾屋子一樣，雜亂無章的屋子會讓人感到不舒服且很壓抑。整理的井然有序的屋子會讓人心情舒暢很安心。平面中的“排列”就是屋子中的“整理”，目的是使雜亂的屋子變得規(guī)矩整齊。收拾屋子的方法就是“規(guī)則”，用規(guī)則的方法來排列就叫“布置”。
排列的目的是讓平面變得有序和規(guī)則，當平面達到有序和規(guī)則就會呈現(xiàn)出一種舒適感，好比自然中的和諧。
3.2 對齊
對齊也可以理解為將要素按照一定的規(guī)則進行布置，使平面達到一種平衡與和諧。對齊與排列的差別在于，對齊是在排列的基礎上進行操作的。先將要素按照一定規(guī)則進行排列，然后再將要素進行對齊。排列是畫一個大體的框架，而對齊是做框架里的精細操作。
排列與對齊的實際案例
* 要點
排列與對齊的目的是讓平面變得有序和規(guī)則，當平面達到有序和規(guī)則就會呈現(xiàn)出一種舒適感。
把排列比作軍隊隊伍中的“集合”，把對齊比作隊伍中的向前/左看齊，就很好理解了。
4、視線移動方向
設計書籍或排版布局時，要考慮通過設計讓讀者以怎樣的順序去閱讀作品，通常情況下人的視線是從上到下移動的，所以在設計時要考慮到這一基本原則。閱讀橫排文章時視線是【由左至右】，閱讀豎排文章的視線是【由右至左】。
視線的移動方向分為三個知識點，橫排閱讀、豎排閱讀、流水式閱讀。流水式閱讀以后會講。
隨便補充一下啊，我讀過的設計文獻中提到的閱讀方法只有“Z字視線移動方向”，而沒有“T字視線移動方向”。有一種學習方法叫“T型閱讀法”，與視線移動方向的“T字視線移動方向”不是一個概念。視線本身就是從上到下從左到右的形式閱讀的，形成了Z字閱讀方式，我覺得是國人是把這些概念給曲解了，如果有說的不對的地方，也請大佬們多多指點。
4.1 橫排閱讀
橫排閱讀是指作品的排版布局是以橫向的排列方式讓讀者來閱讀作品。橫向的排列方式就是文字是橫著的，大家現(xiàn)在讀的這篇文章就是橫向排列的文章。閱讀橫向排列的文章時視線是從上至下【由左至右】依次閱讀的，如圖所示。
懂得了橫向排列的方式來閱讀文章會有什么用呢？由于人們的閱讀習慣，一般情況下閱讀讀物，都會遵循從左到右閱讀文章的方式，這也就間接影響了文章內容的重要性。采用橫向排列的方式進行排版布局，重要的內容要放在最左面，也就是最方便引導人們視線方向的地方。
如果不把重要的內容放在視線方向的地方，讀者不僅閱讀作品時會感到很吃力（可讀性），而且會不理解作品是什么含義，視線也隨之錯亂，作品也會失去原本的含義。
橫排閱讀的實際案例
4.2 豎排閱讀
橫排閱讀是指作品的排版布局是以豎向的排列方式讓讀者來閱讀作品。閱讀豎向排列的文章時視線是從上至下【由右至左】依次閱讀的，如圖所示。
一定要注意，豎向排列方式內容區(qū)在平面的最右面，與橫向排列方式不同。這個規(guī)定就像地球為什么是圓的的道理一樣。
豎排閱讀的實際案例
* 要點
閱讀橫排文章時視線是【由左至右】，閱讀豎排文章的視線是【由右至左】。
不要打破規(guī)則，一切以引導讀者視線為主。
5、組織與重復
按照一定規(guī)則構成布局來編排要素，能使種類繁多的要素顯得整潔有序。
5.1 組織
沒有共通性的雜亂圖形匯聚一起會造成視線混亂，讀者注意力會被分散，也會降低理解力。將圖形用框圈起來，按照等距進行排列，整體就會顯得很整潔，也便于找出想要了解的圖形。
組織規(guī)則的實際案例
5.2 重復
這里的重復不是指復制粘貼，而是元素上的重復構成。例如重復相同的格式，風格、文字、顏色、線、圖案等。為了讓平面具有條理性，用風格統(tǒng)一的要素做修飾，讓排版符合流水式，視線清晰自然。
重復規(guī)則也可以應用在平面中、元素中、要素中、形狀中等，靈活運用重復能使平面具有統(tǒng)一性，也能制造趣味性，增加讀者對作品的印象。
重復規(guī)則的實際案例
* 要點
將圖形用框圈起來，按照等距進行排列，整體就會顯得很整潔，也便于找出想要了解的圖形。
靈活運用重復能使平面具有統(tǒng)一性，也能制造趣味性，增加讀者對作品的印象。
設計工作中，你是否經(jīng)常覺得留給設計的時間不夠用？為什么會這樣？如何解決？Let’s go～
01 問題背景
設計工作中，你是否經(jīng)常覺得留給設計的時間不夠用？是否經(jīng)常遇到這樣的問題：
場景1：總感覺自己的設計差了點什么，導致設計上反復嘗試。終于在交稿最后一天感覺ok了，興致勃勃的拿去交工，然后得到這樣的反饋——“這個不行，這不是我想要的”。
場景2：“多久能設計完？盡快？盡快是多久”“這個需求簡單，隨便搞搞就行了！” “要設計5天？啊呀～不用那么精致，差不多就行了！”
02 為什么會這樣？
類似的事情在設計行業(yè)已經(jīng)變成了大家都懂的梗，但是為什么會這樣？
一.設計師自身原因導致
1.設計缺乏說服力導致無節(jié)操改稿
A.是不是設計目的不明確？
設計本身是一種解決問題的系統(tǒng)性方法，并不是一個結果，不能為了設計而設計。沒有目的性的設計會導致大方向出錯，就好比一把狙擊槍打錯了目標，即使威力再大也是徒勞。
B.是不是設計思路不正確?
很多設計師在接到需求的第一時間打開ps或其他軟件直接開始試錯，缺乏目的的設計很容易在中途發(fā)現(xiàn)錯誤或更好的方法，要么推翻重改，要么將就的給上游看。當然，結果肯定不會很理想。
C.是不是細節(jié)經(jīng)不起推敲?
細節(jié)缺乏考慮的設計，無法闡述每一處設計的目的。當其他人提出疑問的時候，要么不能應對，要么強行應對，兩種一定都很負面。
2.設計師估時不精準導致時間不夠用
A.是不是估時不夠合理？
不能精準評估設計時間，導致估算的時間過短或過長，設計師看到界面數(shù)量直接估時。不了解需求目的以及缺少設計難點的考慮，導致自己不能在估的時間內按時完成
B.是不是估時不夠精細？
需求模塊估時不精細，導致評估的時間不可信，對于其他崗位來說，大多不了解設計過程以及設計難點在哪，不能清晰闡述其難點在哪很容易被領導壓時間或貼上負面標簽。
二.外界原因包括哪些
1.當然也有不是設計師本身導致，比如需求方向反復變更。導致設計方案的不斷更改
2.需求方出方案時間過長導致下游全部時間不夠
3.需求方?jīng)]能全局把控時間，沒全面考慮其時間周期
所以，一套有說服力的設計以及精準的設計時間評估是設計師提升自身效率的核心，而能夠發(fā)現(xiàn)項目效率問題所在是團隊提升整體效率的核心。
03 怎么辦？
那么如何讓你的設計更有說服力和精準的制定你的設計時間？以及外界原因如何應對呢？
一.讓你的設計更有說服力
A.明確設計目的
核心為提前溝通，提前了解需求。分別包括：
1.需求目的
需求目的并不是說需求方想做什么，而是做這個需求的目的是為了解決什么問題
2.數(shù)據(jù)
是否有數(shù)據(jù)支撐，證實問題的客觀存在，盡量避免出現(xiàn)偽需求
3.是否對已有的場景造成不良影響
系統(tǒng)性考慮，避免單獨需求的產(chǎn)出對系統(tǒng)級的設計造成影響，導致體驗不統(tǒng)一或開發(fā)難度大以及各種后期改稿問題
4.用戶與場景
需求用戶是誰，在什么場景下用，避免設計方向出錯
5.明確需求期望和時間期望
需求方是否有對設計的期望形式（包含動效期望，插畫期望）以及期望時間是多少
B.清晰設計思路
1圍繞戰(zhàn)略目的，目標人群以及使用場景考慮
2通過其三個維度提取與篩選關鍵詞
3圍繞關鍵詞確認設計調性
4圍繞設計調性結合具體場景思考與執(zhí)行
5具體細節(jié)打磨，基于設計調性以及場景考慮上提升品質感與好感度
C.讓細節(jié)經(jīng)得起推敲
1.細節(jié)的客觀性
每一處的設計元素需有他的作用性，盡量避免可有可無的設計元素
2.細節(jié)服務于整體
每處細節(jié)的目的都應服務于整體，避免對整體有負面影響的細節(jié)設計
以上可以總結為
1明確的設計目的能夠讓你的設計和需求建立極強的契合，推翻設計就等于推翻需求
2清晰的設計思路能夠讓你的設計環(huán)環(huán)緊扣
3經(jīng)得起推敲的細節(jié)能夠讓你的設計細化到每個元素都缺一不可
一套這樣的設計方案就好像一桿槍槍命中要害的“狙擊槍”，還有什么擊不碎的目標呢？
二.如何合理的評估設計時間
A.方法時間評估
如果建立在詳細評估了需求上來說，設計師已經(jīng)能了解需求包含了什么內容，也一定有某處在設計上很難處理的模塊，如“用戶難理解的功能如何表達清晰、難適配的功能應該采用怎樣的展示方法、狀態(tài)太多的情況如何處理、信息過載的模塊等等等”。分別評估其設計時間。
B.執(zhí)行時間評估
如界面存在大量圖標或需要大量圖標、大量插畫、動效等需要執(zhí)行時間長的需求，需增加執(zhí)行時間
三.如何盡量避免外界因素？
A.提前溝通
盡可能分析需求目的的正確性以及可能遇到的問題盡早提出
B.明確職位責任
設計師沒有辦法把公司的活都干了，該是誰的鍋就該誰來背
C.如何讓其他人理解設計時間
分別闡述這套設計的時間分別耗在哪，各模塊各需要多久。的時間更有說服力
D.需不需要精細化設計到底應該由誰決定
當然，理論上每處設計都應該精細化，但是由于精細化是一個永無止境的事，結合項目本身考慮，需理性一些。需不需要精細化應該是由場景的重要程度、上線時間決定。不應由各職位一方?jīng)Q定。一個重要的場景可能讓用戶形成對產(chǎn)品品牌認識的第一印象，當用戶對產(chǎn)品有了負面的印象，后期改善這個的成本會變的無窮大。作為設計師，需要嚴格把控方案的落地以及評估其體驗的風險
04 結語
一個合理的設計過程可以減少不必要的時間浪費，一個合理的時間評估能夠保證設計工作的正常進行。也希望每個設計師都有一個更美好的工作環(huán)境。
以上為本人的一些看法，也歡迎不同看法的伙伴相互交流，共同進步
提起平面設計，也許很容易聯(lián)想到平面設計師。其實平面設計不僅是職業(yè)也是一個重要的設計知識體系，在我工作中發(fā)現(xiàn)平面設計知識是UI設計和其他設計領域中必備的能力，然而很多朋友認為「平面設計是屬于紙媒行業(yè)的事」而忽略這部分知識的重要性，為此我想簡明地將平面設計知識體系中最重要的知識點提出供大家汲取。
平面設計（graphic design），也稱做視覺傳達設計，是指在二維平面內通過多種設計組合來借此傳遞信息的視覺表現(xiàn)設計。平面版式設計需要使用字體知識（Font）、視覺設計（Visual Design）、版面（Layout）等方面的專業(yè)技巧來達成創(chuàng)作計劃的目的。平面設計非常重視版式的設計，而版式并非只有紙媒才需要重視。如果想做好移動端設計、網(wǎng)頁設計甚至是別的領域的設計，那么一定要加強學習平面版式的基礎知識。
在我們開始學習平面版式基礎之前，我們先來講一下簡明平面構成原理。平面構成是運用點、線、面和其他技法來構成基本元素的學習方法。它是在我們工作之前必須要學會的視覺語言。以下的內容希望如果您有時間進行練習，邊練邊攝取知識效果才能更好。
點是組成平面構成的基礎要素。點可以是不同大小的；可以是不同疏密的；可以是不同虛實的?？梢允钦R的點，也可以是隨意排列的點。在一個畫面上也可以有大小、疏密、虛實、整齊和隨意對比的，對比就會產(chǎn)生韻律感。僅僅依靠點來構建畫面時，我們會想方設法地讓畫面豐富，體會點的變化。
線有哪些呢？垂直線、水平線、斜線、曲線等。垂直和水平都會有穩(wěn)定的感覺，斜線會更加有沖擊力，曲線會感受更加柔和。由不同粗細、不同韻律的線條組合，作品將更加有視覺引導的效果。嘗試只用線條構建一個畫面，你會體會到不一樣的視覺感受。
面的種類有不規(guī)則形狀和幾何形狀兩種。在《紀念碑谷》游戲中有個詞叫做「神圣幾何」，我非常的喜歡。幾何圖形真的是很神奇的存在，幾何形是可以用數(shù)學表達出來的，也是我們在初中時就開始學習的。比如三角形、圓形、矩形、正方形、橢圓等。這些幾何形在視覺上是非常令人感覺舒適的，如果你在創(chuàng)作時沒有靈感時，可以從幾何形中尋求靈感。不規(guī)則形狀其實也可以分解成不同的幾何形的組合。
平面構成的形式有重復構成形式、近似構成形式、漸變構成形式、發(fā)射構成形式、密集構成形式、對比構成形式、肌理構成形式等，如果平時您發(fā)現(xiàn)在工作中排版的圖形能力比較差，那么建議您了解一下構成形式加以練習。
重復構成形式就是用一個基本的元素在一定的形式下重復排列，排列對方向和疏密會產(chǎn)生一種秩序的美感。談起重復構成，我想順便介紹一下重復構成的兩種方式：第一種：二方連續(xù)。二方連續(xù)是圖案的一種組織方法。二方連續(xù)是由一個單位紋樣向上下或左右兩個方向反復連續(xù)而形成的紋樣。第二種：四方連續(xù)，是由幾個紋樣組成一個單位向四周重復地連續(xù)和延伸擴展而成的圖案形式。
近似構成形式是使用相似的元素進行構成的一種方式。近似構成講求在統(tǒng)一中帶有變化。設計上采用基本形狀之間相加相減求得近似的基本形?；拘晤愃频臉嫵尚问骄褪墙茦嫵尚问健？偨Y來說就是看著一樣實則要有變化。
漸變構成形式是把基本元素的大小、方向、虛實、色彩等關系進行漸次變化排列的構成形式。漸變可以是通過顏色、方向、虛實的變化也可以是通過外形的變化來完成，不一定是我們通常理解的顏色漸變。
發(fā)射構成形式是以一個點或多個點為中心向周圍發(fā)射擴散等效果，就會具有較強的動感及節(jié)奏感。首先我們需要有骨骼線。骨骼線就是我們畫面走向的一個看不見的線索。其次我們可以選擇使用離心式、向心式、同心式幾種發(fā)射方法來設計。
特異構成形式是在整體畫面都有規(guī)律有固定形態(tài)的狀況中進行小部分的變異以突破單調畫面的形式。特異構成的部分可以用顏色、形狀、線條等方法來做。很多運營類設計也會應用到特異構成形式。
密集構成就是在畫面中使用大量重復密集的元素來給觀察者一種壓迫感和與留白的對比，密集構成很容易給觀察者造成震撼和心理壓力。
我們做對比構成的時候，可以使用元素的形狀、大小、方向、位置、色彩、肌理等進行對比，以及重心、空間、有與無、虛與實的關系元素的對比。對比會產(chǎn)生強烈的反差和感官刺激。
視覺可理解的物體表面圖案的紋理，我們就叫做肌理，以肌理為構成的設計，就是肌理構成。我們在做肌理構成時如果用Photoshop的時候會非常的方便，可以用圖案、貼圖等方式。
在平面設計的過程中，我們其實是在組織圖片、文字、按鈕、圖標等最小元素的信息架構。這些元素是畫面中的最小單位，它們本身就附著著某個信息，比如作品的標題、一個功能、去展覽的地址、一個景點的照片等。這些排版中的元素需要我們放在畫面中，不可以因為好不好看而刪去必要的信息，然后根據(jù)他們的重要性進行排列組合。
字體是排版中最重要的元素，也是最直接的信息傳達方式。一般來說設計師通常需要了解的字體有中文和西文字體兩種：西文字體由來已久，由最早的羅馬字體到我們現(xiàn)在蘋果手機里的SFUI字體，西文字體經(jīng)歷了許多的設計上的變革。西文字體可以分為：羅馬字體或襯線體（roman，serif）、無襯線體（sanserif）、手寫體（s cript）、雕刻字系（glayphic）、典籍體字系（Classical）、裝飾體字系（decorative）、展示體字系（Display）、當代字體字系（Contemporary）、符號字系（Symbol）等。中文字體由于起先版權不夠重視其實并沒有西文字體發(fā)展得順利，數(shù)量上也遠遠落后于西文字體甚至是日文字體。好在中國設計正在崛起，在一大批設計師前赴后繼的努力中，中文字體的數(shù)量正在呈指數(shù)級別增加。中文字體分為三種：第一種是黑體（筆畫上沒有裝飾的字體）。黑體也有不同的具體字體如蘋方、微軟雅黑、思源等；第二種是由書法作品演變來的字體如從宋代活字印刷而來的宋體（對了，日本因為誤解原因將宋體叫做明朝體）、楷體、仿宋體、行楷、隸體、魏體、舒體、顏體以及鋼筆書寫的字體；第三種是美術字體，比如綜藝體、美黑體、水柱體、娃娃體等。
這里我引用了前端工程師在CSS樣式表（一種用來表述網(wǎng)頁樣式的代碼）中的族類概念。常見的族類有五種：襯線體（serif）、非襯線體（sans-serif）、手寫體（cursive）、夢幻字體族（fantasy）、等寬字體族（monospace）。襯線體的特點就是筆畫結尾處有裝飾的處理，比如我們熟悉的Times New Roman、Georgia、宋體等。非襯線字體粗細比較均勻，比較現(xiàn)代并且在縮小的情況下依舊保持了可讀性。非襯線字體如Arial、Helvatica、幼圓、楷體等。手寫字體族就是由手寫而產(chǎn)生的字體，比如迷你簡黃草、Caflisch s cript等。夢幻字體族聽上去稍顯非主流，但是也是字體中不可忽視的一支力量。常見的夢幻字體族有WingDings、WingDings 2等。等寬字體族將西文的二十六個字母全部變成等寬，這樣做的好處就是排版大大地輕松了。常見的等寬字族有Courier、Prestige等?？傮w來說字體的族類是襯線體和非襯線體兩個大類，大家可以簡潔地記憶：襯線就是筆畫處有裝飾的字體族，非襯線就是筆畫較為相同粗細的字體族。
一個族類下面是不同的字體，然而一個字體又可能有好幾個字族。字體文件中通常會包含幾個字族，如果你安裝了Helvetica，在Photoshop中你會發(fā)現(xiàn)字體選擇器下包含了三十多個前綴是Helvetica的字族。原因很簡單，字體設計師除了設計從A到Z的大小寫字體、從0到9的數(shù)字、標點符號后，還為我們設計了同樣字體的不同族類來協(xié)助我們在不同地使用場景下表達合適的意思。字族一般有：正常（Regular）、窄體（Narrow）、斜體（Italic）、粗體（Bold）、粗體斜體（Bold Ltalic）、黑體（Black）等等。雖然字體的字族有多有少，但是一般都具有正常、斜體、粗體、粗體斜體四種基本字族。應用場景上：粗體通常表示強調、斜體表示引用、正常是正文。很多時候我會發(fā)現(xiàn)很多設計師亂用斜體，其實斜體的設計并不是為了好看，而是在書中代表本段文字來自引用另一個著作的含義。
舉個使用斜體的例子：「設計的作用在于尋找功能和社會間的接點，在功能足以說明一切的前提下，裝飾成分是可以節(jié)制的，如何把握節(jié)制的度是考驗一個設計師是否成熟的標尺?！?-《設計的覺醒》田中一光
一個字族中的任何一個字體也會有不同的筆畫粗細變化。這種粗細變化的字體稱之為字重（Font Weight），字族后面的字重選項如「Thin」、「Light」「Regular」「Book」「Bold」「Black」「Heavy」都是一個字族下的不同粗細變化。實際上，國際標準 ISO組織規(guī)定了九種字重，但是由于有些字重不常見，我們就記憶以上七種字重即可。中文字體也有相應的字重，如「極細」、「細」、「標準」、「常規(guī)」、「中等」、「粗」、「特粗」。在使用場景中，如果我們需要強調一個內容，比如標題時，一般會用粗體；如果在正文的設計中，那么就會用常規(guī)或標準等字體。英文也類似，這些字重是為了我們突出文字使用的。注意一點：在PS中我們也可以通過字體面板給文字人工加粗，這種加粗如果變成形狀時會提示「該字體使用了加粗樣式，不能變換」，所以可見這種人工加粗是有一點缺陷的。
任何字體都具有自身的氣質。比如一款圓角萌萌的字體會給人溫柔調皮的感覺；而邊角鋒利的字體會給人一種強硬的感覺；書法字體會讓用戶覺得充滿中國風和個性；瘦長纖細的字體會給人一種未來感等等。每個字體都具有一定的感受，這與色彩心理學中每種顏色帶給人不同的感覺一樣，字體的外形和筆畫也會給人一些心理暗示。
全角指一個字符占用兩個標準字符位置。中文字符、全角的英文字符、國標GB2312-80中的圖形符號、特殊字符都是全角字符。半角指字符占用一個標準的字符位置。
通常的英文字母、數(shù)字鍵、符號鍵都是半角字符。半角全角主要是針對標點符號來說的，因為正常情況我們沒有打全角英文的需求。
半角英文 english
全角英文 ｅｎｇｌｉｓｈ
半角符號 ,.’」;:{}_+!@#$%^&*()
全角符號，＇＂；：｛｝＿＋?。溃！纾ィ蓿Γǎ?
計算機編程基于英文，也就是半角字符。所以在編程中符號一定都是半角的，如：
name=”郗鑒”
全角符號編程就會無效，如：
name=「郗鑒」
在我們設計作品時也一定要記得中文搭配全角符號，英文搭配半角符號。不要出現(xiàn)如「好的．」或者「ｔｈａｎｋｓ?！惯@樣的錯誤。全角半角的切換在中文輸入法下按SHIFT+空格可相互轉換，這個知識點雖然非?；A，但是無疑我們經(jīng)?？吹接缅e的設計。
我們在一個設計中一定會依靠一些配圖或者照片素材來進行排版。有時我們會選擇尋找素材或者是自己去拍，無論如何，作品中使用的圖片一定要與整體設計色調相符，冷色暖色中性色都要符合整體的色調，一定是鄰近色或對比色等色彩關系，不要因為自己的主觀放置沒有色彩關系的配圖或者會抵消畫面色彩傾向的配圖。另外注意色彩會產(chǎn)生「水彩效果」，即兩種顏色放在一起，如果其中一種是灰色或者比較臟的顏色，那么另一個顏色在我們大腦中也會感覺變臟了。類似于這種效果可以在作圖中慢慢體會。
在一個設計中，圖片與文字的量應該有一定的對比。人天生喜歡看圖片而不是閱讀，實際上人類有閱讀能力的歷史只有幾千年，而欣賞圖片的能力是天然的。如果你的需求上文字需求非常多，嘗試與需求方商討減少文字量。文字量越少，圖形化設計越多，那么視覺上這個作品看起來就更輕松。
在平面設計中，因為最終目的是印刷，對我們的圖片尺寸沒有非常嚴格的要求。但是如果我們是為了互聯(lián)網(wǎng)產(chǎn)品的設計的話，可能會涉及一些需要網(wǎng)站編輯直接上傳的圖片，如果你的尺寸不是一個固定尺寸，那么可能原本網(wǎng)站編輯不需要裁剪圖片而可以直接上傳的工序，要因為我們的一個尺寸變得很復雜。所以請牢記以下三個尺寸：4:3，16:9，1:1。4:3的原因是相機的畫幅一般是4比3，所以我們看到的新聞客戶端的圖片大多是4:3。16:9的原因是視頻寬熒幕畫幅就是16:9，所以我們看到視頻網(wǎng)站的截圖一般都是直接由機器抓取的圖片。1:1一般用于封面等圖片素材的尺寸是正方形的。
任何一個設計中都需要把各個元素分級分清主次，這樣才能更好的抓住重點。你可以想象自己在管理著一部瑪麗蘇電視劇，這部劇中誰是主角？誰是女二號？誰是群演？主角需要獨立的化妝間和助理；女二號可能只有一個助理；群演可能就是整個劇里的一個過客。我們的設計也是如此，哪個信息是主角？哪個信息是女二號？哪些元素又僅僅是群演呢？女主元素首先要站C位（網(wǎng)絡流行詞，來源center）霸占畫面的中心，然后這個元素要盡量突出，可以使用更鮮艷的顏色、更夸張的字重、加邊框等方式突出；女二號信息一定不要搶了女主信息的風頭，所以要和女主元素有一定的對比，字號上也要小很多，盡量讓用戶第一眼看到主要元素。而群演的元素一定要淡化，僅僅讓人感知有這些元素就可以了，比如文字可以縮小到剛剛能注意到，顏色可以是接近背景色等。那么如何讓這些信息按照他們的身份來排版呢？我們就要用到CRAP原則了，CRAP是這四個原則的首字母縮寫，分別是對比、重復、對齊、親密性四個原則。
在同一個視覺區(qū)域內的邏輯不同的元素應該有所區(qū)別，避免視覺上相似。這樣就可以有效地區(qū)分誰是主角誰是配角了。為了讓主要元素更突出，讓次要元素更后退，我們可以盡量使它們的顏色、字體、大小、留白不同。如果兩個元素不盡相同，請讓它們截然不同。比如如果你想使用12px的正文與14px的標題區(qū)分明顯，不如用12px與40px進行區(qū)分反差更大，更容易區(qū)分哪個內容是需要優(yōu)先瀏覽的、哪個內容是次要的。對比的方式有以下幾種：
色彩對比
在我們排版時首先要產(chǎn)生對比效果的就是背景和文字了。文字是第一閱讀元素，背景和文字如果顏色很接近，那么就不容易區(qū)分出來引發(fā)注意了。一般來說在很多媒介的設計中我們習慣了白紙黑字，即白色背景和黑色文字。我指的不僅是純黑和純白，也包括其他類似明度顏色的對比。黑紙白字是另一個選擇，深色背景和淺色文字的搭配其實不適合大量閱讀，如果你的作品信息不多是沒有問題的，但是如果用戶閱讀很久黑紙白字的界面，就會產(chǎn)生視疲勞（比如再次盯著白色的墻的時候文字還會出現(xiàn)等）不舒服的感受。當然一切取決于用戶使用場景，如果我們的設計被應用在夜晚等較暗的環(huán)境，黑紙白字更利于閱讀?？傊?，不管你的設計采用橙藍、黑白、藍紫配色，一定要記住文字和背景的對比關系。
除了文字之外，圖標和其他裝飾信息的色彩對比也是非常重要的。輔助信息或者輔助功能的圖標盡量淡化以突出主要功能和圖標；重要功能如訂單等按鈕則需要突出和醒目。色彩對比是設計中一個非常常見的手法。
大小對比
大小對比是指文字、圖片、圖標等元素為了區(qū)分重要性采用的區(qū)分方法。比如兩行文字：郗鑒和相聲演員，同屬文字但權重不同：第二行的文字用于解釋第一行的內容，所以第二行內容應該通過大小和顏色變成次級，讓用戶閱讀時分清主次。與此類似，比如音樂播放界面中的三個按鈕一般并排放在一起：上一首歌、播放、下一首歌，哪個應該更大呢？當然是常用的、重要的功能-播放按鈕。當然如果圖標同屬一個級別也應該放在一個尺寸的級別上。
如果相同的內容（如標題等）屬于同一個邏輯，可使它們的顏色、字體、大小、留白保持相同。這樣可以增加條理性和加強設計的統(tǒng)一性。這個原則看似簡單，但是新手很容易犯這個問題，所以再次提醒，一個級別的信息盡量使用一種設計來保持用戶的認知，避免用戶認為是另一種信息分類。這就是重復原則。在一個屬性或邏輯單元里的內容應該盡可能地使用重復的顏色、大小、間距。我們來看，一個注冊頁面可含有：注冊、登錄、忘記密碼、跳過等內容。如果我們把登錄頁面分為四個屬性，那么可能我們需要四種字體或四個不同的區(qū)域。但如果我們把它們分為兩類呢？注冊和其他。那么同一個分類就可以重復使用一種字體了?？瓷先ゾ筒粫軄y了。在重復原則下，用戶會因為視覺慣性變成尋找線索的「僵尸」，會根據(jù)線索而順暢地瀏覽下去。
任何內容在版面上都盡量應該上下左右對齊。隨意擺放絕對是錯誤的。這一點一定要和大家多次強調，比如一個元素上下左右的間距都要是一樣的。大家看到網(wǎng)頁和app設計之中經(jīng)常會有間距和留白，留白和對齊都是我們在設計時需要考量的，留白不是隨意的。
在邏輯上有關系的兩個元素應該盡量放在一起。兩個視覺元素在一起就會變成一個視覺單元。比如注冊頁面中的登錄視覺單元是由輸入表單和登錄按鈕組成的。相同的內容，如小標題等，屬于同一個邏輯。可使它們的顏色、字體、大小、留白保持相同，這樣可以增加條理性和加強設計的統(tǒng)一性。
左到右閱讀：從左到右是受現(xiàn)代社會影響后天影響我們的一種習慣。我們看一個比較大面積的設計時也會從左到右依次閱讀，這也就是為什么網(wǎng)站的logo都在左上角。從上到下閱讀：我們閱讀作品時也是從上到下依次閱讀，所以重要的內容一定在上面，按優(yōu)先級來排列。從大到小閱讀：我們的視覺也是比較調皮的，如果一個元素很大，我們也會首先去注意大的元素再依次看中等和小的元素。從重到輕：元素的顏色也會影響我們閱讀的順序，從重到輕依次瀏覽。狩獵式閱讀：狩獵式閱讀用戶在尋找可以完成當前界面或設計中的任務線索，比如在購買頁面中會尋找支付按鈕等。S曲線閱讀：S型曲線閱讀比較適合比較大的設計，眼球需要左顧右盼從上到下來瀏覽信息，在S型的瀏覽方式下比較能夠全面地觀察每個頁面元素，S型成了目前主流的視覺導向模式。那么在S型曲線中，我們的對其方式有三種：左對齊、右對齊、居中對齊。重點元素可以依次左右擺放，讓用戶有一個視覺瀏覽的慣性，左-右-左-右-左-右。
上面我們介紹了一些排版和平面的基本原理。那么實際上我們在應用中要做的就是將這些知識運用在具體的需求里。讓多個元素能夠完美地展現(xiàn)在一個畫面里也是一種能力，我們管這種能力叫做構圖能力。那么下面我來簡單講一下構圖能力有哪些要點。
我們的任何一個排版里都會出現(xiàn)重心。重心是我們人類的一個心智模型，我們從物理世界里學習了重心的規(guī)律，在看平面作品的時候也會莫名地關注重心問題。在設計中我們可以利用這一點創(chuàng)作出傾斜的重心、居中的重心、左對齊的重心等。但是請大家注意，如果我們的排版里一個單元是居中的，那么這個單元內的元素也應該重心居中而不應該重心不穩(wěn)，否則會感覺大廈即將傾倒。
設計某個元素或者幾個元素組成的單元也要注重骨骼，骨骼有外延骨骼和內在骨骼兩種。在做完設計以后可以將作品元素的外圍連個線，看看是什么形狀。有時我們會發(fā)現(xiàn)一些骨骼不好的設計確實會給人不舒服的感受。
1692年法國國王路易十四命令成立管理印刷的皇家特別委員會。委員會由數(shù)學家尼古拉斯加宗（Nicolas Jaugeon）擔任領導，他們采用方格為設計依據(jù)，每個字體方格分為64個基本方格單位，每個方格單位再分成36個小格，這樣印刷版面就有 2304個小格組成，在嚴謹?shù)膸缀尉W(wǎng)格中設計字體和版面來試驗視覺傳達的功能。柵格系統(tǒng)英文是「grid systems」，是一種平面設計的方法。柵格系統(tǒng)運用固定的格子設計版面布局，其風格工整簡潔，這種方法現(xiàn)在也被應用在移動設備和網(wǎng)站設計等領域里?？茖W的柵格會給人一種秩序的美感和現(xiàn)代感。
△ 網(wǎng)格系統(tǒng)在書籍排版的應用 作品:Dale magazine by Rocio Gomez
△ 網(wǎng)格系統(tǒng)在圖形中的應用 作品:Pixty App Branding by Ramotion
我們在設計任何作品時，首先考慮的是應用的尺寸。如iPhone8的分辨率為750x1334px、安卓1080P分辨率為1080x1920px等。在我們確立了我們排版的尺寸后，我們就可以根據(jù)這個寬度設計可以被整除的柵格了。我們把整體寬度定義為W。然后整個寬度分成多個等分單元A。每個單元A中有元素a和間距i。所以他們之間的關系就是 W =（a×n）+（n-1）i 。當然每個應用的尺寸不止可以整除成一種柵格，這就要看我們內容排版的疏密程度了。之后，我們將過多內容的柵格和另一個柵格相加得到更大的排版空間；其他元素都須老老實實呆在自己的柵格內，這樣就完成了一個布局非?？茖W的設計了。
比如一個網(wǎng)頁寬度是1000px的情況中我們可以使用：20列每列40px和10像素間隔、20列每列30px和20像素間隔、25列每列30px和10像素間隔、25列每列20px和20像素間隔。如果網(wǎng)頁寬度是990px我們可以使用：11列每列80px和10像素間隔、18列每列35px和20像素間隔、25列每列45px和10像素間隔、33列每列20px和10像素間隔。如果網(wǎng)頁寬度是頁寬980px我們可以使用：14列每列60px和10像素間隔、14列每列50px和20像素間隔、28列每列25px和10像素間隔。
用8當然不是因為數(shù)字吉利，而是因為 8 是偶數(shù)，并且8可以被成倍縮小三次?。ň褪?可以縮小一倍到4,4可以縮小一倍到2，這對于移動端適配來說太有優(yōu)勢了）考慮到移動設計中的適配特殊性，縮小到其它尺寸可能會出現(xiàn)虛邊和半像素，用偶數(shù)可以避免這種情況。 為什么是8？因為比如1920×1080、1280×1024、1280×800、1024×768都是8的倍數(shù)（盡管部分尺寸不是8的倍數(shù)，但也不會顯得奇怪）。除此之外，我們在做其它設計時也可以將不同的留白設計成有倍數(shù)關系的數(shù)字，比如10px、20px、30px等，讓設計內部更有邏輯性。
黃金比例是一個定義為 (√5-1)/2的無理數(shù)。 運用到的層面相當?shù)膹V闊，例如：數(shù)學、物理、建筑、美術甚至是音樂。 黃金比例的獨特性質首先被應用在分割一條線段上。如果有一條線段的總長度為黃金比例的 分母加分子的單位長，若我們把他分割為兩半，長的為分母單位長度，短的為分子單位長度，則短線長度與長線長度的比值即為黃金比例。
黃金比例（以下簡稱「黃金比」）約為： 0.618:1。
△ 使用黃金比例設計出來的蘋果logo
斐波那契螺旋線也被叫做「黃金螺旋」，是根據(jù)斐波那契數(shù)列畫出來的螺旋曲線，自然界中存在許多斐波那契螺旋線的圖案，是自然界最完美的經(jīng)典黃金比例。斐波那契螺旋線，以斐波那契數(shù)為邊的正方形拼成的長方形，然后在正方形里面畫一個90度的扇形，連起來的弧線就是斐波那契螺旋線。
斐波那契數(shù)列（FibonacciSequence），又稱為黃金分割數(shù)列。在數(shù)學上，斐波那契數(shù)列是以遞歸的方法來定義：
F0=1
F1=1
Fn=Fn-1+Fn-2
△ 符合斐波那契螺旋線設計的Twitter logo
以64px為一個單位，即a=64px。那么大正方形的邊長的一半=8a，大圓半徑=7a，中圓半徑=4.25a，小圓半徑=3a。 8a/(8a-3a)=1.6 小圓與大正方形接近黃金比 7a/4.25a≈1.647 中圓與大圓接近黃金比 4.25a/3a≈1.417 中圓與小圓比例接近√2 整個柵格系統(tǒng)中的尺寸都是通過黃金比例互相聯(lián)系的。
△ 內部符合斐波那契螺旋線和黃金分割的IOS啟動圖標骨骼
iOS的啟動圖標非常重要。并且蘋果規(guī)定所有應用程序的啟動圖標都必須是圓角正方形作為圖標背板。這個背板也給我們了一些參考線，蘋果使用黃金分割和斐波那契螺旋線將畫面分割為若干部分。如果我們繪制啟動圖標時可以貼合這些參考線。8a/(8a-3a)=1.6 小圓與大正方形接近黃金比7a/4.25a≈1.647 ，中圓與大圓接近黃金比，4.25a/3a≈1.417 中圓與小圓比例接近√2。
平面與版式的設計知識涵蓋了字體的選擇、圖片的選擇、平面構成基礎、排版的CRAP原則、柵格化設計、黃金比例等多個知識點。如果我們現(xiàn)在接到一個需求，可以首先將內容放進畫面并排列好重要性、然后選擇合適氣質的字體和圖片、使用CRAP的排版原則將信息排成合理的順序、利用柵格化和黃金比例讓畫面更加科學、最后如果發(fā)現(xiàn)畫面比較空可以加入幾何形裝飾。怎么樣，思路清晰了嗎？平面與版式知識背后是人類讀取信息幾千年來形成的習慣以及現(xiàn)代社會約定俗成的閱讀方式和心理學等，要想成為一個優(yōu)秀的設計師，我們還需要進一步地了解設計背后的原理以及表達信息的多種方法。希望本篇文章能夠對您的平面與版式設計有所啟迪。
可拓展性原則是我自己瞎起的一個名字，高興的話你說彈性原則也行。主要意思是指界面設計要足夠的靈活，具有彈性，以滿足將來可能出現(xiàn)的場景。我第一次考慮這個問題是從去年7月份開始，當時接到領導的一個臨時需求，要給直投項目增加一個到期查詢的功能。因為原來的界面設計比較死板，所以突然加一個新功能導致整個布局都被打亂了，結果做的很不理想。當時我就希望可以找到一個方法來應對領導這種突如其來的需求。
產(chǎn)品設計的可拓展性就是為了應對將來未知的改變。改變來自于功能的改變，因為產(chǎn)品是由一個個功能組成的。功能的改變可以分為兩類：數(shù)量的改變和狀態(tài)的改變。當然這里不涉及到具體的功能設計，只是探討功能入口的展示。
數(shù)量的改變指的是功能的增加，刪減與合并。多數(shù)是指新功能的增加，這就要求我們在界面（布局）設計中要給將來可能添加的新功能預留坑位。在哪里預留坑位？又給哪些功能預留呢？這里我就例舉最常見的兩種界面布局(導航)樣式來說：宮格式布局和列表式布局。
不知道大家有沒有注意到一個現(xiàn)象：一級頁面中主要用宮格式布局，而二級，三級頁面多數(shù)用列表式布局。這主要是因為一級頁面是產(chǎn)品的門戶和臉面，而且又多屬于功能的聚合頁，特別是首頁，這就要求一級頁面在展示足夠多入口的同時還要兼顧視覺吸引力。而以icon，插畫，圖像為主要表現(xiàn)形式的宮格式布局在視覺設計上更容易出彩。特別是icon，在相同的空間里，可以展示更多的入口。
但是其缺點就是可拓展性差，不管是2*5還是3*4，你如果想單獨新增一個功能，界面就會失衡。當然我們可以給用戶提供分頁，這就意味著有些功能需要用戶滑動才能看到，具有一定的風險。
還有一種方法就是提供全部按鈕，用戶點擊可以查看全部功能。
列表式布局就沒有這方面的顧慮，它可以在不打破界面布局的情況下增加新功能入口，但是它的缺點在于可展示的入口太少了。宮格式布局一屏可以展示20多個入口，而列表式布局只能達到其一半的水平。
這也是經(jīng)常困擾設計師的一個問題，因為數(shù)據(jù)反饋一個頁面超過一屏往下內容的點擊量是急劇下滑的，所以一般的一級頁面都不會設計的很長。如何在有限的空間里展示足夠多的入口呢？
沒有什么是可以難倒我們設計師的，最近我看到一些產(chǎn)品在底部欄tab里動起了心思。以蘇寧易購為例，當你點擊進入「發(fā)現(xiàn)」，tab會變成「直播大廳」；點擊進入「首頁」，tab會變成「猜你喜歡」。所以雖然只有5個坑位但是塞進了7個tab，這是一個很好的思路。
還有在京東首頁中，用戶下拉會進入520專屬活動頁面。同樣的還有微信，用戶下拉直接顯示你最近打開的小程序。但是目前來說，大多數(shù)用戶還認為下拉只能刷新界面，對于「下拉發(fā)現(xiàn)新功能」足夠的缺乏認知。這樣的入口可以吸引多少的流量還有待檢驗。
對于一級頁面我還有一個建議：千萬不要隨意把功能入口放在頂部欄上。因為對于一些小功能的迭代，入口放在哪里都一樣，用戶看得到很好，看不到也無所謂。但是如果要上線一些層級比較高的功能，又不想打亂界面的原有布局，最好放到頂部欄上。特別是你的界面中如果還沒有搜索、城市定位、分享、篩選、通知等全局功能，一定要把頂部欄的位置空出來。文章開頭我說的「到期查詢」其實就屬于篩選功能。
上面也說了，本文所提到的可拓展性指的是入口的可拓展性。那么入口在狀態(tài)上的變化可以分為外部狀態(tài)變化和內部狀態(tài)變化。
外部狀態(tài)變化主要說的產(chǎn)品層面的變化，針對的是C端產(chǎn)品。對C端產(chǎn)品來說，定期組織營銷活動來拉新肯定是必不可少的。這種情況下我們需要對界面的元素進行處理使其來適應不同的活動氛圍。從這個方面來說，我們可以發(fā)現(xiàn)為什么宮格式布局更容易受到各大電商平臺的青睞。因為它可以根據(jù)不同的活動配置一套完全不同的icon，靈活多變。這種狀態(tài)上的百變來打造營銷氛圍的能力是列表式布局所不具備的。
列表式布局可以向用戶傳遞更多的信息，更能表現(xiàn)內部狀態(tài)的變化。以下圖為例，用戶可以知道自己還有一張優(yōu)惠券沒有使用，知道自己本月還有126元沒還。而宮格式布局礙于空間，很難向用戶展示過多的信息。
以上方的日歷為例，近期做了一個拆紅包活動，用以icon為主的宮格布局只能加一個「拆紅包」的角標。如果采用了列表式布局，可以直接展示金額，更能起到刺激用戶的作用。
寫分析總結寫到現(xiàn)在讀者越來越多，所以愈發(fā)擔心自己寫的不好會誤導別人。對于設計來說，無所謂對錯，只有合適和不合適。就像上面提到的兩種布局方式，在列表式布局中你可以隨意添加新功能，但是礙于空間，可添加的功能數(shù)目也不會太多；宮格式布局倒是不怕入口放不下，但是會引起界面的失衡。設計師的能力就體現(xiàn)在收集用戶數(shù)據(jù)，分析具體場景，去思考得出最合理布局樣式。不要拘泥于解決方案，因為解決方案有很多，我們要學習的是解決方案中所體現(xiàn)的思維方式和過程。
以上就是我針對產(chǎn)品設計中可拓展性原則的一個簡單分析總結，歡迎大家留言討論。
作為互聯(lián)網(wǎng)的用戶體驗實踐者-交互設計師，大大小小經(jīng)歷過很多不同種類不同維度的項目，比如成熟期產(chǎn)品的常規(guī)迭代項目（如社交指數(shù)、校園問答、空間社交周報、Feeds新增禮物等），這時我是哪里需要就在那里的問題解決者；也會和產(chǎn)品一起探索新的產(chǎn)品方向，經(jīng)歷從0到1的探索型項目（如視界、AR相機、ABCmouse等），此時我是主動探索的問題解決者。近兩年都在思考用戶體驗設計師該如何在互聯(lián)網(wǎng)團隊中發(fā)揮設計最大價值，最終達到“解決用戶問題，創(chuàng)造美好產(chǎn)品體驗”的終極目標。結合自己的用戶體驗設計從業(yè)經(jīng)歷，我嘗試給設計做個定義：
設計就是從已知探索未知的過程，是一個不斷解決問題的過程。
具體來講，就是從發(fā)現(xiàn)問題/機會點后，通過“How”等各種方法手段去解決問題/機會點的整個過程。
而解決問題/機會點的各種方法手段“How”就至關重要，在尋求“How”的過程中，受到MIT媒體實驗室教授Neri Oxman文章《Design and Science - Krebs Cycle of Creativity》一文啟發(fā)，Neri Oxman在《Design and Science - Krebs Cycle of Creativity》中提出的類似克雷布斯循環(huán)的創(chuàng)造力的克氏循環(huán)（KCC），創(chuàng)造性的將人類的創(chuàng)造力四種模式-科學、工程、設計和藝術，形成創(chuàng)意循環(huán)的地圖假設并進行了相應解讀，闡釋了學科之間不再是割裂離散的孤島這一命題。感興趣的小伙伴可以使用傳送門：
英文版原文：《Age of Entanglement》https://jods.mitpress.mit.edu/pub/ageofentanglement。
中文翻譯版本之【設計讀本】媒體實驗室教授Neri Oxman文章《糾纏時代》，揭示創(chuàng)意循環(huán)在科學、工程、設計與藝術中深層關系》：https://zhuanlan.zhihu.com/p/27951549。
拓展閱讀：《Design and Science byJoichi Ito》https://jods.mitpress.mit.edu/pub/designandscience。
區(qū)別于“點對點”的解決問題，為了從更高角度更好的解決問題，類比克雷布斯循環(huán)和創(chuàng)造力的克氏循環(huán)（KCC），將“發(fā)現(xiàn)-解決”問題/機會點這一過程整體系統(tǒng)化，嘗試提出系統(tǒng)性解決問題之 < 思考-行動 > 模型-Krebs Cycle of Design。
系統(tǒng)性解決問題之 < 思考-行動 > 模型主要包含以下8個階段：發(fā)現(xiàn)問題/機會點- 系統(tǒng)性思考- 判斷問題/機會點- 挖掘行動- 挖掘出真正的問題/機會點 - 解決行動 - 構建更好的產(chǎn)品（1小步）- 迭代進化思考 - 重新發(fā)現(xiàn)問題/機會點。
前文講述了系統(tǒng)性解決問題之 < 思考-行動 > 模型-Krebs Cycle of Design，接下來通過具體的項目，說明如何通過“系統(tǒng)性解決問題之 < 思考-行動 > 模型”全局解決問題，這里采用一個從需求引發(fā)的未知產(chǎn)品探索，以QQ空間基礎Feeds信息流產(chǎn)品為例。
作為騰訊典型社交產(chǎn)品，QQ空間已經(jīng)12年了，那么對于12年的空間Feeds信息流產(chǎn)品日常需求，整體來講具有以下3個特點：需求量多（面對多個產(chǎn)品不斷快速迭代）、需求類型雜、需求內容小。
基于這樣一個前提，為了更好的解決問題，僅僅只做需求是不夠的，需要設計師發(fā)揮產(chǎn)品主人翁意識，這樣首先我的角色定位無形中發(fā)生了變化，從單純的設計師（產(chǎn)品需求轉換者）轉變?yōu)楫a(chǎn)品設計師（產(chǎn)品需求洞察者）。
角色的變化，進一步帶來了解決問題思維模式的變化，從之前為單一用戶需求而設計的線性解決問題思維模式轉變?yōu)閺狞c觸發(fā)的系統(tǒng)性解決問題思維模式。
總的來講系統(tǒng)性解決問題之 < 思考-行動 > 模型，以空間基礎Feeds信息流產(chǎn)品為例。主要有以下幾個階段，并且每一個階段都是上一個階段的自然轉化。
1. 提出產(chǎn)品需求/機會點。
2. 基于產(chǎn)品需求/機會點，從點觸發(fā)，通過系統(tǒng)性思考，全面的思考分析。
3. 基于系統(tǒng)性思考，判斷需求在系統(tǒng)中是否有價值。
4. 判斷有價值后，繼續(xù)深入挖掘更多的問題和機會點。
5. 綜合判斷挖掘真正的問題/機會點。
6. 確定真正的問題/機會點后，針對性的進行解決行動。
7. 階段性的解決行動后，就向構建一個更好的產(chǎn)品邁出了一小步。
8. 構建更好的產(chǎn)品后，為了產(chǎn)品后續(xù)更好發(fā)展，進入新一輪的迭代進化思考。
9. 迭代進化思考后，就開始了新一輪的系統(tǒng)性解決問題，構建越來越好的產(chǎn)品和更加美好的體驗。
在互聯(lián)網(wǎng)公司，尤其是互聯(lián)網(wǎng)產(chǎn)品比較成熟時（如QQ空間Feeds信息流產(chǎn)品），設計師通常扮演者產(chǎn)品需求轉換者的角色，在常規(guī)迭代項目中面對產(chǎn)品經(jīng)理一個又一個的小點需求，很多設計師都是基于點對點的需求進行功能細化，有些甚至可以直接開始詳細設計；而系統(tǒng)性解決問題思考行動模型則建議“將產(chǎn)品需求直接轉換為詳細設計”的這一類設計師，在日常常規(guī)需求之外，可以跳出點對點的小需求，更加系統(tǒng)的思考需求&探索問題和機會點。
從已知的需求、問題和機會點出發(fā)，從點觸發(fā)設計師全局思考產(chǎn)品。通過系統(tǒng)性思考，了解產(chǎn)品整體系統(tǒng)，該部分思考的維度和方法，通常從商業(yè)、產(chǎn)品、項目、用戶等多角度思考，如商業(yè)工具（理解商業(yè)的商業(yè)模式畫布）、產(chǎn)品工具（了解行業(yè)位置的SWOT分析法、發(fā)散創(chuàng)意的搜尋領域圖和思維導圖）、產(chǎn)品工具（理解階段目標的目標分解圖）、用戶研究工具（量化理解用戶的問卷和訪談、定性用戶研究的可用性測試&焦點小組、模擬分析場景的體驗地圖）。而以QQ空間Feeds信息流產(chǎn)品為例，闡述如何更全局的系統(tǒng)性思考產(chǎn)品。
系統(tǒng)性思考第1步：從日常繁瑣的小需求中跳出，從資源輸入-內容輸出維度，全局的了解空間的整體產(chǎn)品體系，比如核心UGC業(yè)務、運營相關業(yè)務、分支業(yè)務、廣告業(yè)務等。
系統(tǒng)性思考第2步：基于資源輸入-內容輸出維度全局了解產(chǎn)品體系后，針對Feeds信息流模塊，梳理出資源輸入類型和各個類型所包含內容，以及觸達用戶的內容輸出Feeds類型以及包含內容信息，分析輸入輸出不同對象關系，明確空間Feeds信息流的空間樞紐作用，為下一步判斷需求/問題/機會點的價值提供依據(jù)。
基于系統(tǒng)性思考，分析判斷需求在系統(tǒng)中是否有價值。對于QQ空間Feeds信息流產(chǎn)品，通過產(chǎn)品的系統(tǒng)性思考，會發(fā)現(xiàn)Feeds基于空間的樞紐作用，連接空間各個業(yè)務內容，并以Feeds產(chǎn)品形態(tài)分發(fā)給UGC和PGC用戶。因此Feeds信息流的產(chǎn)品設計優(yōu)化對于整個空間而言，都有極大的商業(yè)和用戶價值。
判斷問題/機會點有價值后，繼續(xù)縱向深入挖掘更多的問題和機會點，該部分思考的維度和方法可從需求挖掘和設計調研/用戶研究兩個維度，從產(chǎn)品、用戶等多角度思考，如現(xiàn)有問題挖掘的日常積累法、數(shù)據(jù)定量分析法、用戶調研訪談等定性研究、頭腦風暴等涌現(xiàn)挖掘法、用戶核心行為的全鏈路分析法等。下面以QQ空間Feeds信息流產(chǎn)品，舉例如何深入進行挖掘行動。
挖掘行動第1步：從項目團隊內部（產(chǎn)品&開發(fā)&設計師）收集現(xiàn)有痛點問題，并將問題梳理歸類整理，確定內部收集痛點問題重要程度優(yōu)先級。
挖掘行動第2步：從用戶“發(fā)表-瀏覽-互動”的Feeds信息流相關的核心行為路徑切入，收集用戶/專家反饋，并分析確定用戶核心行為路徑哪些問題與Feeds相關。
挖掘行動后，就可以從產(chǎn)品內部、用戶本身等多維度得到N個問題和機會點，通過對問題和機會點整理判斷分析，得出真正的問題和機會點。如針對空間Feeds信息流產(chǎn)品真正的問題點和機會點有2個：Feeds缺失系統(tǒng)化、Feeds關鍵觸點暴露的用戶問題。
確定真正的問題/機會點后，針對性的進行解決行動。不同的問題和機會點，可根據(jù)需要采用適合的解決行動。下面僅以QQ空間Feeds信息流產(chǎn)品，舉例如何進行解決行動。
解決行動第1步：針對有多個問題和機會點的情況，首先需要明確解決問題的優(yōu)先級，這里可以參考評估優(yōu)先級的方法-知覺圖、C-BOX圖表（來自代爾夫特設計指南《設計方法與策略》），定義問題管理四象限，從“重要程度+緊急程度”兩個維度分析確定解決問題優(yōu)先級，其中橫坐標軸代表緊急程度，從左到右緊急程度降低；縱坐標代表重要程度，從上到下重要程度降低。正所謂建造房子地基很重要，F(xiàn)eeds缺失系統(tǒng)化代表Feeds信息流的地基不穩(wěn)，在地基打牢之后我們可以有針對性的解決用戶關鍵觸點暴露的問題，分優(yōu)先級逐步推進解決問題。因此形成了以解決“Feeds缺失系統(tǒng)化”為基礎，有節(jié)奏的探索解決Feeds關鍵觸點暴露問題的解決策略。
解決行動第2步：解決“Feeds缺失系統(tǒng)化”，即Feeds設計系統(tǒng)化，也就是將整個Feeds產(chǎn)品體系化，進行設計的規(guī)范化和組件化，并在設計層面和開發(fā)層面統(tǒng)一共享資源，并應用到產(chǎn)品的后續(xù)迭代中。而設計系統(tǒng)化的典型代表Material Design，就通過從真實世界觀察到數(shù)字世界模擬，構建了一個數(shù)字世界觀，包含設計理念、設計原則、設計元素（如輸入框、按鈕、文字等控件/組件）、設計模式（如空狀態(tài)、手勢、搜索等）、工具等內容。 關于設計系統(tǒng)化（design system感興趣的小伙伴可以查看《design systems》一書，購買書籍鏈接：https://www.smashingmagazine.com/design-systems-book/。
Feeds設計系統(tǒng)化主要有以下3個階段：明確設計系統(tǒng)化目標 - 明確設計系統(tǒng)化思路 - 設計系統(tǒng)化過程。
首先是明確設計系統(tǒng)化目標，明確預期目標有助于我們在項目后期更好的評估系統(tǒng)化設計的價值和效果，空間Feeds信息流產(chǎn)品主要從3個維度明確目標：規(guī)范化（形成Feeds基礎設計體系，保障Feeds整體設計統(tǒng)一性）、提升效率（可以快速復用，保質保量的支撐業(yè)務需求的快速迭代）、可持續(xù)原則（一句話就是跟得上潮流，不斷的迭代進化）。
其次是是明確設計系統(tǒng)化思路，明確了目標之后，需要定義如何進行Feeds設計系統(tǒng)化的思路，主要有以下4個階段：場景類目梳理- 抽象框架- 填充細節(jié)內容 - 建立設計規(guī)范。
在明確了設計系統(tǒng)化思路后，依據(jù)思路，通過以下4個階段一步一步構建Feeds設計系統(tǒng)化：場景類目梳理- 抽象框架- 填充細節(jié)內容 - 建立設計規(guī)范。
設計系統(tǒng)化第1步：場景類目梳理，從場景出發(fā)歸類所有的Feeds類型。
設計系統(tǒng)化第2步：抽象框架，首先將所有Feeds類型每個的結構模塊化，其次通過“類比-分析-聚類”歸類同類型框架，最后設定Feeds框架應用策略（不同框架的每個模塊可采用LEGO自由組合策略）。
設計系統(tǒng)化第3步：填充細節(jié)內容，補充A/B框架類型中的填充元素（控件/組件等內容）。
設計系統(tǒng)化第4步：建立Feeds設計規(guī)范，提升產(chǎn)品設計效率，為后續(xù)設計夯實基礎。
Feeds設計系統(tǒng)化項目，在產(chǎn)品設計內部也得到了廣泛好評，一定程度上提升了產(chǎn)品設計效率。
解決行動第3步：有節(jié)奏的探索解決Feeds關鍵觸點暴露問題，也就是Feeds設計有亮點。設計有亮點的探索聚焦用戶的核心使用路徑，在關鍵觸點上發(fā)現(xiàn)亮點設計機會點。
首先是聚焦用戶核心行為路徑，從用戶觸點切入，深挖不同關鍵觸點，收集用戶/專家的反饋，并針對用戶的關鍵觸點問題探索出相應的解決方案。
其次在有了這么多的亮點解決方案后，先做哪一個再做哪一個，我們需要明確亮點設計功能實踐優(yōu)先級。此時就需要回歸產(chǎn)品目標用戶群，深度探索目標用戶的特性，比如QQ空間的使用用戶群體為95后，他們具有“創(chuàng)造、個性、有趣、表達”等特性，他們愛玩的產(chǎn)品有“彈幕、變聲語音、斗圖、鬼畜視頻”，這些產(chǎn)品都具有“DIY、個性互動、滿足成就感”等心理因素，因此針對8個Feeds亮點解決方案，優(yōu)先在互動層面實踐快評表情。
接下來就是如何進行快評表情產(chǎn)品設計，首先明確快評表情產(chǎn)品設計思路，主要有以下4個階段：定義產(chǎn)品需求-明確產(chǎn)品目標-探索用戶趣味表達心智模型-定義具體的解決策略
在明確了產(chǎn)品設計思路后，依據(jù)思路，通過以下4個階段逐步推進快評表情亮點化設計：定義產(chǎn)品需求-明確產(chǎn)品目標-探索用戶趣味表達心智模型-定義具體的解決策略。
亮點設計第1步：定義產(chǎn)品需求，需要明確正在設計的產(chǎn)品需求到底是什么？該需求要解決什么問題，或者滿足了用戶哪一方面的訴求；比如在QQ空間快評表情產(chǎn)品設計中，由于快評表情可能存在空間多個用戶場景（如Feeds評論、發(fā)表Feeds、直播場景等）。為了快速上線快評表情，驗證其可促進用戶活躍度，首先確定了快評表情的具體產(chǎn)品需求，將其使用場景縮小為優(yōu)化Feeds評論表情功能。
亮點設計第2步：明確產(chǎn)品設計目標，確定了產(chǎn)品做什么后，為了更好的評估衡量設計效果，我們需要在具體設計前先定義設計預期目標。如快評表情產(chǎn)品需求中，在具體設計之前，明確了產(chǎn)品設計預期目標，如增加評論趣味性、增強用戶互動欲望、提升用戶活躍度等。
亮點設計第3步：探索用戶趣味表達心智模型，明確了產(chǎn)品設計目標后，我們需要更深層次的挖掘用戶使用產(chǎn)品心理動機，從而探索用戶的一個使用心智模型，心智模型有助于我們在更高更深層面讓用戶使用產(chǎn)品過程中超出預期。如快評表情設計中，基于目標用戶探索用戶互動心智模型，發(fā)現(xiàn)了以用戶互動訴求為基礎，滿足用戶個性化、專屬感、控制感的深層心理動機，從而可以讓用戶達到最終的成就感，建立起用戶與產(chǎn)品的情感聯(lián)系。
亮點設計第4步：定義具體的解決策略，分析了目標用戶特性和動機后，可以嘗試定義“如何做”的產(chǎn)品設計策略，搭建/聚焦用戶使用核心路徑，在核心路徑上明確用戶關鍵觸點，并基于核心路徑形成關鍵頁面，并最后給出用戶超越預期的產(chǎn)品體驗。如快評表情設計中，由于是原有的評論表情優(yōu)化，因此在定義解決策略時，首先聚焦評論表情的核心路徑，基于核心路徑尋求機會點，并且根據(jù)機會點搭建全新的快評表情使用路徑。
定義了具體的設計解決策略后，就進入詳細的交互設計階段，此處僅由于內容篇幅太長，僅做簡要的一些核心點說明。主要有3點：
1. 聚焦用戶評論核心路徑，找到評論表情關鍵觸點，探索設計機會點。
2. 基于評論核心路徑機會點，新增用戶關鍵觸點，加強用戶與產(chǎn)品、用戶與用戶之間互動反饋。
3. 搭建用戶使用新路徑，通過主動觸發(fā)和被動觸發(fā)機制，強化推薦互動。
階段性的解決行動后，比如進行了Feeds設計系統(tǒng)化打好根基，探索了快評表情的亮點設計后，已經(jīng)向構建一個更好的產(chǎn)品邁出了一小步。無論從產(chǎn)品內部評價和上線后數(shù)據(jù)驗證結果來看，均達到當時的一個小小目標。如產(chǎn)品數(shù)據(jù)驗證部分方法感興趣的，可查看“用戶行為數(shù)據(jù)分析”等方法。
正所謂“潮流是在不斷發(fā)展變化的”，互聯(lián)網(wǎng)圈的發(fā)展更是日新月異，因此為了后續(xù)產(chǎn)品發(fā)展的更好，需要進入新一輪的迭代進化思考。如果設計師在橫向有一個屬于自己的設計中心（或者設計團隊），可以定期挖掘討論創(chuàng)意想法，沉淀為創(chuàng)意資源庫，從而更好的發(fā)揮設計中心橫向優(yōu)勢，合力擴大影響力。如QQ空間內部就有Qzone idea的創(chuàng)意小組，定期輸出創(chuàng)意想法，討論，并向上匯報推動產(chǎn)品側落地。
總的來講，系統(tǒng)化解決問題<思考-行動>模型可以你“找對事 & 做對事”，“如何做設計的亮點深挖四部曲”具體化做對事的過程，兩者相輔相成，合力打造更美好的產(chǎn)品體驗。
各公司開發(fā)成功產(chǎn)品的方式已經(jīng)在根本上發(fā)生了變化。智能手機、社交網(wǎng)絡或云計算等新技術使蘋果、谷歌或亞馬孫等科技巨頭在大約20年內成為最有價值的公司。
這是我的第一篇系列文章“精益創(chuàng)新——如何在今天開發(fā)成功的產(chǎn)品”。這是多年來創(chuàng)新的轉變和產(chǎn)品開發(fā)的方法論。
所有這些變化的發(fā)生是由于人們消費產(chǎn)品的方式發(fā)生了轉變而造成。為了迎合用戶行為和對產(chǎn)品期待的變化，科技公司必須將產(chǎn)品方向轉變?yōu)楦`活、更敏捷、特別是以用戶為中心上，即從瀑布流到敏捷設計再到精益設計。
雖然現(xiàn)在仍然有95%的大型組織在用瀑布模型開發(fā)新產(chǎn)品，但行業(yè)領頭公司已經(jīng)在率先使用精益設計作為方法了。
瀑布模型是序列順序的處理方法，進程就像瀑布一樣穩(wěn)定地推向目標。它要求項目產(chǎn)出全面的計劃并提前開發(fā)。
瀑布過程
由于前期設計和分析花費了大量的時間和精力，設計變更會使成本變得更高，尤其是設計后階段。每個設計節(jié)點都有清晰的目標，達成后將進入下一個階段。這樣防止了客戶在最后發(fā)布前評論和反饋。即使征求了建議，項目在接受反饋方面也不那么靈活。雖然瀑布模型是一種不那么靈活的方法，但它對需要執(zhí)行“計劃”的團隊（在預算范圍內）更有益。
隨著互聯(lián)網(wǎng)的興起，瀑布模型漫長的開發(fā)周期已經(jīng)不再能夠提前規(guī)劃人們的需求。同時，隨著電子商務的全球化和新經(jīng)濟模式的到來引發(fā)了更多的競爭。公司在開發(fā)產(chǎn)品的周期中不得不對市場趨勢作出反應，因此，需要一個靈活的產(chǎn)品開發(fā)步驟。
“敏捷”指的是由17個軟件工程師發(fā)布于2001年2月的一份宣言，他們必須就輕量開發(fā)方法進行討論。它基于迭代的方法，而不是像瀑布模型一樣在項目之初就進行深入的規(guī)劃。開發(fā)團隊為了保證首先完成最重要的任務，他們會不斷調整項目的工作范圍。
每次迭代的目的是為了實現(xiàn)一個可交付的產(chǎn)品。隨著來自終端用戶的持續(xù)反饋得到鼓勵，敏捷開發(fā)能對不斷變化的需求作出反應，因為隨著時間推移它們都是被需要的。因此，在管理和減少需求變化的風險方面，這些方法對項目來說是正確的選擇。
我們都知道以人為中心的設計，設計思維作為一個概念已經(jīng)存在一段時間了，只是名稱不同（以用戶為中心的設計、服務設計）。設計思維因得益于它解決問題的技巧和科學的方法而成為時尚。設計思維過程和方法的普及與2001年的IDEO有關。
“設計思維是一種以人為本的創(chuàng)新方法，它從設計師工具箱里汲取了靈感，將用戶的需求、技術的可能性和商業(yè)成功的要求結合起來。”
湯姆布朗，IDEO創(chuàng)始人。
“設計師工具箱”是一個與設計師的方法和過程有關的應用——包括思考創(chuàng)造力、靈活的創(chuàng)意以及對用戶行為和需求的清晰理解。設計思維是一個由4個基礎階段組成的結構化流程。
從目標群體的發(fā)現(xiàn)階段開始，所確定的需求和問題將被合成一些主要的見解。這些見解是概念階段的基礎，這個階段的目標是產(chǎn)出許多想法，而最有希望的想法將被作為原型進行開發(fā)。原型測試是最后一個階段，這個階段需要確保解決方案滿足目標群體的需求。
設計思維之所以產(chǎn)生，是因為大公司缺乏創(chuàng)新能力，無法開發(fā)出能滿足客戶需求和客戶問題的創(chuàng)新產(chǎn)品。如今，大多數(shù)的公司都使用分析思維來作為運營方式。這種分析思維阻礙了創(chuàng)造性（打破常規(guī)）思維的發(fā)展，而這種創(chuàng)造性思維是破壞性創(chuàng)新所必需的。
這種創(chuàng)造性，特別是大膽的思考（有些稱為“瘋狂思考”）與設計概念有關。為了創(chuàng)新，企業(yè)必須具備設計能力。為了設計，一個組織需要內部融合設計，以孕育出一種培養(yǎng)創(chuàng)造思維的文化。
設計思維的顯著差異在于將用戶置于每項活動的中心。此外，以人為本的設計強調體驗勝于效率，因為良好的體驗是用戶與產(chǎn)品互動的動力。
2011年，隨著Eric Ries《精益創(chuàng)業(yè)》這本書的出版，創(chuàng)新和產(chǎn)品開發(fā)實踐已經(jīng)向精益方向發(fā)展。精益創(chuàng)業(yè)的目標是避免開發(fā)那些沒人需要的產(chǎn)品或服務。精益過程包含用戶反饋和產(chǎn)品早期實驗。
精益創(chuàng)新以“失敗來了成功還會遠嗎？”的哲學而聞名。開發(fā)者接受這種失敗，因為他們獲得突破性成功前是要需要不斷學習的。
精益方法也常被稱為“客戶開發(fā)”。它的目標是在搭建最終產(chǎn)品前，找出用戶想要什么。精益的原則是建立你正在試著測試的假設和設想，而你通過在這些實驗的學習，將會取得進步。
數(shù)字化和巨大的變革速度不再允許公司在不考慮客戶需求的情況下簡單地生產(chǎn)產(chǎn)品。在過去，向客戶提供錯誤的產(chǎn)品只會導致項目失敗。而今天，持續(xù)不能交付客戶所需的產(chǎn)品，將導致整個商業(yè)模式的失敗。諾基亞或柯達只是這里提到的兩個最著名的失敗案例。
智能手機、云計算和開源等技術使得產(chǎn)品的開發(fā)速度更快、成本更低。開發(fā)產(chǎn)品或進入市場的的門檻比以往任何時候都要低。這意味今天有更多的全球競爭。公司需要專注于了解用戶和他們想要什么?？蛻艨梢院苋菀椎剞D向其它產(chǎn)品。品牌忠誠度對消費者決策的影響逐年下降。
精益和設計思維都是以客戶為中心、基于迭代的方法?？蛻魠⑴c和反饋是取得進展的動力。精益創(chuàng)新的關鍵不同之處在于，它在圍繞產(chǎn)品考慮整個商業(yè)模式時更進一步。
亞馬遜成為電子商務的領導者的原因之一是他們對客戶服務的堅定承諾。雖然他們沒有靠這個掙過一分錢，但是卻幫亞馬遜獲得了客戶的信任和忠誠。如今，成功的公司區(qū)別于他們的商業(yè)模式，而不是他們的產(chǎn)品供應。
在新世界中，成功的公司將有一個共同點：對用戶行為和需求的超常理解。隨著行為和需求的快速變化，確保建立客戶需求的唯一途徑就是讓用戶持續(xù)的參與到項目中來。準確的用戶理解是長期商業(yè)模式成功的基石。
雖然設計思維，精益設計和敏捷開發(fā)可以單獨使用，但是最好的結果來自這些方法的結合。設計思維有助于深入了解客戶的需求和行為，而敏捷開發(fā)則有助于地開發(fā)和交付解決方案，精益方法的實踐幫助我們在用戶參與的假設測試中可以獲得更直接的驗證和學習。
當持續(xù)使用“開發(fā)–測試–學習”這個模式循環(huán)，就可以逐步接近一個成功的產(chǎn)品和有率的商業(yè)模式。
每天打開手機，各式各樣的信息紛至沓來，每個 App 每個頁面都有好多話要說。當信息匯集在一起的時候，如何能讓用戶一打開頁面就能輕松理解各個信息元素之間的關系與差異呢？這就要靠我們設計師在設計之初構建合理的視覺層次了。一個頁面的信息層級是不是清晰明了，很大程度上影響到用戶的信息獲取效率和使用體驗。
在平面和網(wǎng)頁設計中，視覺層次一般分為三層：主層（Primary）、副層（Secondary）和三層（Tertiary）。其中主層一般是指頭條標題等核心信息，也是要讓用戶第一眼就注意到的信息。副層可以是小標題等信息，展示出主要內容與提綱。最后的三層一般由正文或其他額外信息構成，展示全部的內容，可以用較小的字號。
△ 圖片來自網(wǎng)絡
不過當我們在設計移動端頁面的時候，因為屏幕尺寸的限制，有時候需要酌情減少頁面的層級，這樣才能讓信息不會過于繁雜。
一般一個頁面會根據(jù)功能分為多個模塊，下面我們就從「模塊內」和「模塊之間」兩個角度來談談如何構建合理的視覺層次。
我們所說的「模塊」指的是什么呢？可以是一張卡片里面的內容，也可以是一個信息列表等等，總而言之是一個信息組。當我們拿到需求的時候，應該理解每個信息組里面的每條信息的價值，并且給他們分一個類。
比如有時候，PM 同學跑過來說：「我想加個大按鈕」，「不想讓用戶注意到刪除功能，但是一定要有」 ，或者「這次就想試一試，展示了這條信息點擊率會不會漲」 ，又或是「這條信息展不展示都行，你設計的時候自己看吧……」 好好好，需求我都懂，那么該如何分類呢？
四象限法則相信大家都聽說過，那么我們就改編一下這個法則，給每個信息組中的信息按「重要——不重要」「必要——不必要」來分個類吧。
面對又重要又必要的信息還等什么，一定要大要明顯，讓用戶第一眼看到。
重要卻不必要的信息，一般是從產(chǎn)品或流程本身來講不是一定要有的信息，但是因為某種原因想要突顯給用戶，比如在信用卡的產(chǎn)品列表中加入每張卡的推薦理由，或者在餐廳列表中展示某某名人去過這家店……這些信息在列表中不是必須有的，但是對于引導用戶判斷又十分的重要，所以我們可以次一級的來展示，要讓用戶可以注意到，但也不能搶了風頭。
哪種信息是必要但不重要的呢？比如一個活動彈窗的關閉按鈕，一個訂單的刪除功能，一條免責聲明等等，我們不希望用戶注意到他們，但是這些功能又不得不存在，那么就要弱化展示這些信息。
不必要又不重要的信息，一般情況是要去掉的，除非在設計中信息太少了空蕩蕩的，為了排版美觀才會把這種邊緣信息留下占位。
接下來，當我們整理好信息層級之后，要靠什么手段來展示這些層級呢？答案是加大對比。
1. 大小
對比的第一步就是大小的對比，在大家的認知中，大的東西比小的東西更顯眼、更重要。用戶會自然而然地關注到尺寸較大的文本和尺寸較大的圖，比如下圖中一張足夠大的信用卡卡面圖片，一秒吸引目光。再比如頁面中的大標題，都是這樣的效果。
△ 截圖來自查查公積金
在內容列表中，標題名字類的信息一般會使用14-17dp左右，補充說明內容一般使用11-12dp左右，具體的使用情況要根據(jù)信息的多少、信息的重要程度、上下對比等情況來進行具體的設計。
△ 圖片來自融360、微信
2. 重量
有時候由于空間的限制，字號不能再大了？字號大了也沒拉開層次？試試增加字重量吧。iOS&Android 由于字體不同，加粗的效果也不同，請酌情增減。
3. 顏色
顏色對于用戶的感知有著巨大的影響。所以在進行視覺層次構建的時候，不同的顏色可以輕松構成層次結構，強烈的顏色比如紅色、橙色都很容易引人注意。白色和淺灰通?？梢杂脕碜鳛榇竺娣e的背景色，和其他的顏色構成對比。在設計的時候可以運用 App 的主色和輔助色來拉開視覺層次。
△ 圖片來自查查公積金、融360視覺規(guī)范
4. 對比
我們以上圖這個貸款列表舉一個綜合的例子，四條信息從最突出到最弱化分別標為了1、2、3、4，這幾條信息中的字號以至少6px的差值進行遞減，并且只有前兩條信息進行了加粗處理，同時顏色的選擇上也是從強到弱：
大小、重量、顏色的運用，歸根結底就是制造對比，這也是創(chuàng)建層次結構依靠的核心。一個元素和另外一個元素構成對比，才能有層次的展示他們之間重要程度上的差異，讓用戶更加容易獲取到信息。
當我們已經(jīng)合理的排布了一個模塊內的視覺層次，接下來要做的就是把多個模塊組合起來。
心理學家基于格式塔原理來檢測用戶對于元素之間關系的視覺感知，發(fā)現(xiàn)人們傾向于將視覺關系靠近的元素群視作為有關系的一組。值得說明的是，位置接近的元素，即使色彩形狀大小都不一致，但只要他們足夠靠近，都會被人們視為一組。
△ 圖片來自網(wǎng)絡
視覺層次的建立很大程度上是基于格式塔原理，所以我們要關注 UI 元素之間的靠近性。
基于這種認知，即使每個模塊之中的內容有對比有強弱，但是只要每個信息組之間的元素的距離較近，并與其他信息組之間的距離拉遠，留下足夠的留白空間，就可以清晰的將整個頁面的層次拉開。留白和元素本身之間構成的疏密對比，會更好的讓用戶注意到留白包圍下的內容。
△ 圖片來自網(wǎng)絡
現(xiàn)在很多 App 都是通過對比與留白來進行頁面中的「無形分割」，減少了很多線和塊的運用，讓頁面更為簡潔?；旧显瓌t為：文字與圖片對齊，與相關內容的間距要小于其他內容，標題要大。
△ 圖片來自 Airbnb
當字體足夠大的時候，會比小字符更有「圖形感」，更加突出，可以更明確的告訴用戶從這里開始是下一段了，字號一般在20-24dp之間，根據(jù)內容和整體風格來決定，顏色一般選擇比較深的顏色 ，必要的時候可以加粗。當其他內容都是比較小的文字的時候，欄目標題也要控制一下大小。如果圖片較多，標題就可以再大一些。
具體多大，就要在頁面和諧的基礎上多試幾次……
△ 圖片來自查查公積金
如上圖，在查查公積金 App 中，當我們設計信用卡詳情頁的時候，由于整個頁面里圖形比較突出，看起來用加粗的「辦卡禮」、「專享特權」標題更合適一些?？墒窃谕瑐€ App 的公積金詳情頁里面，整個頁面用色都比較清淡，內容都是一些文字信息，如果內容標題加粗的話會顯得比較突兀。所以綜合整個 App 的頁面風格權衡之后，還是選擇了左側沒有加粗字體的設計。
總體來講，UI 設計是沒有公式的，只能有經(jīng)驗之談和大體上的建議，很多時候都要設計師一次次的去嘗試、去對比、去感受，才能給出針對當下頁面需求最合理的層次構建與解決方案。
藍藍設計的小編 http://www.yvirxh.cn