<address id="6yyjx"><strong id="6yyjx"></strong></address>
從用戶的操作流程上來說，如果用戶想使用一個功能，必然首先要發(fā)現(xiàn)它。如果連功能入口都找不到，后續(xù)的用戶體驗也無從談起。而篩選功能可以幫助用戶對功能信息進行快速的定位，縮短用戶的查找時間，這篇文章我就來跟大家聊一下篩選功能。
三種常見基本樣式
首先要明確一個概念，篩選功能并不是普通的單一功能項，它和導(dǎo)航一樣是一個體系。既然是體系，必然有最基本的組成部分。篩選功能（體系）常見的樣式有以下三種：tab類，(下拉)列表類，標簽類。這三種樣式是篩選功能最基本的組成元素，不管你產(chǎn)品的篩選功能做的有多么復(fù)雜，都可以看成是這三種基本元素的不同組合形式。
Tab
Tab是最常見的篩選樣式，一個tab項代表一個篩選維度，直接平鋪的展示出來，用戶很容易感知到。
根據(jù)方向我們可以將tab分為橫向欄tab和側(cè)向欄tab。橫向欄tab可展示2-5個選項，如果超過了5個，那么就需要用戶滑動才能看到。所以當篩選維度過多的時候，我們可以考慮使用側(cè)向欄tab，京東商品分類這里用的就是典型的側(cè)向欄tab，我數(shù)了一下總共40個選項，這里如果使用橫向欄tab用戶可能要側(cè)向滑動8屏，操作成本過高。
當然當選項過多的時候，我們還有一個法子，就是使用彈框，用戶點擊后可以看到全部的選項。
列表式
列表式也可稱之為list，其特點就是占用空間小。因為它可以將選項隱藏起來，用戶需要點擊才能看到所有的選項，因此在有限的空間里可以展示更多的篩選維度。礙于手機屏幕尺寸的限制，列表式篩選現(xiàn)在應(yīng)用的越來越普遍。
列表式篩選的樣式其實有很多?？梢宰龀蓀opover類，actionsheet類，activityview類。這些樣式很難去說誰好誰壞，這里我就只是列舉出來，具體用哪種樣式，大家自己來判斷。
標簽式
對于標簽式，很難進行準確的定義，我更傾向于將單選按鈕，多選按鈕，switch等統(tǒng)稱為標簽式，標簽式只能針對單一條件進行篩選，這點和tab很類似。標簽式很少單獨出現(xiàn)，多數(shù)情況下都是與tab和列表式結(jié)伴而行。
在淘寶里用戶可以點擊視圖icon來切換視圖模式，這就是典型的標簽式篩選。
當然以上三種只是最常見的篩選元素，其余的還有輸入框，滑塊，地區(qū)/日期選擇器等主要用于信息錄入的組件。
常見的篩選體系
了解了最基本的元素，接下來看一些比較復(fù)雜的篩選樣式。上面我也提到了任何產(chǎn)品的篩選體系都可以看成是這三種基本元素的不同組合形式。為了讓大家更好的理解，我一一舉例來說明：
tab+tab:
tab之所以受到青睞，是因為其較低的學(xué)習成本。每一個tab代表一個類別，而且是直接展示給用戶看的，所以很多產(chǎn)品的篩選功能都會優(yōu)先考慮使用tab。即使功能結(jié)構(gòu)復(fù)雜到無法用一層tab來完成篩選任務(wù)，設(shè)計師也會考慮使用雙層tab樣式（tab+tab）的樣式。（PS.當然下圖應(yīng)該算是segment control+tab）
tab+列表式：
當產(chǎn)品不斷的發(fā)展，功能結(jié)構(gòu)愈發(fā)的復(fù)雜，過于扁平的tab已經(jīng)無法滿足篩選的需求。以看電影這個場景為例，用戶的需求是找到合適的影片和電影院。對于用戶來說，衡量一家電影院會從地址、票價、品牌和特色服務(wù)（支持改簽、IMAX廳等）這四個角度入手。這些篩選需求很難通過tab來完成，我們需要列表式的協(xié)助。
tab+列表式+標簽：
當產(chǎn)品的功能結(jié)構(gòu)進一步復(fù)雜，這也給篩選功能增加了新的難題。以boss直聘來說，這里的篩選項主要分為四個：排序方式（推薦/）、工作地點、公司規(guī)模、崗位要求。其中后三個篩選項包含大量的條件，特別工作地點，需要進一步定位到街道或地鐵站。對于這種多維度，深層級的篩選需求我們可以使用tab+列表式+標簽的樣式。
這里我選擇boss直聘的另一個原因在于它的tab數(shù)用戶是可以自己增減的，每一個tab代表一條求職意向，最多可以添加3條求職意向。
篩選體系的容器
篩選體系是由眾多篩選項組成的，這些篩選項需要一個“容器”來承載。上面說的boss直聘用的是下拉列表，這種樣式其實還比較簡單的，我們可以看一些功能更加復(fù)雜一點的產(chǎn)品，比如各大電商平臺。這里使用的是抽屜式篩選框，說它是抽屜式，因為它跟抽屜一樣，用的時候可以拉出來，不用的時候可以關(guān)起來，節(jié)省了空間。從某個角度來說，我們可以把抽屜式看成列表式的一個放大版。抽屜式篩選框可以容納更多的篩選條件，像我在上面提到的輸入框，多選按鈕都可以在這里使用。
從底部彈出的動作欄也比較常見，這里使用了滑塊和單選按鈕。
Airbnb的篩選功能以浮層為載體，還使用比較少見的switch和stepper。
當然Airbnb篩選功能最大的亮點在于可以向用戶即時反饋篩選結(jié)果的數(shù)目，用戶不太可能會進入搜索結(jié)果為0的空頁面，避免無效操作。
以上說的篩選體系都比較傳統(tǒng)，大部分都是基于對現(xiàn)有結(jié)果進行篩選，其實我們可以對篩選功能進行前置。例如，我們可以在用戶進行搜索之前就對結(jié)果進行篩選。
甚至在新用戶第一次使用產(chǎn)品的時候，可以讓用戶填寫一些個人信息以便進行個性化推送。
篩選功能的存在意義在于幫助用戶對功能信息進行快速的定位，對篩選功能進行適度的前置可以簡化用戶的操作流程，同樣可以達到節(jié)省用戶時間的目的。
總結(jié)：
大家在日常使用APP過程中也可以帶有目的性，發(fā)現(xiàn)一些好看的UI或是好的交互點可以截圖保存和思考：為什么這么設(shè)計？目的是什么？分析其優(yōu)勢之處，還可以和競品的相似交互進行對比，始終相信“不積跬步 無以至千里”，通過在點滴中慢慢積累，今后當你遇到類似的問題時就可以快速回憶起這些知識點，自然就可以運用自如，thanks~
在這里先給大家分享一組近期APP使用過程中發(fā)現(xiàn)的UI&交互知識點，大家可以一起學(xué)習交流，對于個人觀點不認同的可以在下面留言探討，thanks~
產(chǎn)品即場景，體驗又貫穿整個產(chǎn)品~孰重孰輕早已分不清
產(chǎn)品即場景，而場景化核心要素之一的“體驗”，是其中最重要的一項。
本文從體驗出發(fā)，結(jié)合AARRR（用戶增長）模型進行闡述，其中我認為該模型的使用必須是在產(chǎn)品搭建的場景下才能運作的。而其中涉及每一步的良好體驗剛好又反哺場景的完善。
從獲取-激活-留存-轉(zhuǎn)化-傳播每一個步驟中都存在內(nèi)部因素和外部因素。本文只講內(nèi)部因素，產(chǎn)品從最開始的外部獲客，轉(zhuǎn)向產(chǎn)品內(nèi)部的使用體驗，再轉(zhuǎn)向外部傳播的這么一個過程。
文章不是教案，更不是真理。希望大家?guī)е械难酃馊タ创恳黄恼?。畢竟思辨精神才是形成獨立思維的法寶。由于文章較長，我會分成上下兩部分發(fā)布，進入正文：
獲取（ACQUISITION）分為三個部分：
一：自然流量的獲取
自然流量的獲取，我們能干涉其中的體驗非常少，只能打磨產(chǎn)品本身。但是自然流入的用戶一定是基于以下幾個點中的其中一個或多個。我們或許可以干涉體驗前~
1.某個社會現(xiàn)象、熱點所引發(fā)的相關(guān)功能性需求（例如前不久滴滴司機殺害空姐事件，引發(fā)多少芳齡少女的恐慌。提高了強烈的安全意識，這時候你會發(fā)現(xiàn)App Store里面一款app殺了出來“怕怕”（有興趣的朋友自行下載體驗），正是這個社會熱點現(xiàn)象引發(fā)的自然流量暴增。當然也不排除產(chǎn)品借這個熱點營銷自己的產(chǎn)品）
2.某個痛點確確實實需要解決（當某類用戶存在某個痛點時，會自己通過搜索或者同類產(chǎn)品對比選擇一款產(chǎn)品進行使用，如果你的產(chǎn)品剛好能幫助使用者解決痛點，那么你成功吸引了用戶。）
3.純粹進行產(chǎn)品的體驗（產(chǎn)品發(fā)燒友、同類競品的體驗人員、無意中下載的等）。我們稱為無效流量，因為這部分用戶一般是不太可能成為產(chǎn)品的忠實粉絲的。他沒有明確的目的、沒有明確要解決的痛點。
二：運營推廣的獲取
運營推廣這個名詞在互聯(lián)網(wǎng)誕生之前就已經(jīng)存在了。只是說原來傳統(tǒng)的營銷手段即產(chǎn)品-價格-渠道-促銷開始逐漸失效。轉(zhuǎn)而變?yōu)閳鼍盎倪\營推廣。將推廣落實到具體的小場景中。
1.線上推廣
其中線上推廣包含線上營銷活動（營銷活動又分為已有話題進行營銷【可以選擇融入當前的熱點話題類似節(jié)日、娛樂圈大事件等】&【提供話題痛點解決方案進行營銷】和制造話題營銷【創(chuàng)造業(yè)內(nèi)的話題】【通過深度用戶進行制造話題】、優(yōu)惠活動（包括邀請好友得好禮、會員優(yōu)惠、某個節(jié)日優(yōu)惠等）。線上推廣無非就是通過網(wǎng)絡(luò)搭建虛擬場景，通過場景邊界的不斷延伸，覆蓋吸引更多的用戶參與進來。
2.線下推廣
線下推廣包含地推（地推不可避免的會帶來2部分的人群：被地推活動中的獎品吸引的人；確實被產(chǎn)品的介紹所吸引的人）、海報&代言（同樣會有2部分人群：被明星效應(yīng)所吸引的人；被產(chǎn)品介紹所吸引的人）、門店的互相導(dǎo)流合作。線下推廣效率遠遠沒有線上推廣來的快。但是對于需要線下場景的產(chǎn)品來說，這又是必不可少的。
三：社群自傳播
通過單點擊破，這就需要運營團隊有很好的洞察能力，找到符合產(chǎn)品調(diào)性的社群，通過事件引爆該社群或者社區(qū)，讓社群成為你產(chǎn)品的擁護者和傳播者。
1.通過老帶新的模式進行獲取用戶
當產(chǎn)品與老用戶之間建立很好的紐帶關(guān)系后，老用戶自然會以個人為中心，向外幫你宣傳產(chǎn)品。
2.引爆社群
通過各類社區(qū)，找到符合你產(chǎn)品的目標人群。通過對該社群的研究，運用社群內(nèi)部語言或者表達，調(diào)動整個社群幫你發(fā)力。有點及面的擴散，稱之為“氣球理論（很細的一根針就能戳爆氣球）”這同樣是能引爆傳播性特別重要的一點。
3.參與感（社會關(guān)系綁定）
當你周圍的人都在轉(zhuǎn)發(fā)或者都在使用的時候，如果你不了解或不使用的話，會引起個體的孤獨感。也就是說“他們都在玩，我不玩就落伍了”，但是這種情況在產(chǎn)品推廣的前期一般不太會出現(xiàn)。當傳播勢能達到一定程度的時候，才會出現(xiàn)刷爆朋友圈！
激活（ACTIVATION）分為二個部分：
當用戶從外部導(dǎo)流進產(chǎn)品后，這時用戶的去或留都跟產(chǎn)品&業(yè)務(wù)有關(guān)。如何讓用戶在進入產(chǎn)品后自然而然的進行使用也就是防呆原則。對，通過引導(dǎo)或者吸引使用者進行下一步操作。（打個比方，你去一家陌生的餐廳，進去后沒任何人招呼你，沒人告訴你要去選位置或者點菜，是不是有不知所措的感覺，我想你很快就會另尋他家吧）
一：進入產(chǎn)品后的操作引導(dǎo)
1.視覺引導(dǎo)（包括頁面元素優(yōu)先級、頁面元素突出強弱進行視覺上的引導(dǎo)，很常見的就是：在你第一次使用某個產(chǎn)品時，會引導(dǎo)使用者進行第一步第二步的操作，降低用戶對產(chǎn)品的陌生感）
2.動效引導(dǎo)（通過頁面浮層的形式教育用戶如何進行操作，這也是在產(chǎn)品設(shè)計中，對新用戶的一種引導(dǎo)方式）說到底就是為了消除用戶對新鮮事物的陌生感和手足無措感。
二：產(chǎn)品本身是否能激起用戶的探索欲
當然這個問題本身是建立在是否能真正的幫助用戶解決某些方面的痛點。否則再強的探索欲，也跟你產(chǎn)品本身沒有關(guān)系。如何激起用戶的探索欲？
1.產(chǎn)品整體視覺表現(xiàn)、使用流程的體驗是不是夠吸引人，是不是有屬于產(chǎn)品本身吸引人的點。（當年的path效果，直接將它送上全民熱潮之巔）
2.產(chǎn)品是否對使用者產(chǎn)生持續(xù)的吸引能力，產(chǎn)品前期只有不斷的通過各種方式刺激用戶。（產(chǎn)品體驗優(yōu)化、活動力度、宣傳方式、讓惠讓利等）但需要注意的是：過度營銷不等于有效刺激。
3.產(chǎn)品的任務(wù)流程設(shè)置是否合理，正常情況都是由簡單到復(fù)雜的程度設(shè)置任務(wù)，由于用戶的沉默成本，當完成一定任務(wù)后，就會沉淀下來慢慢成為產(chǎn)品的忠實用戶。（摩拜產(chǎn)品是先讓用戶填寫個人信息，最后才提示充值押金，站在使用者的角度來看，已經(jīng)把個人信息都出賣給平臺了，還在乎那200多塊錢嗎？不然你讓他把流程倒過來試試，先充錢，再填信息。保證沒多少人會用）。流程設(shè)置就像鉤子一樣，慢慢慢慢的把用戶勾住。
上半部分先到這里，下半部分會從“留存”“轉(zhuǎn)化”“傳播”角度進行展開~
多數(shù)人能夠成為很厲害的設(shè)計師，很厲害的產(chǎn)品經(jīng)理。凡事都會有所謂的套路，當你熟知了解某個行業(yè)，或者多個行業(yè)的套路時。你會站在更高的視角看待問題，同樣你會走的比人家更遠更快。所謂的套路，是基于個人而言，可能你有個很好的導(dǎo)師能夠告訴你以往的經(jīng)驗。但是我更認為，套路是通過一步步看似笨拙的努力不斷總結(jié)不斷歸納
峰終定律是由諾貝爾獎得主 DanielKahneman 提出的，百度百科上它是屬于心理學(xué)上的定義。
我把它結(jié)合了自己的理解應(yīng)用在設(shè)計學(xué)上可以解釋為：
用戶在使用某個硬件產(chǎn)品，軟件產(chǎn)品或者服務(wù)系統(tǒng)來完成自己目標的過程中，用戶情感地圖曲線的波峰（體驗最好）、波谷（體驗最差）、結(jié)束點的體驗，決定用戶對整個過程的體驗評價。
而在過程中體驗好與不好體驗的比重，好與不好體驗的時間長短，對記憶幾乎沒有影響。
這一定律主要是闡述人對過去體驗的記憶由兩個因素決定，一個是「高峰」，一個是「結(jié)束」。
把用戶情感地圖曲線和峰終定律結(jié)合起來，簡單畫一張圖：
既然用戶整體體驗與整個過程中好壞綜合無關(guān)，只跟幾個關(guān)鍵點有關(guān)，那么可以得到一個公式：
用戶整體體驗評價（E）=（y1-y2）+y3
y1，y2，y3 可以稱為關(guān)鍵時刻 MOT（Moment Of Truth）
這兩天和包子聊到宜家的峰終定律，突然明白了為什么我們有些課程調(diào)研，大家都喜歡去宜家調(diào)研了。
雖然它的店員很少，找貨物也要自己找椅子搬下來，就算只買一件家具也需要逛完整個商場，但是每次逛完結(jié)束的時候都可以吃那個特別好吃的「一元冰淇淋」呀，這就是它的「終」。
而在逛的過程中，就像包子講的，它的體驗?zāi)Ｊ胶馨?，把產(chǎn)品作為空間的一部分。曾經(jīng)有一位宜家的老顧客也說，宜家商品物有所值，展區(qū)實用，產(chǎn)品隨意試用，大概這就是它的「峰」吧。
扔一個我的學(xué)習小伙伴包大佬的分析：
如果說峰終定律怎么影響互聯(lián)網(wǎng)產(chǎn)品的用戶體驗的話，可以先舉幾個體驗差的例子。
很多時候，用戶在某個平臺完成某個任務(wù)后，會出現(xiàn)很多引誘用戶點擊的贊助商的內(nèi)容。比如問卷星，每次填完，任務(wù)結(jié)束的時候，它還會打著抽獎的名義接廣告……
再舉個例子，你有沒有過在某些 app 注冊賬號，登錄 or 注冊很多次卻失敗的情況，或者花了很久時間才注冊 or 登錄成功？原因可能是賬號密碼錯誤，可能是注冊流程過多跳出率過高，可能是填寫信息冗雜……
如果這款產(chǎn)品不是用戶剛需的話，最終會導(dǎo)致很多用戶卸載它，就算你之后流程的體驗再好，用戶根本無法體驗到最后。
一款好的產(chǎn)品不僅能夠解決用戶的「痛點」，也能刺激用戶的「癢點」，更能打造用戶的「爽點」。
有一些產(chǎn)品能在用戶使用的過程中利用峰終定律打造 「爽點」，提升用戶體驗。
如果用外賣這個來舉例子的話，應(yīng)該算是一個大的服務(wù)系統(tǒng)，它會涉及到很多方，比如消費者，商家，騎手等，而這一整個服務(wù)系統(tǒng)的設(shè)計，只針對消費者而言，流程也會十分復(fù)雜，其中利用峰終定律考慮的就更多了。
那就其中用戶（消費者）與餓了么 app 的交互流程來舉例的話，用戶點外賣這個任務(wù)：
從打開 app——選擇店——選擇美食——付款，用戶的任務(wù)已經(jīng)結(jié)束了，但是餓了么會在結(jié)束的時候，給用戶一個分享領(lǐng)取紅包的福利，用戶會覺得自己獲得了很大的優(yōu)惠，體驗會十分好，這也就是利用了峰終定律的「終」。
我發(fā)現(xiàn)游戲里面對峰終定律是用得最多的，曾經(jīng)玩過 lol，王者榮耀，吃雞手游……
如果問曾經(jīng)玩 lol 或者王者最爽的時候是什么時候，那大概是：比賽過程中的 First blood，penta kill ，killing spree，legendary，you have slained an enermy 等這些配音和畫面的視覺刺激吧。
按照常規(guī)的模式是，殺人后系統(tǒng)直接提示「您已經(jīng)殺滅了一名敵人」，但是它會去強化這種殺人的體驗，將殺人的場景分為多種類型，通過視覺上的彈框擊殺提示與配音上的激勵疊加，把殺人的體驗不斷深化，做到，另外在推塔和偷掉水晶的時候是不是也是最爽的時候呢？我覺得這里就利用了峰終定律的「峰」。
我記得在游戲結(jié)束的時候，比如 lol 里面推掉水晶的時候，游戲畫面會停止幾秒，然后再出現(xiàn)水晶慢慢破滅，加上大大的「勝利」二字，有的時候回到大廳還需要等幾秒的時間。
王者榮耀，吃雞這類在游戲結(jié)束的時候也會給用戶很多激勵，明明可以在結(jié)束后直接回到大廳，但它們會延長這些勝利或者失敗的體驗，如果勝利，當然是爽，還想再擁有這樣的體驗，繼續(xù)打；如果是失敗，那再接再厲，想擁有贏的體驗，繼續(xù)打……
總之就是會讓用戶上癮。它們會把這些用戶體驗做到，在游戲結(jié)束的時候這些的體驗就利用到了峰終定律的「終」。
「峰終定律」改善用戶體驗的步驟：
在《用戶體驗的要素》一本書中，Jesse James Garrett 將用戶體驗分為了五個層級，戰(zhàn)略層，范圍層，結(jié)構(gòu)層，框架層，表現(xiàn)層。
其中在框架層里面有一個很重要的概念就是導(dǎo)航設(shè)計，作者對導(dǎo)航設(shè)計的定義是：元素的組合，允許用戶在信息架構(gòu)中穿行。
我覺得可以把導(dǎo)航設(shè)計理解為：我們從用戶的心智模型出發(fā)，結(jié)合業(yè)務(wù)目標，對信息架構(gòu)的一個梳理，來幫助用戶完成目標。
通過自己手機里幾十款 app，總結(jié)了以下六種導(dǎo)航設(shè)計模式，包括：標簽導(dǎo)航，宮格導(dǎo)航，側(cè)邊導(dǎo)航，列表導(dǎo)航，菜單導(dǎo)航，輪播導(dǎo)航……
簡單介紹了它們的優(yōu)缺點，適用場景，以及一些衍生導(dǎo)航與相關(guān)案例……（不過導(dǎo)航設(shè)計一定是視產(chǎn)品和情況而定的，并沒有確定的依據(jù)與理論）
標簽導(dǎo)航分很多種，有底部標簽導(dǎo)航，頂部標簽導(dǎo)航，底部標簽導(dǎo)航又可以衍生出舵式導(dǎo)航，頂部標簽導(dǎo)航又可以分為靜態(tài)或者是動態(tài)導(dǎo)航……
底部標簽導(dǎo)航是最基本的導(dǎo)航，幾乎絕大部分 app 中都在用，tabbar 位于頁面最底部，一般3-5個 tabbar，有文字+icon，也有純 icon 形式，但大部分是文字+icon 的形式，我想是減少用戶記憶負擔吧，如下：
而關(guān)于底部標簽導(dǎo)航的優(yōu)點，缺點以及適用場景也簡單整理了：
我發(fā)現(xiàn)很多用戶發(fā)布或者生產(chǎn)內(nèi)容的 app 會將底部標簽導(dǎo)航進行變體，很多人把它稱為舵式導(dǎo)航，就像這種：
中間的「+」一般是發(fā)布的意思，并且是 app 里面使用最頻繁的一個功能，一般都會重點突出。并且，該標簽中很多時候會有二級導(dǎo)航，二級導(dǎo)航里可擴展性就比較強，如圖：
而頂部標簽導(dǎo)航顧名思義就是 tabbar 位于頂部，最早知道它是在 Material Design 里面，因為 Google Pixel 手機底部存在物理導(dǎo)航，所以將標簽導(dǎo)航置于頂部不會顯得突兀。它很少用作一級導(dǎo)航，一般是二級導(dǎo)航比較多，而且我發(fā)現(xiàn)頂部標簽導(dǎo)航，幾乎都是純文字的形式，比如：
突然想到今天交互設(shè)計課上的時候，老師講的人機交互里，重要的操作放在大拇指可觸達的范圍內(nèi)。
而頂部標簽導(dǎo)航，如果是點擊標簽進行操作的話，用戶單手操作就十分不方便，所以我發(fā)現(xiàn)體驗好的 app 的頂部操作導(dǎo)航都是可以直接通過左右滑動屏幕的交互來切換。
而當標簽類目過多的時候，可以通過左滑展現(xiàn)更多標簽，比如很多新聞閱讀類的 app：
如果是可以滑動查看更多的話，一定要通過一些方式告訴用戶可以滑動查看更多，比如最后一個標簽隱藏一半的方式等：
關(guān)于頂部標簽導(dǎo)航的優(yōu)缺點以及適用場景，如下：
宮格導(dǎo)航，也是十分常見的導(dǎo)航形式，除了一些工具類 app 外，大部分是作為二級頁面展示出來，并且以 icon+文字的形式居多。
如果將宮格的 icon 換成 picture 的形式的話，可以衍生出一種新的類似于卡片式導(dǎo)航的形式 ，可以通過垂直滑動來切換，比如：
那，如果宮格信息太多，我發(fā)現(xiàn)很多 app 會采用分類展示的形式，并且通過水平滑動的方式來切換，比如：
但是上面兩種可以垂直或者水平滑動的形式，一定要讓用戶知道是可以水平或者垂直滑動的，采取的是邊界地方信息只展示一半的形式，告訴用戶可以繼續(xù)滑動……
除此之外，宮格導(dǎo)航還可以在電商里面運用，在首頁的運營內(nèi)容塊，它可以根據(jù)內(nèi)容的重要性調(diào)整模塊的大小，比如：
關(guān)于宮格導(dǎo)航的優(yōu)缺點和適用場景，如下：
有些書里面會把側(cè)邊導(dǎo)航叫做抽屜導(dǎo)航，這類導(dǎo)航其實比較少了，原本也是從 Google Material Design 里面提取出來的概念，一般會在首頁呈現(xiàn)一個主要功能，將其他不常用的功能收納放到側(cè)邊導(dǎo)航里，比如：
而關(guān)于側(cè)邊導(dǎo)航的優(yōu)缺點以及適用場景，如下：
列表導(dǎo)航也是十分常見，幾乎在每一個 app 里面都會存在，大部分時候是作為二級導(dǎo)航存在，但是也會存在于一級導(dǎo)航的時候，比如郵箱，iOS系統(tǒng)自帶的設(shè)置等。
一般在列表導(dǎo)航里都會有下一個層級，可以通過箭頭來告訴用戶是否有下級菜單。
當列表信息比較多的時候，可以對列表進行分類，可以添加小標題或者直接分隔開。比如：
而在有些列表導(dǎo)航里，我們還需要展示給用戶一些預(yù)覽信息，比如 iOS系統(tǒng)里的健康，個人信息里的一些基本數(shù)據(jù)展示，如下：
關(guān)于列表導(dǎo)航的優(yōu)缺點以及適用場景，如下：
其實菜單導(dǎo)航也可以稱為下拉導(dǎo)航。這也是今天上交互設(shè)計課的時候，老師以微信的「+」為例子介紹的一種導(dǎo)航形式。最初了解這種導(dǎo)航形式也是來源于 Material Design 里面的 Menu。
Menu 是臨時的一張紙（paper），由按鈕（button）、動作（action）、點（pointer）或者包含至少兩個菜單項的其他控件觸發(fā)。
比如：
當信息層級變多的時候，菜單導(dǎo)航里要展示一層或者兩層信息，比如大眾點評采取的形式：
關(guān)于菜單導(dǎo)航的優(yōu)缺點以及適用場景，如下：
還有一些導(dǎo)航比如輪播導(dǎo)航，完全的沉浸式體驗，高度簡潔的導(dǎo)航，比如天氣，但是這種導(dǎo)航因為輪播點的大小不會很明顯，所以用戶很難快速感知自己所在位置，并且輪播導(dǎo)航輪播的數(shù)量也不宜過多 。
其實導(dǎo)航的類型應(yīng)該還有很多，并且在一個 app 里面幾乎不可能只使用一種導(dǎo)航，哪怕只是一個頁面，也會存在多種導(dǎo)航的組合形式，比如：
描邊插畫：可以簡單理解為眾多線面結(jié)合圖標組合在一起，互相呼應(yīng)而組成一個大畫面。畫面中的元素除了面以外，還具有描邊，因此也叫描邊插畫。
本文內(nèi)容：文章會詳解如何畫一張描邊插畫，教程素材沒有用我之前的插畫來做步驟分解，而是新畫了一張插畫以作示范，繪畫原理都一樣，理解原理就好。除了具體步驟以外，會針對一些易犯錯誤的地方添加重點標記。
一點建議：看完文章后，可以按照我分享的方法來臨摹一遍，但我更趨向于小伙伴們能夠發(fā)揮自己的想象力，做一張屬于自己的原創(chuàng)插畫。畫完后若有不清楚的地方，歡迎在我的公眾號中添加微信并附帶插畫，可給予建議。
這次插畫的主題源自于我的一個夢：在草地上，遺落的帆布鞋里面長滿了鮮花，小鳥守在花的旁邊歌唱。
確定主題后，把腦海里的畫面畫出來，可以畫在紙上，也可以用數(shù)位板在 ps 里面畫，按照個人習慣就好。我比較喜歡手繪，因此在紙上畫。
新建畫布1600*1200
視圖-勾選對齊點
在描邊插畫中，常見的問題之一就是描邊的粗細問題. 以及描邊間關(guān)系的處理問題。
描邊粗細問題（下圖以之前的四季插畫為例子）
描邊間關(guān)系處理
描邊設(shè)置
描邊的粗細是根據(jù)畫布大小而決定的，1600*1200的畫布，我習慣用 8pt 的粗細的線條，但是如果畫布是1200*900，8pt 則顯得過粗。具體的粗細可以根據(jù)情況而調(diào)整。
布爾運算法
形狀斷點重連法
形狀生成器
鋼筆勾勒法
鋼筆勾勒法顧名思義就是用鋼筆直接描出物體的外形。在這個插畫中，植物的形狀比較隨性，因此用鋼筆直接勾勒比形狀剪切要快。繪制的過程中，注意調(diào)整線條的平滑度. 弧度，使其規(guī)整。在此不作示范。
最近看到 kit8 大神的畫，突然想到如果白線運用在線性插畫會怎樣，就嘗試了這種風格。把線稿復(fù)制一層置于頂上，改成白色，2px 粗細的線，然后向旁邊移動錯位，破一下畫面沉悶的感覺。
看到這里，你應(yīng)該也發(fā)現(xiàn)了，畫面是比較灰的，因為我都是選擇低飽和度的顏色，如果需要調(diào)整，就在 AI 中把插畫導(dǎo)出 SVG 格式。然后拖到 PS 里面進行色相飽和度的調(diào)整。
在顏色調(diào)整過程中，遇到喜歡的配色就保存下來，這樣一張插畫就完成了。
我們都知道一個版面中必定有版心的概念。何為版心呢？版心就是除去天頭、地腳和左右頁邊距余下的區(qū)域，也是我們頁面內(nèi)容的擺放空間。下圖中灰色塊的區(qū)域就是此頁面的版心。
知道了版心，那么何為版面率呢？版面率就是版心所占頁面的比例，通俗一點講就是版面的利用率。
上面左圖中版心的面積非常大，四周的余白少，版面的利用率高，所以版面率就高。右圖版心面積小，版面利用率比左圖低，所以版面率就低一些。
版面中也有滿版與空版的概念。如上圖，滿版就是沒有天頭地腳與左右頁邊距的，此時版心即整個版面，版面利用率為100%?？瞻婢褪前婷胬寐蕿?%的。從滿版到空版之間的版面率是遞減的關(guān)系。
說完版面率的概念我們再來說一說版面率對畫面氣質(zhì)的影響。
一般來說版面率越高，視覺張力就越大，版面也會更活潑與熱鬧；反之，版面率越小，給人感覺就越典雅與寧靜，版面也會更有格調(diào)。
上圖中高版面率的海報相對于低版面率的更熱鬧與活潑；低版面率的則更典雅。
畫冊中也是一樣的，上圖是我早些年做的一個案例。同樣的內(nèi)容跟圖片，只是版面的利用率不同，我們可以發(fā)現(xiàn)右邊低版面率的作品更安靜和典雅。
版面率的高低能夠影響版面的氣質(zhì)，所以我們實際工作中也要根據(jù)項目的氣質(zhì)分配合適的版面率。比方說典雅氣質(zhì)的項目我們就要用低版面率版面，如果用高版面率顯然是與項目本身的氣質(zhì)相悖的。
說完版面率我們再來說一下留白，留白的概念大家都懂。而這里所說的留白更多的是指頁面的負空間。
頁面中去除內(nèi)容后的空間就是負空間，如下面這個頁面。
圖中灰色塊代表圖和文字信息等內(nèi)容，除去這些圖片和文字后，頁面中的其他空間都可以看作是負空間，也就是留白。當然，留白并不一定是白色，所有除去頁面內(nèi)容后的空間都是負空間，如上圖右側(cè)案例，黑色部分即此頁面的留白。
負空間的多少即是留白的多少。留白的多少我們可以用留白率來表示，如上圖，負空間小的留白肯定少，留白率就低。負空間大的的留白肯定多，留白率就高。
留白率就是版面留白的多少，實際上與版面率的概念差不多，如下。
空版留白最多，滿版留白最少。當然這也不是絕對的，有的作品中雖然是滿版，但空間廣闊，比如天空什么的，都可以當作留白來看待。
上面說來留白率跟版面率也有一定的關(guān)聯(lián)，所以他們對畫面氣質(zhì)的影響也是如出一轍的。我們可以先來看一下低留白率與高留白率的幾個作品。
通過這幾個作品我們可以看出留白少的信息更豐富，版面更有活力，也更熱鬧，親和力也更強。而留白多的更雅致，更安靜典雅，更有格調(diào)跟品質(zhì)感，但親和力稍弱。
下面進行案例演示吧，首先看一看文案。
這一步我們需要把文案的層級關(guān)系拉開，大中小區(qū)分的明顯一點。這個文案的層級關(guān)系肯定是 欲望の森林 ＞ 英文 ＞ 欲望是無盡的森林 ＞ 小文字信息的。
首先我們做一個有張力的版面，那么我們可以想一想什么樣的版面是有張力的呢？
首先版面率要大，其次留白要小，讓版面中的信息緊湊一點。
上圖就是對版面的布局，可以看到圖片是出血版的，沒留天頭與左右頁邊距。這樣做的目的也是使版面率更大。
布局做好之后我們把圖片與編排好的文字放置上去就可以了，如下。
上圖可以看到留白比較少，符合留白率低的理論，雖然具備張力，但不是很明顯。這種情況下我們可以改變一下底色使之感覺留白率更低，如下。
做完了留白少版面率高的，我們再來做一個典雅一點的。
根據(jù)本篇文章的內(nèi)容思考一下什么典雅與安靜的的排版版面率與留白率分別是什么樣的？
一定是低版面率和較多留白的版面更能體現(xiàn)典雅與安靜感。所以我們在版面安排上要使其留白更多，同時版面率要小一點。下圖就是一個基本布局。
最后我們再根據(jù)版面布局置入圖片微調(diào)一下就可以了，如下。
版面率跟留白率都能夠影響版面的氣質(zhì)，我們做項目的時候具體問題具體分析，根據(jù)項目氣質(zhì)去設(shè)定版面率跟留白率的大小。
大家好，從今天開始我要以大白話且通俗易懂的方式，來與大家分享我的知識和觀點。
主要講解的是平面設(shè)計基礎(chǔ)理論知識與實際用法，后期會講一些高階的設(shè)計思維。
本章節(jié)適合設(shè)計小白和需要填補設(shè)計基礎(chǔ)的設(shè)計師學(xué)習閱讀。
目錄
1、理解、提取與布置
2、貼近與遠離
3、排列與對齊
4、視線移動方向
5、組織與重復(fù)
1、理解、提取與布置
理解、提取與布置指的是根據(jù)設(shè)計的意圖來進行信息的整理，然后再將整理好的信息中重要和不重要的信息按照優(yōu)先級排列出來，最后再根據(jù)排列好的信息按個人美感和美學(xué)理念擺放到平面中。
1.1 理解部分
當收到一個海報設(shè)計需求時，我們不是要馬上動手去做，而是要去思考需要設(shè)計的海報受眾群體是哪些人，具體要怎么展示它，它展示的目的是什么。 
下面我就簡單介紹一下設(shè)計思維及方法，首先要設(shè)置定一個需求【現(xiàn)代美術(shù)館，需要設(shè)計一個簡潔大方的海報】。根據(jù)這個需求在進行具體的思維延伸。
1.1.1 海報的受眾群體
當我們收到設(shè)計需求時，要考慮海報的受眾群體，男人/女人，少年/青少年/中年/老年，每種受眾群體接受教育的程度和經(jīng)歷均不同，要根據(jù)不同的受眾做合適的設(shè)計。當我們按照具體需求定義好受眾群體后，就可以考慮推斷用哪種風格來展示海報了。
對于現(xiàn)代美術(shù)館需要一個簡潔大方的海報，這個需求所涵蓋的年齡區(qū)間比較大，基本上所有人都可以參觀美術(shù)館。那我們只要避免使用“個性化”的表象特征元素就可以解決這個問題了。
意思就是不要加入柔美的線條（除非展品的構(gòu)成是柔美的線條），游戲和女妝這類具有一定代表性的象征元素，不要夾雜太多表現(xiàn)形式，用最容易讓人理解的表象形式來處理就可以了。
1.1.2 怎么展示海報
現(xiàn)代美術(shù)館，需要設(shè)計一個簡潔大方的海報這個需求，可以根據(jù)主關(guān)鍵詞“現(xiàn)代”和“美術(shù)館”，次關(guān)鍵字“簡潔”和“大方”來推斷要采用哪種設(shè)計語言?！艾F(xiàn)代”的表現(xiàn)形式是無襯線體、干練（有棱角）、簡潔、沒有太多情緒。而“美術(shù)館”只要在圖片的處理上讓主題與圖片串聯(lián)共通就可以了。
簡潔大方的設(shè)計需求可以采用直線（字有時也是線）或大留白、配色多些白色、舒適的高純度高明度、整體干凈清爽，同時也要注意禁止添加太多顏色（如撞色）。
1.1.3 運用理解部分生成原型
根據(jù)前面的分析大概有了個原型，分為上下構(gòu)圖。上部分是美術(shù)館的部分場景圖片，下部分是具體的內(nèi)容信息部分。所有要素均以現(xiàn)代感、簡潔干練、配色不復(fù)雜、線性、整潔、清爽、專業(yè)、無太多情緒為基礎(chǔ)進行設(shè)計的。
以上就是“信息的整理”中的“理解部分”，當設(shè)計師收到需求時，不要馬上著手去做。先思考采用哪種表現(xiàn)形式（視覺語言）更適合需求，分析后再去做設(shè)計，這樣才能準確表達具體的需求，也能做出更符合需求的設(shè)計。
1.2 提取部分
提取部分就很好理解了，顧名思義是將整理好的信息中重要和不重要的信息按照優(yōu)先級排列出來。我們只需要根據(jù)優(yōu)先級進行排序，并把最重要的信息排列到平面中就可以了。例如需求中有【ABCDEFGHIJKL】這么多種信息，把最重要的【CGIL】提取出來再排列優(yōu)先級【IGCL】。由【ABCDEFGHIJKL】-【CGIL】-【IGCL】這個過程就叫“提取信息部分”。
1.3 布置部分
把提取并排列好優(yōu)先級的信息規(guī)整好，就可以布置在平面上了。用之前設(shè)計好的原型套用已提取好的信息就可以了。特別要注意重要的內(nèi)容放大，不重要的內(nèi)容弱化。
* 要點
理解：首先要理解作品的受眾群體、要怎么展現(xiàn)、目的是什么。
提取：其次要明確作品內(nèi)容中什么是最重要的、根據(jù)優(yōu)先級排序。
布置：最后把排列好的信息加以布置，重要的內(nèi)容放大，不重要的內(nèi)容弱化。
2、貼近與遠離
貼近和遠離的概念也是比較好理解的。與格式塔視知覺的親密性與遠離性是一個道理，初期只講一些通俗易懂的概念，像格式塔視知覺以后會講。
2.1 貼近和遠離的 基礎(chǔ)概念
貼近是指同類要素擺放在一起會呈現(xiàn)出一種共通性或產(chǎn)生某種規(guī)則，而遠離是指同類要素分開擺放看上去就沒有共通性或不會感到有某種規(guī)則。
當把同類要素（男人女人）放到一起，會覺得他們有一定的共通性，而且看上去像一對情侶。相反把同類要素（男人女人）分開來放，會覺得他們毫無關(guān)系。
我們把這種概念應(yīng)用在平面設(shè)計上，如下圖所示。
相同的要素擺放在一起會有一定的共同性，相反分開擺放則看上去沒有關(guān)聯(lián)。
貼近與遠離基礎(chǔ)概念的實際案例
2.2 貼近和遠離的 進階概念
把同類要素放到一起有種井然有序的感覺。如果要處理較為規(guī)整傳統(tǒng)的版式時，可以考慮多將要素放到一起形成規(guī)則。另外把同類要素分開擺放，會感到?jīng)]有共通性和規(guī)律規(guī)則，但是能為平面增加節(jié)奏感和沖擊力。
貼近與遠離進階概念的實際案例
其次遠離能使平面產(chǎn)生留白，通過留白也能使平面具有關(guān)聯(lián)性。
雖然說遠離能使要素看上去沒有共同性和規(guī)則，但如果要素處在一個平面中，利用留白呈現(xiàn)出一種關(guān)聯(lián)性。這就像吵架的夫妻一樣，同在一個床上，女的偏床左側(cè)，男的偏床右側(cè)，呈現(xiàn)一種遠離性。但他倆還是處在“床”這個平面中，也會呈現(xiàn)一種關(guān)聯(lián)性。
貼近與遠離進階概念的實際案例
* 要點
同類要素貼近擺放在一起相互關(guān)聯(lián)，同類要素遠離擺放相互排斥。
同類要素貼近擺放在一起平面有規(guī)則，同類要素遠離擺放增添節(jié)奏。
留白也能使要素有一定的關(guān)聯(lián)性。
3、排列與對齊
排列與對齊的概念比較簡單，也很容易理解。轉(zhuǎn)化一下思維，把排列比作軍隊隊伍中的“集合”，把對齊比作隊伍中的向前/左看齊，就很好理解了。
3.1 排列
排列是指將要素按照一定的規(guī)則進行布置，使平面達到一種平衡與和諧。道理與收拾屋子一樣，雜亂無章的屋子會讓人感到不舒服且很壓抑。整理的井然有序的屋子會讓人心情舒暢很安心。平面中的“排列”就是屋子中的“整理”，目的是使雜亂的屋子變得規(guī)矩整齊。收拾屋子的方法就是“規(guī)則”，用規(guī)則的方法來排列就叫“布置”。
排列的目的是讓平面變得有序和規(guī)則，當平面達到有序和規(guī)則就會呈現(xiàn)出一種舒適感，好比自然中的和諧。
3.2 對齊
對齊也可以理解為將要素按照一定的規(guī)則進行布置，使平面達到一種平衡與和諧。對齊與排列的差別在于，對齊是在排列的基礎(chǔ)上進行操作的。先將要素按照一定規(guī)則進行排列，然后再將要素進行對齊。排列是畫一個大體的框架，而對齊是做框架里的精細操作。
排列與對齊的實際案例
* 要點
排列與對齊的目的是讓平面變得有序和規(guī)則，當平面達到有序和規(guī)則就會呈現(xiàn)出一種舒適感。
把排列比作軍隊隊伍中的“集合”，把對齊比作隊伍中的向前/左看齊，就很好理解了。
4、視線移動方向
設(shè)計書籍或排版布局時，要考慮通過設(shè)計讓讀者以怎樣的順序去閱讀作品，通常情況下人的視線是從上到下移動的，所以在設(shè)計時要考慮到這一基本原則。閱讀橫排文章時視線是【由左至右】，閱讀豎排文章的視線是【由右至左】。
視線的移動方向分為三個知識點，橫排閱讀、豎排閱讀、流水式閱讀。流水式閱讀以后會講。
隨便補充一下啊，我讀過的設(shè)計文獻中提到的閱讀方法只有“Z字視線移動方向”，而沒有“T字視線移動方向”。有一種學(xué)習方法叫“T型閱讀法”，與視線移動方向的“T字視線移動方向”不是一個概念。視線本身就是從上到下從左到右的形式閱讀的，形成了Z字閱讀方式，我覺得是國人是把這些概念給曲解了，如果有說的不對的地方，也請大佬們多多指點。
4.1 橫排閱讀
橫排閱讀是指作品的排版布局是以橫向的排列方式讓讀者來閱讀作品。橫向的排列方式就是文字是橫著的，大家現(xiàn)在讀的這篇文章就是橫向排列的文章。閱讀橫向排列的文章時視線是從上至下【由左至右】依次閱讀的，如圖所示。
懂得了橫向排列的方式來閱讀文章會有什么用呢？由于人們的閱讀習慣，一般情況下閱讀讀物，都會遵循從左到右閱讀文章的方式，這也就間接影響了文章內(nèi)容的重要性。采用橫向排列的方式進行排版布局，重要的內(nèi)容要放在最左面，也就是最方便引導(dǎo)人們視線方向的地方。
如果不把重要的內(nèi)容放在視線方向的地方，讀者不僅閱讀作品時會感到很吃力（可讀性），而且會不理解作品是什么含義，視線也隨之錯亂，作品也會失去原本的含義。
橫排閱讀的實際案例
4.2 豎排閱讀
橫排閱讀是指作品的排版布局是以豎向的排列方式讓讀者來閱讀作品。閱讀豎向排列的文章時視線是從上至下【由右至左】依次閱讀的，如圖所示。
一定要注意，豎向排列方式內(nèi)容區(qū)在平面的最右面，與橫向排列方式不同。這個規(guī)定就像地球為什么是圓的的道理一樣。
豎排閱讀的實際案例
* 要點
閱讀橫排文章時視線是【由左至右】，閱讀豎排文章的視線是【由右至左】。
不要打破規(guī)則，一切以引導(dǎo)讀者視線為主。
5、組織與重復(fù)
按照一定規(guī)則構(gòu)成布局來編排要素，能使種類繁多的要素顯得整潔有序。
5.1 組織
沒有共通性的雜亂圖形匯聚一起會造成視線混亂，讀者注意力會被分散，也會降低理解力。將圖形用框圈起來，按照等距進行排列，整體就會顯得很整潔，也便于找出想要了解的圖形。
組織規(guī)則的實際案例
5.2 重復(fù)
這里的重復(fù)不是指復(fù)制粘貼，而是元素上的重復(fù)構(gòu)成。例如重復(fù)相同的格式，風格、文字、顏色、線、圖案等。為了讓平面具有條理性，用風格統(tǒng)一的要素做修飾，讓排版符合流水式，視線清晰自然。
重復(fù)規(guī)則也可以應(yīng)用在平面中、元素中、要素中、形狀中等，靈活運用重復(fù)能使平面具有統(tǒng)一性，也能制造趣味性，增加讀者對作品的印象。
重復(fù)規(guī)則的實際案例
* 要點
將圖形用框圈起來，按照等距進行排列，整體就會顯得很整潔，也便于找出想要了解的圖形。
靈活運用重復(fù)能使平面具有統(tǒng)一性，也能制造趣味性，增加讀者對作品的印象。
藍藍設(shè)計的小編 http://www.wnxcall.com