總結(jié)：

大家在日常使用APP過(guò)程中也可以帶有目的性，發(fā)現(xiàn)一些好看的UI或是好的交互點(diǎn)可以截圖保存和思考：為什么這么設(shè)計(jì)？目的是什么？分析其優(yōu)勢(shì)之處，還可以和競(jìng)品的相似交互進(jìn)行對(duì)比，始終相信“不積跬步 無(wú)以至千里”，通過(guò)在點(diǎn)滴中慢慢積累，今后當(dāng)你遇到類似的問(wèn)題時(shí)就可以快速回憶起這些知識(shí)點(diǎn)，自然就可以運(yùn)用自如，thanks~

在這里先給大家分享一組近期APP使用過(guò)程中發(fā)現(xiàn)的UI&交互知識(shí)點(diǎn)，大家可以一起學(xué)習(xí)交流，對(duì)于個(gè)人觀點(diǎn)不認(rèn)同的可以在下面留言探討，thanks~

產(chǎn)品即場(chǎng)景，體驗(yàn)又貫穿整個(gè)產(chǎn)品~孰重孰輕早已分不清

產(chǎn)品即場(chǎng)景，而場(chǎng)景化核心要素之一的“體驗(yàn)”，是其中最重要的一項(xiàng)。

本文從體驗(yàn)出發(fā)，結(jié)合AARRR（用戶增長(zhǎng)）模型進(jìn)行闡述，其中我認(rèn)為該模型的使用必須是在產(chǎn)品搭建的場(chǎng)景下才能運(yùn)作的。而其中涉及每一步的良好體驗(yàn)剛好又反哺場(chǎng)景的完善。

從獲取-激活-留存-轉(zhuǎn)化-傳播每一個(gè)步驟中都存在內(nèi)部因素和外部因素。本文只講內(nèi)部因素，產(chǎn)品從最開(kāi)始的外部獲客，轉(zhuǎn)向產(chǎn)品內(nèi)部的使用體驗(yàn)，再轉(zhuǎn)向外部傳播的這么一個(gè)過(guò)程。

文章不是教案，更不是真理。希望大家?guī)е械难酃馊タ创恳黄恼?。畢竟思辨精神才是形成?dú)立思維的法寶。由于文章較長(zhǎng)，我會(huì)分成上下兩部分發(fā)布，進(jìn)入正文：

獲?。ˋCQUISITION）分為三個(gè)部分：

一：自然流量的獲取

自然流量的獲取，我們能干涉其中的體驗(yàn)非常少，只能打磨產(chǎn)品本身。但是自然流入的用戶一定是基于以下幾個(gè)點(diǎn)中的其中一個(gè)或多個(gè)。我們或許可以干涉體驗(yàn)前~

1.某個(gè)社會(huì)現(xiàn)象、熱點(diǎn)所引發(fā)的相關(guān)功能性需求（例如前不久滴滴司機(jī)殺害空姐事件，引發(fā)多少芳齡少女的恐慌。提高了強(qiáng)烈的安全意識(shí)，這時(shí)候你會(huì)發(fā)現(xiàn)App Store里面一款app殺了出來(lái)“怕怕”（有興趣的朋友自行下載體驗(yàn)），正是這個(gè)社會(huì)熱點(diǎn)現(xiàn)象引發(fā)的自然流量暴增。當(dāng)然也不排除產(chǎn)品借這個(gè)熱點(diǎn)營(yíng)銷自己的產(chǎn)品）

2.某個(gè)痛點(diǎn)確確實(shí)實(shí)需要解決（當(dāng)某類用戶存在某個(gè)痛點(diǎn)時(shí)，會(huì)自己通過(guò)搜索或者同類產(chǎn)品對(duì)比選擇一款產(chǎn)品進(jìn)行使用，如果你的產(chǎn)品剛好能幫助使用者解決痛點(diǎn)，那么你成功吸引了用戶。）

3.純粹進(jìn)行產(chǎn)品的體驗(yàn)（產(chǎn)品發(fā)燒友、同類競(jìng)品的體驗(yàn)人員、無(wú)意中下載的等）。我們稱為無(wú)效流量，因?yàn)檫@部分用戶一般是不太可能成為產(chǎn)品的忠實(shí)粉絲的。他沒(méi)有明確的目的、沒(méi)有明確要解決的痛點(diǎn)。

二：運(yùn)營(yíng)推廣的獲取

運(yùn)營(yíng)推廣這個(gè)名詞在互聯(lián)網(wǎng)誕生之前就已經(jīng)存在了。只是說(shuō)原來(lái)傳統(tǒng)的營(yíng)銷手段即產(chǎn)品-價(jià)格-渠道-促銷開(kāi)始逐漸失效。轉(zhuǎn)而變?yōu)閳?chǎng)景化的運(yùn)營(yíng)推廣。將推廣落實(shí)到具體的小場(chǎng)景中。

1.線上推廣

其中線上推廣包含線上營(yíng)銷活動(dòng)（營(yíng)銷活動(dòng)又分為已有話題進(jìn)行營(yíng)銷【可以選擇融入當(dāng)前的熱點(diǎn)話題類似節(jié)日、娛樂(lè)圈大事件等】&【提供話題痛點(diǎn)解決方案進(jìn)行營(yíng)銷】和制造話題營(yíng)銷【創(chuàng)造業(yè)內(nèi)的話題】【通過(guò)深度用戶進(jìn)行制造話題】、優(yōu)惠活動(dòng)（包括邀請(qǐng)好友得好禮、會(huì)員優(yōu)惠、某個(gè)節(jié)日優(yōu)惠等）。線上推廣無(wú)非就是通過(guò)網(wǎng)絡(luò)搭建虛擬場(chǎng)景，通過(guò)場(chǎng)景邊界的不斷延伸，覆蓋吸引更多的用戶參與進(jìn)來(lái)。

2.線下推廣

線下推廣包含地推（地推不可避免的會(huì)帶來(lái)2部分的人群：被地推活動(dòng)中的獎(jiǎng)品吸引的人；確實(shí)被產(chǎn)品的介紹所吸引的人）、海報(bào)&代言（同樣會(huì)有2部分人群：被明星效應(yīng)所吸引的人；被產(chǎn)品介紹所吸引的人）、門(mén)店的互相導(dǎo)流合作。線下推廣效率遠(yuǎn)遠(yuǎn)沒(méi)有線上推廣來(lái)的快。但是對(duì)于需要線下場(chǎng)景的產(chǎn)品來(lái)說(shuō)，這又是必不可少的。

三：社群自傳播

通過(guò)單點(diǎn)擊破，這就需要運(yùn)營(yíng)團(tuán)隊(duì)有很好的洞察能力，找到符合產(chǎn)品調(diào)性的社群，通過(guò)事件引爆該社群或者社區(qū)，讓社群成為你產(chǎn)品的擁護(hù)者和傳播者。

1.通過(guò)老帶新的模式進(jìn)行獲取用戶

當(dāng)產(chǎn)品與老用戶之間建立很好的紐帶關(guān)系后，老用戶自然會(huì)以個(gè)人為中心，向外幫你宣傳產(chǎn)品。

2.引爆社群

通過(guò)各類社區(qū)，找到符合你產(chǎn)品的目標(biāo)人群。通過(guò)對(duì)該社群的研究，運(yùn)用社群內(nèi)部語(yǔ)言或者表達(dá)，調(diào)動(dòng)整個(gè)社群幫你發(fā)力。有點(diǎn)及面的擴(kuò)散，稱之為“氣球理論（很細(xì)的一根針就能戳爆氣球）”這同樣是能引爆傳播性特別重要的一點(diǎn)。

3.參與感（社會(huì)關(guān)系綁定）

當(dāng)你周圍的人都在轉(zhuǎn)發(fā)或者都在使用的時(shí)候，如果你不了解或不使用的話，會(huì)引起個(gè)體的孤獨(dú)感。也就是說(shuō)“他們都在玩，我不玩就落伍了”，但是這種情況在產(chǎn)品推廣的前期一般不太會(huì)出現(xiàn)。當(dāng)傳播勢(shì)能達(dá)到一定程度的時(shí)候，才會(huì)出現(xiàn)刷爆朋友圈！

激活（ACTIVATION）分為二個(gè)部分：

當(dāng)用戶從外部導(dǎo)流進(jìn)產(chǎn)品后，這時(shí)用戶的去或留都跟產(chǎn)品&業(yè)務(wù)有關(guān)。如何讓用戶在進(jìn)入產(chǎn)品后自然而然的進(jìn)行使用也就是防呆原則。對(duì)，通過(guò)引導(dǎo)或者吸引使用者進(jìn)行下一步操作。（打個(gè)比方，你去一家陌生的餐廳，進(jìn)去后沒(méi)任何人招呼你，沒(méi)人告訴你要去選位置或者點(diǎn)菜，是不是有不知所措的感覺(jué)，我想你很快就會(huì)另尋他家吧）

一：進(jìn)入產(chǎn)品后的操作引導(dǎo)

1.視覺(jué)引導(dǎo)（包括頁(yè)面元素優(yōu)先級(jí)、頁(yè)面元素突出強(qiáng)弱進(jìn)行視覺(jué)上的引導(dǎo)，很常見(jiàn)的就是：在你第一次使用某個(gè)產(chǎn)品時(shí)，會(huì)引導(dǎo)使用者進(jìn)行第一步第二步的操作，降低用戶對(duì)產(chǎn)品的陌生感）

2.動(dòng)效引導(dǎo)（通過(guò)頁(yè)面浮層的形式教育用戶如何進(jìn)行操作，這也是在產(chǎn)品設(shè)計(jì)中，對(duì)新用戶的一種引導(dǎo)方式）說(shuō)到底就是為了消除用戶對(duì)新鮮事物的陌生感和手足無(wú)措感。

二：產(chǎn)品本身是否能激起用戶的探索欲

當(dāng)然這個(gè)問(wèn)題本身是建立在是否能真正的幫助用戶解決某些方面的痛點(diǎn)。否則再?gòu)?qiáng)的探索欲，也跟你產(chǎn)品本身沒(méi)有關(guān)系。如何激起用戶的探索欲？

1.產(chǎn)品整體視覺(jué)表現(xiàn)、使用流程的體驗(yàn)是不是夠吸引人，是不是有屬于產(chǎn)品本身吸引人的點(diǎn)。（當(dāng)年的path效果，直接將它送上全民熱潮之巔）

2.產(chǎn)品是否對(duì)使用者產(chǎn)生持續(xù)的吸引能力，產(chǎn)品前期只有不斷的通過(guò)各種方式刺激用戶。（產(chǎn)品體驗(yàn)優(yōu)化、活動(dòng)力度、宣傳方式、讓惠讓利等）但需要注意的是：過(guò)度營(yíng)銷不等于有效刺激。

3.產(chǎn)品的任務(wù)流程設(shè)置是否合理，正常情況都是由簡(jiǎn)單到復(fù)雜的程度設(shè)置任務(wù)，由于用戶的沉默成本，當(dāng)完成一定任務(wù)后，就會(huì)沉淀下來(lái)慢慢成為產(chǎn)品的忠實(shí)用戶。（摩拜產(chǎn)品是先讓用戶填寫(xiě)個(gè)人信息，最后才提示充值押金，站在使用者的角度來(lái)看，已經(jīng)把個(gè)人信息都出賣給平臺(tái)了，還在乎那200多塊錢(qián)嗎？不然你讓他把流程倒過(guò)來(lái)試試，先充錢(qián)，再填信息。保證沒(méi)多少人會(huì)用）。流程設(shè)置就像鉤子一樣，慢慢慢慢的把用戶勾住。

上半部分先到這里，下半部分會(huì)從“留存”“轉(zhuǎn)化”“傳播”角度進(jìn)行展開(kāi)~

多數(shù)人能夠成為很厲害的設(shè)計(jì)師，很厲害的產(chǎn)品經(jīng)理。凡事都會(huì)有所謂的套路，當(dāng)你熟知了解某個(gè)行業(yè)，或者多個(gè)行業(yè)的套路時(shí)。你會(huì)站在更高的視角看待問(wèn)題，同樣你會(huì)走的比人家更遠(yuǎn)更快。所謂的套路，是基于個(gè)人而言，可能你有個(gè)很好的導(dǎo)師能夠告訴你以往的經(jīng)驗(yàn)。但是我更認(rèn)為，套路是通過(guò)一步步看似笨拙的努力不斷總結(jié)不斷歸納

一、什么是峰終定律

峰終定律是由諾貝爾獎(jiǎng)得主 DanielKahneman 提出的，百度百科上它是屬于心理學(xué)上的定義。

我把它結(jié)合了自己的理解應(yīng)用在設(shè)計(jì)學(xué)上可以解釋為：

用戶在使用某個(gè)硬件產(chǎn)品，軟件產(chǎn)品或者服務(wù)系統(tǒng)來(lái)完成自己目標(biāo)的過(guò)程中，用戶情感地圖曲線的波峰（體驗(yàn)最好）、波谷（體驗(yàn)最差）、結(jié)束點(diǎn)的體驗(yàn)，決定用戶對(duì)整個(gè)過(guò)程的體驗(yàn)評(píng)價(jià)。

而在過(guò)程中體驗(yàn)好與不好體驗(yàn)的比重，好與不好體驗(yàn)的時(shí)間長(zhǎng)短，對(duì)記憶幾乎沒(méi)有影響。

這一定律主要是闡述人對(duì)過(guò)去體驗(yàn)的記憶由兩個(gè)因素決定，一個(gè)是「高峰」，一個(gè)是「結(jié)束」。

把用戶情感地圖曲線和峰終定律結(jié)合起來(lái)，簡(jiǎn)單畫(huà)一張圖：

既然用戶整體體驗(yàn)與整個(gè)過(guò)程中好壞綜合無(wú)關(guān)，只跟幾個(gè)關(guān)鍵點(diǎn)有關(guān)，那么可以得到一個(gè)公式：

用戶整體體驗(yàn)評(píng)價(jià)（E）=（y1-y2）+y3

y1，y2，y3 可以稱為關(guān)鍵時(shí)刻 MOT（Moment Of Truth）

二、日常生活中的峰終定律

這兩天和包子聊到宜家的峰終定律，突然明白了為什么我們有些課程調(diào)研，大家都喜歡去宜家調(diào)研了。

雖然它的店員很少，找貨物也要自己找椅子搬下來(lái)，就算只買(mǎi)一件家具也需要逛完整個(gè)商場(chǎng)，但是每次逛完結(jié)束的時(shí)候都可以吃那個(gè)特別好吃的「一元冰淇淋」呀，這就是它的「終」。

而在逛的過(guò)程中，就像包子講的，它的體驗(yàn)?zāi)Ｊ胶馨簦旬a(chǎn)品作為空間的一部分。曾經(jīng)有一位宜家的老顧客也說(shuō)，宜家商品物有所值，展區(qū)實(shí)用，產(chǎn)品隨意試用，大概這就是它的「峰」吧。

扔一個(gè)我的學(xué)習(xí)小伙伴包大佬的分析：

三、互聯(lián)網(wǎng)產(chǎn)品中的峰終定律

如果說(shuō)峰終定律怎么影響互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)的話，可以先舉幾個(gè)體驗(yàn)差的例子。

很多時(shí)候，用戶在某個(gè)平臺(tái)完成某個(gè)任務(wù)后，會(huì)出現(xiàn)很多引誘用戶點(diǎn)擊的贊助商的內(nèi)容。比如問(wèn)卷星，每次填完，任務(wù)結(jié)束的時(shí)候，它還會(huì)打著抽獎(jiǎng)的名義接廣告……

再舉個(gè)例子，你有沒(méi)有過(guò)在某些 app 注冊(cè)賬號(hào)，登錄 or 注冊(cè)很多次卻失敗的情況，或者花了很久時(shí)間才注冊(cè) or 登錄成功？原因可能是賬號(hào)密碼錯(cuò)誤，可能是注冊(cè)流程過(guò)多跳出率過(guò)高，可能是填寫(xiě)信息冗雜……

如果這款產(chǎn)品不是用戶剛需的話，最終會(huì)導(dǎo)致很多用戶卸載它，就算你之后流程的體驗(yàn)再好，用戶根本無(wú)法體驗(yàn)到最后。

四、利用峰終定律打造「爽點(diǎn)」

一款好的產(chǎn)品不僅能夠解決用戶的「痛點(diǎn)」，也能刺激用戶的「癢點(diǎn)」，更能打造用戶的「爽點(diǎn)」。

有一些產(chǎn)品能在用戶使用的過(guò)程中利用峰終定律打造 「爽點(diǎn)」，提升用戶體驗(yàn)。

如果用外賣這個(gè)來(lái)舉例子的話，應(yīng)該算是一個(gè)大的服務(wù)系統(tǒng)，它會(huì)涉及到很多方，比如消費(fèi)者，商家，騎手等，而這一整個(gè)服務(wù)系統(tǒng)的設(shè)計(jì)，只針對(duì)消費(fèi)者而言，流程也會(huì)十分復(fù)雜，其中利用峰終定律考慮的就更多了。

那就其中用戶（消費(fèi)者）與餓了么 app 的交互流程來(lái)舉例的話，用戶點(diǎn)外賣這個(gè)任務(wù)：

從打開(kāi) app——選擇店——選擇美食——付款，用戶的任務(wù)已經(jīng)結(jié)束了，但是餓了么會(huì)在結(jié)束的時(shí)候，給用戶一個(gè)分享領(lǐng)取紅包的福利，用戶會(huì)覺(jué)得自己獲得了很大的優(yōu)惠，體驗(yàn)會(huì)十分好，這也就是利用了峰終定律的「終」。

我發(fā)現(xiàn)游戲里面對(duì)峰終定律是用得最多的，曾經(jīng)玩過(guò) lol，王者榮耀，吃雞手游……

如果問(wèn)曾經(jīng)玩 lol 或者王者最爽的時(shí)候是什么時(shí)候，那大概是：比賽過(guò)程中的 First blood，penta kill ，killing spree，legendary，you have slained an enermy 等這些配音和畫(huà)面的視覺(jué)刺激吧。

按照常規(guī)的模式是，殺人后系統(tǒng)直接提示「您已經(jīng)殺滅了一名敵人」，但是它會(huì)去強(qiáng)化這種殺人的體驗(yàn)，將殺人的場(chǎng)景分為多種類型，通過(guò)視覺(jué)上的彈框擊殺提示與配音上的激勵(lì)疊加，把殺人的體驗(yàn)不斷深化，做到，另外在推塔和偷掉水晶的時(shí)候是不是也是最爽的時(shí)候呢？我覺(jué)得這里就利用了峰終定律的「峰」。

我記得在游戲結(jié)束的時(shí)候，比如 lol 里面推掉水晶的時(shí)候，游戲畫(huà)面會(huì)停止幾秒，然后再出現(xiàn)水晶慢慢破滅，加上大大的「勝利」二字，有的時(shí)候回到大廳還需要等幾秒的時(shí)間。

王者榮耀，吃雞這類在游戲結(jié)束的時(shí)候也會(huì)給用戶很多激勵(lì)，明明可以在結(jié)束后直接回到大廳，但它們會(huì)延長(zhǎng)這些勝利或者失敗的體驗(yàn)，如果勝利，當(dāng)然是爽，還想再擁有這樣的體驗(yàn)，繼續(xù)打；如果是失敗，那再接再厲，想擁有贏的體驗(yàn)，繼續(xù)打……

總之就是會(huì)讓用戶上癮。它們會(huì)把這些用戶體驗(yàn)做到，在游戲結(jié)束的時(shí)候這些的體驗(yàn)就利用到了峰終定律的「終」。

五、利用峰終定律改善體驗(yàn)步驟

「峰終定律」改善用戶體驗(yàn)的步驟：

• 進(jìn)行可用性測(cè)試；
• 繪制用戶旅程圖；
• 找到「峰」，「終」時(shí)刻；
• 通過(guò)用戶研究的方法找到用戶心中的關(guān)鍵時(shí)刻；
• 將「峰」、「終」，「用戶心中關(guān)鍵時(shí)刻」的體驗(yàn)優(yōu)化至。

在《用戶體驗(yàn)的要素》一本書(shū)中，Jesse James Garrett 將用戶體驗(yàn)分為了五個(gè)層級(jí)，戰(zhàn)略層，范圍層，結(jié)構(gòu)層，框架層，表現(xiàn)層。

其中在框架層里面有一個(gè)很重要的概念就是導(dǎo)航設(shè)計(jì)，作者對(duì)導(dǎo)航設(shè)計(jì)的定義是：元素的組合，允許用戶在信息架構(gòu)中穿行。

我覺(jué)得可以把導(dǎo)航設(shè)計(jì)理解為：我們從用戶的心智模型出發(fā)，結(jié)合業(yè)務(wù)目標(biāo)，對(duì)信息架構(gòu)的一個(gè)梳理，來(lái)幫助用戶完成目標(biāo)。

通過(guò)自己手機(jī)里幾十款 app，總結(jié)了以下六種導(dǎo)航設(shè)計(jì)模式，包括：標(biāo)簽導(dǎo)航，宮格導(dǎo)航，側(cè)邊導(dǎo)航，列表導(dǎo)航，菜單導(dǎo)航，輪播導(dǎo)航……

簡(jiǎn)單介紹了它們的優(yōu)缺點(diǎn)，適用場(chǎng)景，以及一些衍生導(dǎo)航與相關(guān)案例……（不過(guò)導(dǎo)航設(shè)計(jì)一定是視產(chǎn)品和情況而定的，并沒(méi)有確定的依據(jù)與理論）

一、標(biāo)簽導(dǎo)航

標(biāo)簽導(dǎo)航分很多種，有底部標(biāo)簽導(dǎo)航，頂部標(biāo)簽導(dǎo)航，底部標(biāo)簽導(dǎo)航又可以衍生出舵式導(dǎo)航，頂部標(biāo)簽導(dǎo)航又可以分為靜態(tài)或者是動(dòng)態(tài)導(dǎo)航……

底部標(biāo)簽導(dǎo)航是最基本的導(dǎo)航，幾乎絕大部分 app 中都在用，tabbar 位于頁(yè)面最底部，一般3-5個(gè) tabbar，有文字+icon，也有純 icon 形式，但大部分是文字+icon 的形式，我想是減少用戶記憶負(fù)擔(dān)吧，如下：

而關(guān)于底部標(biāo)簽導(dǎo)航的優(yōu)點(diǎn)，缺點(diǎn)以及適用場(chǎng)景也簡(jiǎn)單整理了：

我發(fā)現(xiàn)很多用戶發(fā)布或者生產(chǎn)內(nèi)容的 app 會(huì)將底部標(biāo)簽導(dǎo)航進(jìn)行變體，很多人把它稱為舵式導(dǎo)航，就像這種：

中間的「+」一般是發(fā)布的意思，并且是 app 里面使用最頻繁的一個(gè)功能，一般都會(huì)重點(diǎn)突出。并且，該標(biāo)簽中很多時(shí)候會(huì)有二級(jí)導(dǎo)航，二級(jí)導(dǎo)航里可擴(kuò)展性就比較強(qiáng)，如圖：

而頂部標(biāo)簽導(dǎo)航顧名思義就是 tabbar 位于頂部，最早知道它是在 Material Design 里面，因?yàn)?Google Pixel 手機(jī)底部存在物理導(dǎo)航，所以將標(biāo)簽導(dǎo)航置于頂部不會(huì)顯得突兀。它很少用作一級(jí)導(dǎo)航，一般是二級(jí)導(dǎo)航比較多，而且我發(fā)現(xiàn)頂部標(biāo)簽導(dǎo)航，幾乎都是純文字的形式，比如：

突然想到今天交互設(shè)計(jì)課上的時(shí)候，老師講的人機(jī)交互里，重要的操作放在大拇指可觸達(dá)的范圍內(nèi)。

而頂部標(biāo)簽導(dǎo)航，如果是點(diǎn)擊標(biāo)簽進(jìn)行操作的話，用戶單手操作就十分不方便，所以我發(fā)現(xiàn)體驗(yàn)好的 app 的頂部操作導(dǎo)航都是可以直接通過(guò)左右滑動(dòng)屏幕的交互來(lái)切換。

而當(dāng)標(biāo)簽類目過(guò)多的時(shí)候，可以通過(guò)左滑展現(xiàn)更多標(biāo)簽，比如很多新聞閱讀類的 app：

如果是可以滑動(dòng)查看更多的話，一定要通過(guò)一些方式告訴用戶可以滑動(dòng)查看更多，比如最后一個(gè)標(biāo)簽隱藏一半的方式等：

關(guān)于頂部標(biāo)簽導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景，如下：

二、宮格導(dǎo)航

宮格導(dǎo)航，也是十分常見(jiàn)的導(dǎo)航形式，除了一些工具類 app 外，大部分是作為二級(jí)頁(yè)面展示出來(lái)，并且以 icon+文字的形式居多。

如果將宮格的 icon 換成 picture 的形式的話，可以衍生出一種新的類似于卡片式導(dǎo)航的形式 ，可以通過(guò)垂直滑動(dòng)來(lái)切換，比如：

那，如果宮格信息太多，我發(fā)現(xiàn)很多 app 會(huì)采用分類展示的形式，并且通過(guò)水平滑動(dòng)的方式來(lái)切換，比如：

但是上面兩種可以垂直或者水平滑動(dòng)的形式，一定要讓用戶知道是可以水平或者垂直滑動(dòng)的，采取的是邊界地方信息只展示一半的形式，告訴用戶可以繼續(xù)滑動(dòng)……

除此之外，宮格導(dǎo)航還可以在電商里面運(yùn)用，在首頁(yè)的運(yùn)營(yíng)內(nèi)容塊，它可以根據(jù)內(nèi)容的重要性調(diào)整模塊的大小，比如：

關(guān)于宮格導(dǎo)航的優(yōu)缺點(diǎn)和適用場(chǎng)景，如下：

三、側(cè)邊導(dǎo)航

有些書(shū)里面會(huì)把側(cè)邊導(dǎo)航叫做抽屜導(dǎo)航，這類導(dǎo)航其實(shí)比較少了，原本也是從 Google Material Design 里面提取出來(lái)的概念，一般會(huì)在首頁(yè)呈現(xiàn)一個(gè)主要功能，將其他不常用的功能收納放到側(cè)邊導(dǎo)航里，比如：

而關(guān)于側(cè)邊導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景，如下：

四、列表導(dǎo)航

列表導(dǎo)航也是十分常見(jiàn)，幾乎在每一個(gè) app 里面都會(huì)存在，大部分時(shí)候是作為二級(jí)導(dǎo)航存在，但是也會(huì)存在于一級(jí)導(dǎo)航的時(shí)候，比如郵箱，iOS系統(tǒng)自帶的設(shè)置等。

一般在列表導(dǎo)航里都會(huì)有下一個(gè)層級(jí)，可以通過(guò)箭頭來(lái)告訴用戶是否有下級(jí)菜單。

當(dāng)列表信息比較多的時(shí)候，可以對(duì)列表進(jìn)行分類，可以添加小標(biāo)題或者直接分隔開(kāi)。比如：

而在有些列表導(dǎo)航里，我們還需要展示給用戶一些預(yù)覽信息，比如 iOS系統(tǒng)里的健康，個(gè)人信息里的一些基本數(shù)據(jù)展示，如下：

關(guān)于列表導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景，如下：

五、菜單導(dǎo)航

其實(shí)菜單導(dǎo)航也可以稱為下拉導(dǎo)航。這也是今天上交互設(shè)計(jì)課的時(shí)候，老師以微信的「+」為例子介紹的一種導(dǎo)航形式。最初了解這種導(dǎo)航形式也是來(lái)源于 Material Design 里面的 Menu。

Menu 是臨時(shí)的一張紙（paper），由按鈕（button）、動(dòng)作（action）、點(diǎn)（pointer）或者包含至少兩個(gè)菜單項(xiàng)的其他控件觸發(fā)。

比如：

當(dāng)信息層級(jí)變多的時(shí)候，菜單導(dǎo)航里要展示一層或者兩層信息，比如大眾點(diǎn)評(píng)采取的形式：

關(guān)于菜單導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景，如下：

六、輪播導(dǎo)航

還有一些導(dǎo)航比如輪播導(dǎo)航，完全的沉浸式體驗(yàn)，高度簡(jiǎn)潔的導(dǎo)航，比如天氣，但是這種導(dǎo)航因?yàn)檩啿c(diǎn)的大小不會(huì)很明顯，所以用戶很難快速感知自己所在位置，并且輪播導(dǎo)航輪播的數(shù)量也不宜過(guò)多 。

其實(shí)導(dǎo)航的類型應(yīng)該還有很多，并且在一個(gè) app 里面幾乎不可能只使用一種導(dǎo)航，哪怕只是一個(gè)頁(yè)面，也會(huì)存在多種導(dǎo)航的組合形式，比如：

總結(jié)

• 導(dǎo)航的形式一定是根據(jù)你的產(chǎn)品的諸多因素進(jìn)行選取，并不能完全按照我上文的適用場(chǎng)景為依據(jù)；
• 幾乎每一個(gè) app，每一個(gè) app 的每一個(gè)頁(yè)面，都會(huì)涉及到多種導(dǎo)航模式，需要結(jié)合具體場(chǎng)景進(jìn)行組合選??；
• 導(dǎo)航的具體展現(xiàn)可以通過(guò)：文字，icon，文字+icon 的形式；
• 有些導(dǎo)航比如標(biāo)簽導(dǎo)航在設(shè)計(jì)的時(shí)候有多種狀態(tài)，比如 unselected，selected 等狀態(tài)；
• 導(dǎo)航在 iOS 和 android 里面的應(yīng)用會(huì)不一樣，比如標(biāo)簽導(dǎo)航適配 iOS系統(tǒng)，側(cè)邊導(dǎo)航適配 android 系統(tǒng)；
• 導(dǎo)航設(shè)計(jì)必須傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁(yè)面之間的關(guān)系；
• 能夠引導(dǎo)用戶以很好的體驗(yàn)完成目標(biāo)的導(dǎo)航設(shè)計(jì)都是優(yōu)秀的。

描邊插畫(huà)：可以簡(jiǎn)單理解為眾多線面結(jié)合圖標(biāo)組合在一起，互相呼應(yīng)而組成一個(gè)大畫(huà)面。畫(huà)面中的元素除了面以外，還具有描邊，因此也叫描邊插畫(huà)。

本文內(nèi)容：文章會(huì)詳解如何畫(huà)一張描邊插畫(huà)，教程素材沒(méi)有用我之前的插畫(huà)來(lái)做步驟分解，而是新畫(huà)了一張插畫(huà)以作示范，繪畫(huà)原理都一樣，理解原理就好。除了具體步驟以外，會(huì)針對(duì)一些易犯錯(cuò)誤的地方添加重點(diǎn)標(biāo)記。

一點(diǎn)建議：看完文章后，可以按照我分享的方法來(lái)臨摹一遍，但我更趨向于小伙伴們能夠發(fā)揮自己的想象力，做一張屬于自己的原創(chuàng)插畫(huà)。畫(huà)完后若有不清楚的地方，歡迎在我的公眾號(hào)中添加微信并附帶插畫(huà)，可給予建議。

一、草圖階段

1. 確立主題，畫(huà)草稿

這次插畫(huà)的主題源自于我的一個(gè)夢(mèng)：在草地上，遺落的帆布鞋里面長(zhǎng)滿了鮮花，小鳥(niǎo)守在花的旁邊歌唱。

確定主題后，把腦海里的畫(huà)面畫(huà)出來(lái)，可以畫(huà)在紙上，也可以用數(shù)位板在 ps 里面畫(huà)，按照個(gè)人習(xí)慣就好。我比較喜歡手繪，因此在紙上畫(huà)。

2. 打開(kāi)AI，調(diào)整設(shè)置

新建畫(huà)布1600*1200

視圖-勾選對(duì)齊點(diǎn)

3. 把草圖拉到畫(huà)面中，調(diào)整大小

二、線稿

1. 描邊設(shè)置及要注意的問(wèn)題

在描邊插畫(huà)中，常見(jiàn)的問(wèn)題之一就是描邊的粗細(xì)問(wèn)題. 以及描邊間關(guān)系的處理問(wèn)題。

描邊粗細(xì)問(wèn)題（下圖以之前的四季插畫(huà)為例子）

描邊間關(guān)系處理

描邊設(shè)置

描邊的粗細(xì)是根據(jù)畫(huà)布大小而決定的，1600*1200的畫(huà)布，我習(xí)慣用 8pt 的粗細(xì)的線條，但是如果畫(huà)布是1200*900，8pt 則顯得過(guò)粗。具體的粗細(xì)可以根據(jù)情況而調(diào)整。

2. 線稿畫(huà)法

布爾運(yùn)算法

形狀斷點(diǎn)重連法

形狀生成器

鋼筆勾勒法

鋼筆勾勒法顧名思義就是用鋼筆直接描出物體的外形。在這個(gè)插畫(huà)中，植物的形狀比較隨性，因此用鋼筆直接勾勒比形狀剪切要快。繪制的過(guò)程中，注意調(diào)整線條的平滑度. 弧度，使其規(guī)整。在此不作示范。

三、色稿

1. 增加背景色

2. 色稿層的繪制

3. 顏色調(diào)整

4. 高光與暗部

5. 經(jīng)過(guò)高光與暗部塑造后的畫(huà)面

四、 風(fēng)格塑造與整體調(diào)整

1. 風(fēng)格塑造

最近看到 kit8 大神的畫(huà)，突然想到如果白線運(yùn)用在線性插畫(huà)會(huì)怎樣，就嘗試了這種風(fēng)格。把線稿復(fù)制一層置于頂上，改成白色，2px 粗細(xì)的線，然后向旁邊移動(dòng)錯(cuò)位，破一下畫(huà)面沉悶的感覺(jué)。

2. 整體調(diào)整

看到這里，你應(yīng)該也發(fā)現(xiàn)了，畫(huà)面是比較灰的，因?yàn)槲叶际沁x擇低飽和度的顏色，如果需要調(diào)整，就在 AI 中把插畫(huà)導(dǎo)出 SVG 格式。然后拖到 PS 里面進(jìn)行色相飽和度的調(diào)整。

3. 保存喜歡的配色

在顏色調(diào)整過(guò)程中，遇到喜歡的配色就保存下來(lái)，這樣一張插畫(huà)就完成了。

一、何為版面率

我們都知道一個(gè)版面中必定有版心的概念。何為版心呢？版心就是除去天頭、地腳和左右頁(yè)邊距余下的區(qū)域，也是我們頁(yè)面內(nèi)容的擺放空間。下圖中灰色塊的區(qū)域就是此頁(yè)面的版心。

知道了版心，那么何為版面率呢？版面率就是版心所占頁(yè)面的比例，通俗一點(diǎn)講就是版面的利用率。

上面左圖中版心的面積非常大，四周的余白少，版面的利用率高，所以版面率就高。右圖版心面積小，版面利用率比左圖低，所以版面率就低一些。

版面中也有滿版與空版的概念。如上圖，滿版就是沒(méi)有天頭地腳與左右頁(yè)邊距的，此時(shí)版心即整個(gè)版面，版面利用率為100%?？瞻婢褪前婷胬寐蕿?%的。從滿版到空版之間的版面率是遞減的關(guān)系。

二、版面率對(duì)畫(huà)面氣質(zhì)的影響

說(shuō)完版面率的概念我們?cè)賮?lái)說(shuō)一說(shuō)版面率對(duì)畫(huà)面氣質(zhì)的影響。

一般來(lái)說(shuō)版面率越高，視覺(jué)張力就越大，版面也會(huì)更活潑與熱鬧；反之，版面率越小，給人感覺(jué)就越典雅與寧?kù)o，版面也會(huì)更有格調(diào)。

上圖中高版面率的海報(bào)相對(duì)于低版面率的更熱鬧與活潑；低版面率的則更典雅。

畫(huà)冊(cè)中也是一樣的，上圖是我早些年做的一個(gè)案例。同樣的內(nèi)容跟圖片，只是版面的利用率不同，我們可以發(fā)現(xiàn)右邊低版面率的作品更安靜和典雅。

版面率的高低能夠影響版面的氣質(zhì)，所以我們實(shí)際工作中也要根據(jù)項(xiàng)目的氣質(zhì)分配合適的版面率。比方說(shuō)典雅氣質(zhì)的項(xiàng)目我們就要用低版面率版面，如果用高版面率顯然是與項(xiàng)目本身的氣質(zhì)相悖的。

三、留白率

說(shuō)完版面率我們?cè)賮?lái)說(shuō)一下留白，留白的概念大家都懂。而這里所說(shuō)的留白更多的是指頁(yè)面的負(fù)空間。

頁(yè)面中去除內(nèi)容后的空間就是負(fù)空間，如下面這個(gè)頁(yè)面。

圖中灰色塊代表圖和文字信息等內(nèi)容，除去這些圖片和文字后，頁(yè)面中的其他空間都可以看作是負(fù)空間，也就是留白。當(dāng)然，留白并不一定是白色，所有除去頁(yè)面內(nèi)容后的空間都是負(fù)空間，如上圖右側(cè)案例，黑色部分即此頁(yè)面的留白。

負(fù)空間的多少即是留白的多少。留白的多少我們可以用留白率來(lái)表示，如上圖，負(fù)空間小的留白肯定少，留白率就低。負(fù)空間大的的留白肯定多，留白率就高。

留白率就是版面留白的多少，實(shí)際上與版面率的概念差不多，如下。

空版留白最多，滿版留白最少。當(dāng)然這也不是絕對(duì)的，有的作品中雖然是滿版，但空間廣闊，比如天空什么的，都可以當(dāng)作留白來(lái)看待。

四、留白率對(duì)畫(huà)面的影響

上面說(shuō)來(lái)留白率跟版面率也有一定的關(guān)聯(lián)，所以他們對(duì)畫(huà)面氣質(zhì)的影響也是如出一轍的。我們可以先來(lái)看一下低留白率與高留白率的幾個(gè)作品。

通過(guò)這幾個(gè)作品我們可以看出留白少的信息更豐富，版面更有活力，也更熱鬧，親和力也更強(qiáng)。而留白多的更雅致，更安靜典雅，更有格調(diào)跟品質(zhì)感，但親和力稍弱。

五、案例演示

下面進(jìn)行案例演示吧，首先看一看文案。

這一步我們需要把文案的層級(jí)關(guān)系拉開(kāi)，大中小區(qū)分的明顯一點(diǎn)。這個(gè)文案的層級(jí)關(guān)系肯定是 欲望の森林 ＞ 英文 ＞ 欲望是無(wú)盡的森林 ＞ 小文字信息的。

首先我們做一個(gè)有張力的版面，那么我們可以想一想什么樣的版面是有張力的呢？

首先版面率要大，其次留白要小，讓版面中的信息緊湊一點(diǎn)。

上圖就是對(duì)版面的布局，可以看到圖片是出血版的，沒(méi)留天頭與左右頁(yè)邊距。這樣做的目的也是使版面率更大。

布局做好之后我們把圖片與編排好的文字放置上去就可以了，如下。

上圖可以看到留白比較少，符合留白率低的理論，雖然具備張力，但不是很明顯。這種情況下我們可以改變一下底色使之感覺(jué)留白率更低，如下。

做完了留白少版面率高的，我們?cè)賮?lái)做一個(gè)典雅一點(diǎn)的。

根據(jù)本篇文章的內(nèi)容思考一下什么典雅與安靜的的排版版面率與留白率分別是什么樣的？

一定是低版面率和較多留白的版面更能體現(xiàn)典雅與安靜感。所以我們?cè)诎婷姘才派弦蛊淞舭赘啵瑫r(shí)版面率要小一點(diǎn)。下圖就是一個(gè)基本布局。

最后我們?cè)俑鶕?jù)版面布局置入圖片微調(diào)一下就可以了，如下。

總結(jié)

版面率跟留白率都能夠影響版面的氣質(zhì)，我們做項(xiàng)目的時(shí)候具體問(wèn)題具體分析，根據(jù)項(xiàng)目氣質(zhì)去設(shè)定版面率跟留白率的大小。

大家好，從今天開(kāi)始我要以大白話且通俗易懂的方式，來(lái)與大家分享我的知識(shí)和觀點(diǎn)。

主要講解的是平面設(shè)計(jì)基礎(chǔ)理論知識(shí)與實(shí)際用法，后期會(huì)講一些高階的設(shè)計(jì)思維。

本章節(jié)適合設(shè)計(jì)小白和需要填補(bǔ)設(shè)計(jì)基礎(chǔ)的設(shè)計(jì)師學(xué)習(xí)閱讀。 

目錄

1、理解、提取與布置

2、貼近與遠(yuǎn)離

3、排列與對(duì)齊

4、視線移動(dòng)方向

5、組織與重復(fù)

1、理解、提取與布置

理解、提取與布置指的是根據(jù)設(shè)計(jì)的意圖來(lái)進(jìn)行信息的整理，然后再將整理好的信息中重要和不重要的信息按照優(yōu)先級(jí)排列出來(lái)，最后再根據(jù)排列好的信息按個(gè)人美感和美學(xué)理念擺放到平面中。

1.1 理解部分

當(dāng)收到一個(gè)海報(bào)設(shè)計(jì)需求時(shí)，我們不是要馬上動(dòng)手去做，而是要去思考需要設(shè)計(jì)的海報(bào)受眾群體是哪些人，具體要怎么展示它，它展示的目的是什么。 

下面我就簡(jiǎn)單介紹一下設(shè)計(jì)思維及方法，首先要設(shè)置定一個(gè)需求【現(xiàn)代美術(shù)館，需要設(shè)計(jì)一個(gè)簡(jiǎn)潔大方的海報(bào)】。根據(jù)這個(gè)需求在進(jìn)行具體的思維延伸。

1.1.1 海報(bào)的受眾群體

當(dāng)我們收到設(shè)計(jì)需求時(shí)，要考慮海報(bào)的受眾群體，男人/女人，少年/青少年/中年/老年，每種受眾群體接受教育的程度和經(jīng)歷均不同，要根據(jù)不同的受眾做合適的設(shè)計(jì)。當(dāng)我們按照具體需求定義好受眾群體后，就可以考慮推斷用哪種風(fēng)格來(lái)展示海報(bào)了。

對(duì)于現(xiàn)代美術(shù)館需要一個(gè)簡(jiǎn)潔大方的海報(bào)，這個(gè)需求所涵蓋的年齡區(qū)間比較大，基本上所有人都可以參觀美術(shù)館。那我們只要避免使用“個(gè)性化”的表象特征元素就可以解決這個(gè)問(wèn)題了。

意思就是不要加入柔美的線條（除非展品的構(gòu)成是柔美的線條），游戲和女妝這類具有一定代表性的象征元素，不要夾雜太多表現(xiàn)形式，用最容易讓人理解的表象形式來(lái)處理就可以了。

1.1.2 怎么展示海報(bào)

現(xiàn)代美術(shù)館，需要設(shè)計(jì)一個(gè)簡(jiǎn)潔大方的海報(bào)這個(gè)需求，可以根據(jù)主關(guān)鍵詞“現(xiàn)代”和“美術(shù)館”，次關(guān)鍵字“簡(jiǎn)潔”和“大方”來(lái)推斷要采用哪種設(shè)計(jì)語(yǔ)言?！艾F(xiàn)代”的表現(xiàn)形式是無(wú)襯線體、干練（有棱角）、簡(jiǎn)潔、沒(méi)有太多情緒。而“美術(shù)館”只要在圖片的處理上讓主題與圖片串聯(lián)共通就可以了。

簡(jiǎn)潔大方的設(shè)計(jì)需求可以采用直線（字有時(shí)也是線）或大留白、配色多些白色、舒適的高純度高明度、整體干凈清爽，同時(shí)也要注意禁止添加太多顏色（如撞色）。

1.1.3 運(yùn)用理解部分生成原型

根據(jù)前面的分析大概有了個(gè)原型，分為上下構(gòu)圖。上部分是美術(shù)館的部分場(chǎng)景圖片，下部分是具體的內(nèi)容信息部分。所有要素均以現(xiàn)代感、簡(jiǎn)潔干練、配色不復(fù)雜、線性、整潔、清爽、專業(yè)、無(wú)太多情緒為基礎(chǔ)進(jìn)行設(shè)計(jì)的。

以上就是“信息的整理”中的“理解部分”，當(dāng)設(shè)計(jì)師收到需求時(shí)，不要馬上著手去做。先思考采用哪種表現(xiàn)形式（視覺(jué)語(yǔ)言）更適合需求，分析后再去做設(shè)計(jì)，這樣才能準(zhǔn)確表達(dá)具體的需求，也能做出更符合需求的設(shè)計(jì)。

1.2 提取部分

提取部分就很好理解了，顧名思義是將整理好的信息中重要和不重要的信息按照優(yōu)先級(jí)排列出來(lái)。我們只需要根據(jù)優(yōu)先級(jí)進(jìn)行排序，并把最重要的信息排列到平面中就可以了。例如需求中有【ABCDEFGHIJKL】這么多種信息，把最重要的【CGIL】提取出來(lái)再排列優(yōu)先級(jí)【IGCL】。由【ABCDEFGHIJKL】-【CGIL】-【IGCL】這個(gè)過(guò)程就叫“提取信息部分”。

1.3 布置部分 

把提取并排列好優(yōu)先級(jí)的信息規(guī)整好，就可以布置在平面上了。用之前設(shè)計(jì)好的原型套用已提取好的信息就可以了。特別要注意重要的內(nèi)容放大，不重要的內(nèi)容弱化。

* 要點(diǎn)

理解：首先要理解作品的受眾群體、要怎么展現(xiàn)、目的是什么。

提取：其次要明確作品內(nèi)容中什么是最重要的、根據(jù)優(yōu)先級(jí)排序。

布置：最后把排列好的信息加以布置，重要的內(nèi)容放大，不重要的內(nèi)容弱化。

2、貼近與遠(yuǎn)離

貼近和遠(yuǎn)離的概念也是比較好理解的。與格式塔視知覺(jué)的親密性與遠(yuǎn)離性是一個(gè)道理，初期只講一些通俗易懂的概念，像格式塔視知覺(jué)以后會(huì)講。

2.1 貼近和遠(yuǎn)離的 基礎(chǔ)概念

貼近是指同類要素?cái)[放在一起會(huì)呈現(xiàn)出一種共通性或產(chǎn)生某種規(guī)則，而遠(yuǎn)離是指同類要素分開(kāi)擺放看上去就沒(méi)有共通性或不會(huì)感到有某種規(guī)則。

當(dāng)把同類要素（男人女人）放到一起，會(huì)覺(jué)得他們有一定的共通性，而且看上去像一對(duì)情侶。相反把同類要素（男人女人）分開(kāi)來(lái)放，會(huì)覺(jué)得他們毫無(wú)關(guān)系。

我們把這種概念應(yīng)用在平面設(shè)計(jì)上，如下圖所示。

相同的要素?cái)[放在一起會(huì)有一定的共同性，相反分開(kāi)擺放則看上去沒(méi)有關(guān)聯(lián)。

貼近與遠(yuǎn)離基礎(chǔ)概念的實(shí)際案例

2.2 貼近和遠(yuǎn)離的 進(jìn)階概念

把同類要素放到一起有種井然有序的感覺(jué)。如果要處理較為規(guī)整傳統(tǒng)的版式時(shí)，可以考慮多將要素放到一起形成規(guī)則。另外把同類要素分開(kāi)擺放，會(huì)感到?jīng)]有共通性和規(guī)律規(guī)則，但是能為平面增加節(jié)奏感和沖擊力。

貼近與遠(yuǎn)離進(jìn)階概念的實(shí)際案例

其次遠(yuǎn)離能使平面產(chǎn)生留白，通過(guò)留白也能使平面具有關(guān)聯(lián)性。

雖然說(shuō)遠(yuǎn)離能使要素看上去沒(méi)有共同性和規(guī)則，但如果要素處在一個(gè)平面中，利用留白呈現(xiàn)出一種關(guān)聯(lián)性。這就像吵架的夫妻一樣，同在一個(gè)床上，女的偏床左側(cè)，男的偏床右側(cè)，呈現(xiàn)一種遠(yuǎn)離性。但他倆還是處在“床”這個(gè)平面中，也會(huì)呈現(xiàn)一種關(guān)聯(lián)性。

貼近與遠(yuǎn)離進(jìn)階概念的實(shí)際案例

* 要點(diǎn)

同類要素貼近擺放在一起相互關(guān)聯(lián)，同類要素遠(yuǎn)離擺放相互排斥。

同類要素貼近擺放在一起平面有規(guī)則，同類要素遠(yuǎn)離擺放增添節(jié)奏。

留白也能使要素有一定的關(guān)聯(lián)性。

3、排列與對(duì)齊

排列與對(duì)齊的概念比較簡(jiǎn)單，也很容易理解。轉(zhuǎn)化一下思維，把排列比作軍隊(duì)隊(duì)伍中的“集合”，把對(duì)齊比作隊(duì)伍中的向前/左看齊，就很好理解了。

3.1 排列

排列是指將要素按照一定的規(guī)則進(jìn)行布置，使平面達(dá)到一種平衡與和諧。道理與收拾屋子一樣，雜亂無(wú)章的屋子會(huì)讓人感到不舒服且很壓抑。整理的井然有序的屋子會(huì)讓人心情舒暢很安心。平面中的“排列”就是屋子中的“整理”，目的是使雜亂的屋子變得規(guī)矩整齊。收拾屋子的方法就是“規(guī)則”，用規(guī)則的方法來(lái)排列就叫“布置”。

排列的目的是讓平面變得有序和規(guī)則，當(dāng)平面達(dá)到有序和規(guī)則就會(huì)呈現(xiàn)出一種舒適感，好比自然中的和諧。

3.2 對(duì)齊

對(duì)齊也可以理解為將要素按照一定的規(guī)則進(jìn)行布置，使平面達(dá)到一種平衡與和諧。對(duì)齊與排列的差別在于，對(duì)齊是在排列的基礎(chǔ)上進(jìn)行操作的。先將要素按照一定規(guī)則進(jìn)行排列，然后再將要素進(jìn)行對(duì)齊。排列是畫(huà)一個(gè)大體的框架，而對(duì)齊是做框架里的精細(xì)操作。

排列與對(duì)齊的實(shí)際案例

* 要點(diǎn)

排列與對(duì)齊的目的是讓平面變得有序和規(guī)則，當(dāng)平面達(dá)到有序和規(guī)則就會(huì)呈現(xiàn)出一種舒適感。

把排列比作軍隊(duì)隊(duì)伍中的“集合”，把對(duì)齊比作隊(duì)伍中的向前/左看齊，就很好理解了。

4、視線移動(dòng)方向

設(shè)計(jì)書(shū)籍或排版布局時(shí)，要考慮通過(guò)設(shè)計(jì)讓讀者以怎樣的順序去閱讀作品，通常情況下人的視線是從上到下移動(dòng)的，所以在設(shè)計(jì)時(shí)要考慮到這一基本原則。閱讀橫排文章時(shí)視線是【由左至右】，閱讀豎排文章的視線是【由右至左】。

視線的移動(dòng)方向分為三個(gè)知識(shí)點(diǎn)，橫排閱讀、豎排閱讀、流水式閱讀。流水式閱讀以后會(huì)講。

隨便補(bǔ)充一下啊，我讀過(guò)的設(shè)計(jì)文獻(xiàn)中提到的閱讀方法只有“Z字視線移動(dòng)方向”，而沒(méi)有“T字視線移動(dòng)方向”。有一種學(xué)習(xí)方法叫“T型閱讀法”，與視線移動(dòng)方向的“T字視線移動(dòng)方向”不是一個(gè)概念。視線本身就是從上到下從左到右的形式閱讀的，形成了Z字閱讀方式，我覺(jué)得是國(guó)人是把這些概念給曲解了，如果有說(shuō)的不對(duì)的地方，也請(qǐng)大佬們多多指點(diǎn)。

4.1 橫排閱讀

橫排閱讀是指作品的排版布局是以橫向的排列方式讓讀者來(lái)閱讀作品。橫向的排列方式就是文字是橫著的，大家現(xiàn)在讀的這篇文章就是橫向排列的文章。閱讀橫向排列的文章時(shí)視線是從上至下【由左至右】依次閱讀的，如圖所示。

懂得了橫向排列的方式來(lái)閱讀文章會(huì)有什么用呢？由于人們的閱讀習(xí)慣，一般情況下閱讀讀物，都會(huì)遵循從左到右閱讀文章的方式，這也就間接影響了文章內(nèi)容的重要性。采用橫向排列的方式進(jìn)行排版布局，重要的內(nèi)容要放在最左面，也就是最方便引導(dǎo)人們視線方向的地方。

如果不把重要的內(nèi)容放在視線方向的地方，讀者不僅閱讀作品時(shí)會(huì)感到很吃力（可讀性），而且會(huì)不理解作品是什么含義，視線也隨之錯(cuò)亂，作品也會(huì)失去原本的含義。

橫排閱讀的實(shí)際案例

4.2 豎排閱讀

橫排閱讀是指作品的排版布局是以豎向的排列方式讓讀者來(lái)閱讀作品。閱讀豎向排列的文章時(shí)視線是從上至下【由右至左】依次閱讀的，如圖所示。

一定要注意，豎向排列方式內(nèi)容區(qū)在平面的最右面，與橫向排列方式不同。這個(gè)規(guī)定就像地球?yàn)槭裁词菆A的的道理一樣。

豎排閱讀的實(shí)際案例

* 要點(diǎn)

閱讀橫排文章時(shí)視線是【由左至右】，閱讀豎排文章的視線是【由右至左】。

不要打破規(guī)則，一切以引導(dǎo)讀者視線為主。

5、組織與重復(fù)

按照一定規(guī)則構(gòu)成布局來(lái)編排要素，能使種類繁多的要素顯得整潔有序。

5.1 組織

沒(méi)有共通性的雜亂圖形匯聚一起會(huì)造成視線混亂，讀者注意力會(huì)被分散，也會(huì)降低理解力。將圖形用框圈起來(lái)，按照等距進(jìn)行排列，整體就會(huì)顯得很整潔，也便于找出想要了解的圖形。

組織規(guī)則的實(shí)際案例

5.2 重復(fù)

這里的重復(fù)不是指復(fù)制粘貼，而是元素上的重復(fù)構(gòu)成。例如重復(fù)相同的格式，風(fēng)格、文字、顏色、線、圖案等。為了讓平面具有條理性，用風(fēng)格統(tǒng)一的要素做修飾，讓排版符合流水式，視線清晰自然。

重復(fù)規(guī)則也可以應(yīng)用在平面中、元素中、要素中、形狀中等，靈活運(yùn)用重復(fù)能使平面具有統(tǒng)一性，也能制造趣味性，增加讀者對(duì)作品的印象。

重復(fù)規(guī)則的實(shí)際案例

* 要點(diǎn)

將圖形用框圈起來(lái)，按照等距進(jìn)行排列，整體就會(huì)顯得很整潔，也便于找出想要了解的圖形。

靈活運(yùn)用重復(fù)能使平面具有統(tǒng)一性，也能制造趣味性，增加讀者對(duì)作品的印象。