欧美精品在线一区二区三区_亚洲女同精品视频_日韩一区免费_国产欧美久久久精品免费_国产这里只有精品_僵尸再翻生在线观看_久久99精品国产一区二区三区_亚洲免费一区二区_女教师淫辱の教室蜜臀av软件_中文字幕国产一区二区

從用戶的操作流程上來說，如果用戶想使用一個功能，必然首先要發現它。如果連功能入口都找不到，后續的用戶體驗也無從談起。而篩選功能可以幫助用戶對功能信息進行快速的定位，縮短用戶的查找時間，這篇文章我就來跟大家聊一下篩選功能。

 三種常見基本樣式

首先要明確一個概念，篩選功能并不是普通的單一功能項，它和導航一樣是一個體系。既然是體系，必然有最基本的組成部分。篩選功能（體系）常見的樣式有以下三種：tab類，(下拉)列表類，標簽類。這三種樣式是篩選功能最基本的組成元素，不管你產品的篩選功能做的有多么復雜，都可以看成是這三種基本元素的不同組合形式。

Tab

Tab是最常見的篩選樣式，一個tab項代表一個篩選維度，直接平鋪的展示出來，用戶很容易感知到。

根據方向我們可以將tab分為橫向欄tab和側向欄tab。橫向欄tab可展示2-5個選項，如果超過了5個，那么就需要用戶滑動才能看到。所以當篩選維度過多的時候，我們可以考慮使用側向欄tab，京東商品分類這里用的就是典型的側向欄tab，我數了一下總共40個選項，這里如果使用橫向欄tab用戶可能要側向滑動8屏，操作成本過高。

當然當選項過多的時候，我們還有一個法子，就是使用彈框，用戶點擊后可以看到全部的選項。

列表式

列表式也可稱之為list，其特點就是占用空間小。因為它可以將選項隱藏起來，用戶需要點擊才能看到所有的選項，因此在有限的空間里可以展示更多的篩選維度。礙于手機屏幕尺寸的限制，列表式篩選現在應用的越來越普遍。

列表式篩選的樣式其實有很多。可以做成popover類，actionsheet類，activityview類。這些樣式很難去說誰好誰壞，這里我就只是列舉出來，具體用哪種樣式，大家自己來判斷。

標簽式

對于標簽式，很難進行準確的定義，我更傾向于將單選按鈕，多選按鈕，switch等統稱為標簽式，標簽式只能針對單一條件進行篩選，這點和tab很類似。標簽式很少單獨出現，多數情況下都是與tab和列表式結伴而行。

在淘寶里用戶可以點擊視圖icon來切換視圖模式，這就是典型的標簽式篩選。

當然以上三種只是最常見的篩選元素，其余的還有輸入框，滑塊，地區/日期選擇器等主要用于信息錄入的組件。 

常見的篩選體系 

了解了最基本的元素，接下來看一些比較復雜的篩選樣式。上面我也提到了任何產品的篩選體系都可以看成是這三種基本元素的不同組合形式。為了讓大家更好的理解，我一一舉例來說明：

tab+tab:

tab之所以受到青睞，是因為其較低的學習成本。每一個tab代表一個類別，而且是直接展示給用戶看的，所以很多產品的篩選功能都會優先考慮使用tab。即使功能結構復雜到無法用一層tab來完成篩選任務，設計師也會考慮使用雙層tab樣式（tab+tab）的樣式。（PS.當然下圖應該算是segment control+tab）

tab+列表式：

當產品不斷的發展，功能結構愈發的復雜，過于扁平的tab已經無法滿足篩選的需求。以看電影這個場景為例，用戶的需求是找到合適的影片和電影院。對于用戶來說，衡量一家電影院會從地址、票價、品牌和特色服務（支持改簽、IMAX廳等）這四個角度入手。這些篩選需求很難通過tab來完成，我們需要列表式的協助。

tab+列表式+標簽：

當產品的功能結構進一步復雜，這也給篩選功能增加了新的難題。以boss直聘來說，這里的篩選項主要分為四個：排序方式（推薦/）、工作地點、公司規模、崗位要求。其中后三個篩選項包含大量的條件，特別工作地點，需要進一步定位到街道或地鐵站。對于這種多維度，深層級的篩選需求我們可以使用tab+列表式+標簽的樣式。

這里我選擇boss直聘的另一個原因在于它的tab數用戶是可以自己增減的，每一個tab代表一條求職意向，最多可以添加3條求職意向。

篩選體系的容器

篩選體系是由眾多篩選項組成的，這些篩選項需要一個“容器”來承載。上面說的boss直聘用的是下拉列表，這種樣式其實還比較簡單的，我們可以看一些功能更加復雜一點的產品，比如各大電商平臺。這里使用的是抽屜式篩選框，說它是抽屜式，因為它跟抽屜一樣，用的時候可以拉出來，不用的時候可以關起來，節省了空間。從某個角度來說，我們可以把抽屜式看成列表式的一個放大版。抽屜式篩選框可以容納更多的篩選條件，像我在上面提到的輸入框，多選按鈕都可以在這里使用。

從底部彈出的動作欄也比較常見，這里使用了滑塊和單選按鈕。

Airbnb的篩選功能以浮層為載體，還使用比較少見的switch和stepper。

當然Airbnb篩選功能最大的亮點在于可以向用戶即時反饋篩選結果的數目，用戶不太可能會進入搜索結果為0的空頁面，避免無效操作。

以上說的篩選體系都比較傳統，大部分都是基于對現有結果進行篩選，其實我們可以對篩選功能進行前置。例如，我們可以在用戶進行搜索之前就對結果進行篩選。

甚至在新用戶第一次使用產品的時候，可以讓用戶填寫一些個人信息以便進行個性化推送。

篩選功能的存在意義在于幫助用戶對功能信息進行快速的定位，對篩選功能進行適度的前置可以簡化用戶的操作流程，同樣可以達到節省用戶時間的目的。

總結：

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

在這里先給大家分享一組近期APP使用過程中發現的UI&交互知識點，大家可以一起學習交流，對于個人觀點不認同的可以在下面留言探討，thanks~

產品即場景，體驗又貫穿整個產品~孰重孰輕早已分不清

產品即場景，而場景化核心要素之一的“體驗”，是其中最重要的一項。

本文從體驗出發，結合AARRR（用戶增長）模型進行闡述，其中我認為該模型的使用必須是在產品搭建的場景下才能運作的。而其中涉及每一步的良好體驗剛好又反哺場景的完善。

從獲取-激活-留存-轉化-傳播每一個步驟中都存在內部因素和外部因素。本文只講內部因素，產品從最開始的外部獲客，轉向產品內部的使用體驗，再轉向外部傳播的這么一個過程。

文章不是教案，更不是真理。希望大家帶著批判的眼光去看待每一篇文章。畢竟思辨精神才是形成獨立思維的法寶。由于文章較長，我會分成上下兩部分發布，進入正文：

獲取（ACQUISITION）分為三個部分：

一：自然流量的獲取

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

1.某個社會現象、熱點所引發的相關功能性需求（例如前不久滴滴司機殺害空姐事件，引發多少芳齡少女的恐慌。提高了強烈的安全意識，這時候你會發現App Store里面一款app殺了出來“怕怕”（有興趣的朋友自行下載體驗），正是這個社會熱點現象引發的自然流量暴增。當然也不排除產品借這個熱點營銷自己的產品）

2.某個痛點確確實實需要解決（當某類用戶存在某個痛點時，會自己通過搜索或者同類產品對比選擇一款產品進行使用，如果你的產品剛好能幫助使用者解決痛點，那么你成功吸引了用戶。）

3.純粹進行產品的體驗（產品發燒友、同類競品的體驗人員、無意中下載的等）。我們稱為無效流量，因為這部分用戶一般是不太可能成為產品的忠實粉絲的。他沒有明確的目的、沒有明確要解決的痛點。

二：運營推廣的獲取

運營推廣這個名詞在互聯網誕生之前就已經存在了。只是說原來傳統的營銷手段即產品-價格-渠道-促銷開始逐漸失效。轉而變為場景化的運營推廣。將推廣落實到具體的小場景中。

1.線上推廣

其中線上推廣包含線上營銷活動（營銷活動又分為已有話題進行營銷【可以選擇融入當前的熱點話題類似節日、娛樂圈大事件等】&【提供話題痛點解決方案進行營銷】和制造話題營銷【創造業內的話題】【通過深度用戶進行制造話題】、優惠活動（包括邀請好友得好禮、會員優惠、某個節日優惠等）。線上推廣無非就是通過網絡搭建虛擬場景，通過場景邊界的不斷延伸，覆蓋吸引更多的用戶參與進來。

2.線下推廣

線下推廣包含地推（地推不可避免的會帶來2部分的人群：被地推活動中的獎品吸引的人；確實被產品的介紹所吸引的人）、海報&代言（同樣會有2部分人群：被明星效應所吸引的人；被產品介紹所吸引的人）、門店的互相導流合作。線下推廣效率遠遠沒有線上推廣來的快。但是對于需要線下場景的產品來說，這又是必不可少的。

三：社群自傳播

通過單點擊破，這就需要運營團隊有很好的洞察能力，找到符合產品調性的社群，通過事件引爆該社群或者社區，讓社群成為你產品的擁護者和傳播者。

1.通過老帶新的模式進行獲取用戶

當產品與老用戶之間建立很好的紐帶關系后，老用戶自然會以個人為中心，向外幫你宣傳產品。

2.引爆社群

通過各類社區，找到符合你產品的目標人群。通過對該社群的研究，運用社群內部語言或者表達，調動整個社群幫你發力。有點及面的擴散，稱之為“氣球理論（很細的一根針就能戳爆氣球）”這同樣是能引爆傳播性特別重要的一點。

3.參與感（社會關系綁定）

當你周圍的人都在轉發或者都在使用的時候，如果你不了解或不使用的話，會引起個體的孤獨感。也就是說“他們都在玩，我不玩就落伍了”，但是這種情況在產品推廣的前期一般不太會出現。當傳播勢能達到一定程度的時候，才會出現刷爆朋友圈！

激活（ACTIVATION）分為二個部分：

當用戶從外部導流進產品后，這時用戶的去或留都跟產品&業務有關。如何讓用戶在進入產品后自然而然的進行使用也就是防呆原則。對，通過引導或者吸引使用者進行下一步操作。（打個比方，你去一家陌生的餐廳，進去后沒任何人招呼你，沒人告訴你要去選位置或者點菜，是不是有不知所措的感覺，我想你很快就會另尋他家吧）

一：進入產品后的操作引導

1.視覺引導（包括頁面元素優先級、頁面元素突出強弱進行視覺上的引導，很常見的就是：在你第一次使用某個產品時，會引導使用者進行第一步第二步的操作，降低用戶對產品的陌生感）

2.動效引導（通過頁面浮層的形式教育用戶如何進行操作，這也是在產品設計中，對新用戶的一種引導方式）說到底就是為了消除用戶對新鮮事物的陌生感和手足無措感。

二：產品本身是否能激起用戶的探索欲

當然這個問題本身是建立在是否能真正的幫助用戶解決某些方面的痛點。否則再強的探索欲，也跟你產品本身沒有關系。如何激起用戶的探索欲？

1.產品整體視覺表現、使用流程的體驗是不是夠吸引人，是不是有屬于產品本身吸引人的點。（當年的path效果，直接將它送上全民熱潮之巔）

2.產品是否對使用者產生持續的吸引能力，產品前期只有不斷的通過各種方式刺激用戶。（產品體驗優化、活動力度、宣傳方式、讓惠讓利等）但需要注意的是：過度營銷不等于有效刺激。

3.產品的任務流程設置是否合理，正常情況都是由簡單到復雜的程度設置任務，由于用戶的沉默成本，當完成一定任務后，就會沉淀下來慢慢成為產品的忠實用戶。（摩拜產品是先讓用戶填寫個人信息，最后才提示充值押金，站在使用者的角度來看，已經把個人信息都出賣給平臺了，還在乎那200多塊錢嗎？不然你讓他把流程倒過來試試，先充錢，再填信息。保證沒多少人會用）。流程設置就像鉤子一樣，慢慢慢慢的把用戶勾住。

上半部分先到這里，下半部分會從“留存”“轉化”“傳播”角度進行展開~

多數人能夠成為很厲害的設計師，很厲害的產品經理。凡事都會有所謂的套路，當你熟知了解某個行業，或者多個行業的套路時。你會站在更高的視角看待問題，同樣你會走的比人家更遠更快。所謂的套路，是基于個人而言，可能你有個很好的導師能夠告訴你以往的經驗。但是我更認為，套路是通過一步步看似笨拙的努力不斷總結不斷歸納

一、什么是峰終定律

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

我把它結合了自己的理解應用在設計學上可以解釋為：

用戶在使用某個硬件產品，軟件產品或者服務系統來完成自己目標的過程中，用戶情感地圖曲線的波峰（體驗最好）、波谷（體驗最差）、結束點的體驗，決定用戶對整個過程的體驗評價。

而在過程中體驗好與不好體驗的比重，好與不好體驗的時間長短，對記憶幾乎沒有影響。

這一定律主要是闡述人對過去體驗的記憶由兩個因素決定，一個是「高峰」，一個是「結束」。

把用戶情感地圖曲線和峰終定律結合起來，簡單畫一張圖：

既然用戶整體體驗與整個過程中好壞綜合無關，只跟幾個關鍵點有關，那么可以得到一個公式：

用戶整體體驗評價（E）=（y1-y2）+y3

y1，y2，y3 可以稱為關鍵時刻 MOT（Moment Of Truth）

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

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

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

而在逛的過程中，就像包子講的，它的體驗模式很棒，把產品作為空間的一部分。曾經有一位宜家的老顧客也說，宜家商品物有所值，展區實用，產品隨意試用，大概這就是它的「峰」吧。

扔一個我的學習小伙伴包大佬的分析：

三、互聯網產品中的峰終定律

如果說峰終定律怎么影響互聯網產品的用戶體驗的話，可以先舉幾個體驗差的例子。

很多時候，用戶在某個平臺完成某個任務后，會出現很多引誘用戶點擊的贊助商的內容。比如問卷星，每次填完，任務結束的時候，它還會打著抽獎的名義接廣告……

再舉個例子，你有沒有過在某些 app 注冊賬號，登錄 or 注冊很多次卻失敗的情況，或者花了很久時間才注冊 or 登錄成功？原因可能是賬號密碼錯誤，可能是注冊流程過多跳出率過高，可能是填寫信息冗雜……

如果這款產品不是用戶剛需的話，最終會導致很多用戶卸載它，就算你之后流程的體驗再好，用戶根本無法體驗到最后。

四、利用峰終定律打造「爽點」

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

有一些產品能在用戶使用的過程中利用峰終定律打造 「爽點」，提升用戶體驗。

如果用外賣這個來舉例子的話，應該算是一個大的服務系統，它會涉及到很多方，比如消費者，商家，騎手等，而這一整個服務系統的設計，只針對消費者而言，流程也會十分復雜，其中利用峰終定律考慮的就更多了。

那就其中用戶（消費者）與餓了么 app 的交互流程來舉例的話，用戶點外賣這個任務：

從打開 app——選擇店——選擇美食——付款，用戶的任務已經結束了，但是餓了么會在結束的時候，給用戶一個分享領取紅包的福利，用戶會覺得自己獲得了很大的優惠，體驗會十分好，這也就是利用了峰終定律的「終」。

我發現游戲里面對峰終定律是用得最多的，曾經玩過 lol，王者榮耀，吃雞手游……

如果問曾經玩 lol 或者王者最爽的時候是什么時候，那大概是：比賽過程中的 First blood，penta kill ，killing spree，legendary，you have slained an enermy 等這些配音和畫面的視覺刺激吧。

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

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

王者榮耀，吃雞這類在游戲結束的時候也會給用戶很多激勵，明明可以在結束后直接回到大廳，但它們會延長這些勝利或者失敗的體驗，如果勝利，當然是爽，還想再擁有這樣的體驗，繼續打；如果是失敗，那再接再厲，想擁有贏的體驗，繼續打……

總之就是會讓用戶上癮。它們會把這些用戶體驗做到，在游戲結束的時候這些的體驗就利用到了峰終定律的「終」。

五、利用峰終定律改善體驗步驟

「峰終定律」改善用戶體驗的步驟：

• 進行可用性測試；
• 繪制用戶旅程圖；
• 找到「峰」，「終」時刻；
• 通過用戶研究的方法找到用戶心中的關鍵時刻；
• 將「峰」、「終」，「用戶心中關鍵時刻」的體驗優化至。

在《用戶體驗的要素》一本書中，Jesse James Garrett 將用戶體驗分為了五個層級，戰略層，范圍層，結構層，框架層，表現層。

其中在框架層里面有一個很重要的概念就是導航設計，作者對導航設計的定義是：元素的組合，允許用戶在信息架構中穿行。

我覺得可以把導航設計理解為：我們從用戶的心智模型出發，結合業務目標，對信息架構的一個梳理，來幫助用戶完成目標。

通過自己手機里幾十款 app，總結了以下六種導航設計模式，包括：標簽導航，宮格導航，側邊導航，列表導航，菜單導航，輪播導航……

簡單介紹了它們的優缺點，適用場景，以及一些衍生導航與相關案例……（不過導航設計一定是視產品和情況而定的，并沒有確定的依據與理論）

一、標簽導航

標簽導航分很多種，有底部標簽導航，頂部標簽導航，底部標簽導航又可以衍生出舵式導航，頂部標簽導航又可以分為靜態或者是動態導航……

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

而關于底部標簽導航的優點，缺點以及適用場景也簡單整理了：

我發現很多用戶發布或者生產內容的 app 會將底部標簽導航進行變體，很多人把它稱為舵式導航，就像這種：

中間的「+」一般是發布的意思，并且是 app 里面使用最頻繁的一個功能，一般都會重點突出。并且，該標簽中很多時候會有二級導航，二級導航里可擴展性就比較強，如圖：

而頂部標簽導航顧名思義就是 tabbar 位于頂部，最早知道它是在 Material Design 里面，因為 Google Pixel 手機底部存在物理導航，所以將標簽導航置于頂部不會顯得突兀。它很少用作一級導航，一般是二級導航比較多，而且我發現頂部標簽導航，幾乎都是純文字的形式，比如：

突然想到今天交互設計課上的時候，老師講的人機交互里，重要的操作放在大拇指可觸達的范圍內。

而頂部標簽導航，如果是點擊標簽進行操作的話，用戶單手操作就十分不方便，所以我發現體驗好的 app 的頂部操作導航都是可以直接通過左右滑動屏幕的交互來切換。

而當標簽類目過多的時候，可以通過左滑展現更多標簽，比如很多新聞閱讀類的 app：

如果是可以滑動查看更多的話，一定要通過一些方式告訴用戶可以滑動查看更多，比如最后一個標簽隱藏一半的方式等：

關于頂部標簽導航的優缺點以及適用場景，如下：

二、宮格導航

宮格導航，也是十分常見的導航形式，除了一些工具類 app 外，大部分是作為二級頁面展示出來，并且以 icon+文字的形式居多。

如果將宮格的 icon 換成 picture 的形式的話，可以衍生出一種新的類似于卡片式導航的形式 ，可以通過垂直滑動來切換，比如：

那，如果宮格信息太多，我發現很多 app 會采用分類展示的形式，并且通過水平滑動的方式來切換，比如：

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

除此之外，宮格導航還可以在電商里面運用，在首頁的運營內容塊，它可以根據內容的重要性調整模塊的大小，比如：

關于宮格導航的優缺點和適用場景，如下：

三、側邊導航

有些書里面會把側邊導航叫做抽屜導航，這類導航其實比較少了，原本也是從 Google Material Design 里面提取出來的概念，一般會在首頁呈現一個主要功能，將其他不常用的功能收納放到側邊導航里，比如：

而關于側邊導航的優缺點以及適用場景，如下：

四、列表導航

列表導航也是十分常見，幾乎在每一個 app 里面都會存在，大部分時候是作為二級導航存在，但是也會存在于一級導航的時候，比如郵箱，iOS系統自帶的設置等。

一般在列表導航里都會有下一個層級，可以通過箭頭來告訴用戶是否有下級菜單。

當列表信息比較多的時候，可以對列表進行分類，可以添加小標題或者直接分隔開。比如：

而在有些列表導航里，我們還需要展示給用戶一些預覽信息，比如 iOS系統里的健康，個人信息里的一些基本數據展示，如下：

關于列表導航的優缺點以及適用場景，如下：

五、菜單導航

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

Menu 是臨時的一張紙（paper），由按鈕（button）、動作（action）、點（pointer）或者包含至少兩個菜單項的其他控件觸發。

比如：

當信息層級變多的時候，菜單導航里要展示一層或者兩層信息，比如大眾點評采取的形式：

關于菜單導航的優缺點以及適用場景，如下：

六、輪播導航

還有一些導航比如輪播導航，完全的沉浸式體驗，高度簡潔的導航，比如天氣，但是這種導航因為輪播點的大小不會很明顯，所以用戶很難快速感知自己所在位置，并且輪播導航輪播的數量也不宜過多 。

其實導航的類型應該還有很多，并且在一個 app 里面幾乎不可能只使用一種導航，哪怕只是一個頁面，也會存在多種導航的組合形式，比如：

總結

• 導航的形式一定是根據你的產品的諸多因素進行選取，并不能完全按照我上文的適用場景為依據；
• 幾乎每一個 app，每一個 app 的每一個頁面，都會涉及到多種導航模式，需要結合具體場景進行組合選??；
• 導航的具體展現可以通過：文字，icon，文字+icon 的形式；
• 有些導航比如標簽導航在設計的時候有多種狀態，比如 unselected，selected 等狀態；
• 導航在 iOS 和 android 里面的應用會不一樣，比如標簽導航適配 iOS系統，側邊導航適配 android 系統；
• 導航設計必須傳達出它的內容和用戶當前瀏覽頁面之間的關系；
• 能夠引導用戶以很好的體驗完成目標的導航設計都是優秀的。

描邊插畫：可以簡單理解為眾多線面結合圖標組合在一起，互相呼應而組成一個大畫面。畫面中的元素除了面以外，還具有描邊，因此也叫描邊插畫。

本文內容：文章會詳解如何畫一張描邊插畫，教程素材沒有用我之前的插畫來做步驟分解，而是新畫了一張插畫以作示范，繪畫原理都一樣，理解原理就好。除了具體步驟以外，會針對一些易犯錯誤的地方添加重點標記。

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

一、草圖階段

1. 確立主題，畫草稿

這次插畫的主題源自于我的一個夢：在草地上，遺落的帆布鞋里面長滿了鮮花，小鳥守在花的旁邊歌唱。

確定主題后，把腦海里的畫面畫出來，可以畫在紙上，也可以用數位板在 ps 里面畫，按照個人習慣就好。我比較喜歡手繪，因此在紙上畫。

2. 打開AI，調整設置

新建畫布1600*1200

視圖-勾選對齊點

3. 把草圖拉到畫面中，調整大小

二、線稿

1. 描邊設置及要注意的問題

在描邊插畫中，常見的問題之一就是描邊的粗細問題. 以及描邊間關系的處理問題。

描邊粗細問題（下圖以之前的四季插畫為例子）

描邊間關系處理

描邊設置

描邊的粗細是根據畫布大小而決定的，1600*1200的畫布，我習慣用 8pt 的粗細的線條，但是如果畫布是1200*900，8pt 則顯得過粗。具體的粗細可以根據情況而調整。

2. 線稿畫法

布爾運算法

形狀斷點重連法

形狀生成器

鋼筆勾勒法

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

三、色稿

1. 增加背景色

2. 色稿層的繪制

3. 顏色調整

4. 高光與暗部

5. 經過高光與暗部塑造后的畫面

四、 風格塑造與整體調整

1. 風格塑造

最近看到 kit8 大神的畫，突然想到如果白線運用在線性插畫會怎樣，就嘗試了這種風格。把線稿復制一層置于頂上，改成白色，2px 粗細的線，然后向旁邊移動錯位，破一下畫面沉悶的感覺。

2. 整體調整

看到這里，你應該也發現了，畫面是比較灰的，因為我都是選擇低飽和度的顏色，如果需要調整，就在 AI 中把插畫導出 SVG 格式。然后拖到 PS 里面進行色相飽和度的調整。

3. 保存喜歡的配色

在顏色調整過程中，遇到喜歡的配色就保存下來，這樣一張插畫就完成了。

一、何為版面率

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

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

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

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

二、版面率對畫面氣質的影響

說完版面率的概念我們再來說一說版面率對畫面氣質的影響。

一般來說版面率越高，視覺張力就越大，版面也會更活潑與熱鬧；反之，版面率越小，給人感覺就越典雅與寧靜，版面也會更有格調。

上圖中高版面率的海報相對于低版面率的更熱鬧與活潑；低版面率的則更典雅。

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

版面率的高低能夠影響版面的氣質，所以我們實際工作中也要根據項目的氣質分配合適的版面率。比方說典雅氣質的項目我們就要用低版面率版面，如果用高版面率顯然是與項目本身的氣質相悖的。

三、留白率

說完版面率我們再來說一下留白，留白的概念大家都懂。而這里所說的留白更多的是指頁面的負空間。

頁面中去除內容后的空間就是負空間，如下面這個頁面。

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

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

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

空版留白最多，滿版留白最少。當然這也不是絕對的，有的作品中雖然是滿版，但空間廣闊，比如天空什么的，都可以當作留白來看待。

四、留白率對畫面的影響

上面說來留白率跟版面率也有一定的關聯，所以他們對畫面氣質的影響也是如出一轍的。我們可以先來看一下低留白率與高留白率的幾個作品。

通過這幾個作品我們可以看出留白少的信息更豐富，版面更有活力，也更熱鬧，親和力也更強。而留白多的更雅致，更安靜典雅，更有格調跟品質感，但親和力稍弱。

五、案例演示

下面進行案例演示吧，首先看一看文案。

這一步我們需要把文案的層級關系拉開，大中小區分的明顯一點。這個文案的層級關系肯定是 欲望の森林 ＞ 英文 ＞ 欲望是無盡的森林 ＞ 小文字信息的。

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

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

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

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

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

做完了留白少版面率高的，我們再來做一個典雅一點的。

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

一定是低版面率和較多留白的版面更能體現典雅與安靜感。所以我們在版面安排上要使其留白更多，同時版面率要小一點。下圖就是一個基本布局。

最后我們再根據版面布局置入圖片微調一下就可以了，如下。

總結

版面率跟留白率都能夠影響版面的氣質，我們做項目的時候具體問題具體分析，根據項目氣質去設定版面率跟留白率的大小。

大家好，從今天開始我要以大白話且通俗易懂的方式，來與大家分享我的知識和觀點。

主要講解的是平面設計基礎理論知識與實際用法，后期會講一些高階的設計思維。

本章節適合設計小白和需要填補設計基礎的設計師學習閱讀。 

目錄

1、理解、提取與布置

2、貼近與遠離

3、排列與對齊

4、視線移動方向

5、組織與重復

1、理解、提取與布置

理解、提取與布置指的是根據設計的意圖來進行信息的整理，然后再將整理好的信息中重要和不重要的信息按照優先級排列出來，最后再根據排列好的信息按個人美感和美學理念擺放到平面中。

1.1 理解部分

當收到一個海報設計需求時，我們不是要馬上動手去做，而是要去思考需要設計的海報受眾群體是哪些人，具體要怎么展示它，它展示的目的是什么。 

下面我就簡單介紹一下設計思維及方法，首先要設置定一個需求【現代美術館，需要設計一個簡潔大方的海報】。根據這個需求在進行具體的思維延伸。

1.1.1 海報的受眾群體

當我們收到設計需求時，要考慮海報的受眾群體，男人/女人，少年/青少年/中年/老年，每種受眾群體接受教育的程度和經歷均不同，要根據不同的受眾做合適的設計。當我們按照具體需求定義好受眾群體后，就可以考慮推斷用哪種風格來展示海報了。

對于現代美術館需要一個簡潔大方的海報，這個需求所涵蓋的年齡區間比較大，基本上所有人都可以參觀美術館。那我們只要避免使用“個性化”的表象特征元素就可以解決這個問題了。

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

1.1.2 怎么展示海報

現代美術館，需要設計一個簡潔大方的海報這個需求，可以根據主關鍵詞“現代”和“美術館”，次關鍵字“簡潔”和“大方”來推斷要采用哪種設計語言?！艾F代”的表現形式是無襯線體、干練（有棱角）、簡潔、沒有太多情緒。而“美術館”只要在圖片的處理上讓主題與圖片串聯共通就可以了。

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

1.1.3 運用理解部分生成原型

根據前面的分析大概有了個原型，分為上下構圖。上部分是美術館的部分場景圖片，下部分是具體的內容信息部分。所有要素均以現代感、簡潔干練、配色不復雜、線性、整潔、清爽、專業、無太多情緒為基礎進行設計的。

以上就是“信息的整理”中的“理解部分”，當設計師收到需求時，不要馬上著手去做。先思考采用哪種表現形式（視覺語言）更適合需求，分析后再去做設計，這樣才能準確表達具體的需求，也能做出更符合需求的設計。

1.2 提取部分

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

1.3 布置部分 

把提取并排列好優先級的信息規整好，就可以布置在平面上了。用之前設計好的原型套用已提取好的信息就可以了。特別要注意重要的內容放大，不重要的內容弱化。

* 要點

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

提取：其次要明確作品內容中什么是最重要的、根據優先級排序。

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

2、貼近與遠離

貼近和遠離的概念也是比較好理解的。與格式塔視知覺的親密性與遠離性是一個道理，初期只講一些通俗易懂的概念，像格式塔視知覺以后會講。

2.1 貼近和遠離的 基礎概念

貼近是指同類要素擺放在一起會呈現出一種共通性或產生某種規則，而遠離是指同類要素分開擺放看上去就沒有共通性或不會感到有某種規則。

當把同類要素（男人女人）放到一起，會覺得他們有一定的共通性，而且看上去像一對情侶。相反把同類要素（男人女人）分開來放，會覺得他們毫無關系。

我們把這種概念應用在平面設計上，如下圖所示。

相同的要素擺放在一起會有一定的共同性，相反分開擺放則看上去沒有關聯。

貼近與遠離基礎概念的實際案例

2.2 貼近和遠離的 進階概念

把同類要素放到一起有種井然有序的感覺。如果要處理較為規整傳統的版式時，可以考慮多將要素放到一起形成規則。另外把同類要素分開擺放，會感到沒有共通性和規律規則，但是能為平面增加節奏感和沖擊力。

貼近與遠離進階概念的實際案例

其次遠離能使平面產生留白，通過留白也能使平面具有關聯性。

雖然說遠離能使要素看上去沒有共同性和規則，但如果要素處在一個平面中，利用留白呈現出一種關聯性。這就像吵架的夫妻一樣，同在一個床上，女的偏床左側，男的偏床右側，呈現一種遠離性。但他倆還是處在“床”這個平面中，也會呈現一種關聯性。

貼近與遠離進階概念的實際案例

* 要點

同類要素貼近擺放在一起相互關聯，同類要素遠離擺放相互排斥。

同類要素貼近擺放在一起平面有規則，同類要素遠離擺放增添節奏。

留白也能使要素有一定的關聯性。

3、排列與對齊

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

3.1 排列

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

排列的目的是讓平面變得有序和規則，當平面達到有序和規則就會呈現出一種舒適感，好比自然中的和諧。

3.2 對齊

對齊也可以理解為將要素按照一定的規則進行布置，使平面達到一種平衡與和諧。對齊與排列的差別在于，對齊是在排列的基礎上進行操作的。先將要素按照一定規則進行排列，然后再將要素進行對齊。排列是畫一個大體的框架，而對齊是做框架里的精細操作。

排列與對齊的實際案例

* 要點

排列與對齊的目的是讓平面變得有序和規則，當平面達到有序和規則就會呈現出一種舒適感。

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

4、視線移動方向

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

視線的移動方向分為三個知識點，橫排閱讀、豎排閱讀、流水式閱讀。流水式閱讀以后會講。

隨便補充一下啊，我讀過的設計文獻中提到的閱讀方法只有“Z字視線移動方向”，而沒有“T字視線移動方向”。有一種學習方法叫“T型閱讀法”，與視線移動方向的“T字視線移動方向”不是一個概念。視線本身就是從上到下從左到右的形式閱讀的，形成了Z字閱讀方式，我覺得是國人是把這些概念給曲解了，如果有說的不對的地方，也請大佬們多多指點。

4.1 橫排閱讀

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

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

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

橫排閱讀的實際案例

4.2 豎排閱讀

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

一定要注意，豎向排列方式內容區在平面的最右面，與橫向排列方式不同。這個規定就像地球為什么是圓的的道理一樣。

豎排閱讀的實際案例

* 要點

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

不要打破規則，一切以引導讀者視線為主。

5、組織與重復

按照一定規則構成布局來編排要素，能使種類繁多的要素顯得整潔有序。

5.1 組織

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

組織規則的實際案例

5.2 重復

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

重復規則也可以應用在平面中、元素中、要素中、形狀中等，靈活運用重復能使平面具有統一性，也能制造趣味性，增加讀者對作品的印象。

重復規則的實際案例

* 要點

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

靈活運用重復能使平面具有統一性，也能制造趣味性，增加讀者對作品的印象。