在這個(gè)項(xiàng)目中，主要任務(wù)是為舊金山最古老的玩具品牌 Jeffrey’s Toys 設(shè)計(jì)一個(gè)全新的品牌電商網(wǎng)站。
新電商網(wǎng)站最主要的目的是吸引顧客前往線下店鋪選購(gòu)商品，同時(shí)也希望通過(guò)快遞和門店自提的方式來(lái)完善線上銷售流程，拓展消費(fèi)群體。
該網(wǎng)站需要鞏固品牌核心業(yè)務(wù)價(jià)值觀：傳統(tǒng)，有趣和創(chuàng)意。該網(wǎng)站還需要通過(guò)強(qiáng)調(diào)其龐大的庫(kù)存體量和手工精選商品來(lái)將 Jeffrey’s Toys 和其他電子商務(wù)零售商區(qū)分開。
該網(wǎng)站的主要業(yè)務(wù)目標(biāo)包括：
能快速定位商品
每一個(gè)商品都有單獨(dú)的詳情頁(yè)
用戶能成功購(gòu)買一個(gè)或多個(gè)商品
為爆款商品引流
1. 用戶畫像
誰(shuí)才是這個(gè)網(wǎng)站真正的用戶？當(dāng)我接到這個(gè)任務(wù)的時(shí)候，客戶已經(jīng)繪制出了3個(gè)用戶畫像，每個(gè)用戶畫像都有特定的需求和痛點(diǎn)。
△ 客戶繪制的三個(gè)用戶畫像
基于三個(gè)用戶畫像，我確定了該網(wǎng)站要滿足的用戶需求，同時(shí)也考慮了Jeffrey’s Toys的需求。
確定的主要需求是：
通過(guò)清晰的商品組織分類來(lái)提供流暢的電商購(gòu)物體驗(yàn)
通過(guò)商品搜索使用戶能夠快速找到想要的商品
通過(guò)實(shí)用的商品推薦來(lái)體現(xiàn) Jeffrey’s Toys 的專業(yè)以及龐大的庫(kù)存
通過(guò)與用戶建立品牌關(guān)系來(lái)樹立信任
通過(guò)產(chǎn)品細(xì)節(jié)信息來(lái)確保用戶選購(gòu)合適的商品
通過(guò)商品評(píng)論來(lái)輔助用戶作出消費(fèi)決策并允許用戶進(jìn)行商品反饋
通過(guò)的下單結(jié)賬流程簡(jiǎn)化購(gòu)買行為并節(jié)省用戶時(shí)間
2. 競(jìng)品分析
為了獲得啟發(fā)，我確定了3個(gè)主要競(jìng)品，特別是舊金山的精品玩具店；還有3個(gè)玩具零售市場(chǎng)的間接競(jìng)品。直接競(jìng)品我分析了包括 Ambassador Toys 、 Amazon 和 TANTRUM 。間接競(jìng)品分析了 Lululemon 、Ikea 和 CVS 。競(jìng)品分析的目的是比較并找出這些電商網(wǎng)站的共同特征以及 Jeffrey’s Toys 能夠脫穎而出的潛在機(jī)會(huì)。
競(jìng)品分析最重要的收獲是了解了不同的電商網(wǎng)站的商品選擇模塊以及網(wǎng)站整體的布局。這些信息有助于鞏固我第二階段的研究。
△ 比較直接競(jìng)品和間接競(jìng)品的特征
2. 思維導(dǎo)圖
在完成競(jìng)品分析之后，我把這個(gè)項(xiàng)目中用戶的需求和客戶的需求列成了長(zhǎng)長(zhǎng)的信息清單。之后我又通過(guò)思維導(dǎo)圖來(lái)理清了在這個(gè)項(xiàng)目中用戶的需求和客戶的需求。思維導(dǎo)圖幫助我將信息組織成更清晰的想法，同時(shí)在各個(gè)想法之間建立層次結(jié)構(gòu)關(guān)系。
△ 用來(lái)理清信息和想法的思維導(dǎo)圖
接下來(lái)我通過(guò)卡片分類法來(lái)構(gòu)造網(wǎng)站的導(dǎo)航系統(tǒng)，卡片分類法是一種利用人們現(xiàn)有思維模型的研究技術(shù)。在構(gòu)造導(dǎo)航系統(tǒng)時(shí)，我了解到94種商店中最暢銷的商品庫(kù)存信息。擁有如此龐大的商品庫(kù)存，就很有必要通過(guò)清晰易懂的方式組織、分類庫(kù)存信息，以便用戶能夠快速的找到他們想要的商品。
1. 卡片分類
△ 卡片分類的初期階段
開放式卡片分類：我要求9位參與調(diào)研的用戶通過(guò)他們自己覺(jué)得合理的分類規(guī)則將94種商品分類，然后給每個(gè)類別加上他們認(rèn)為能夠準(zhǔn)確描述該類別的標(biāo)簽。這樣做的目的是對(duì)于網(wǎng)站潛在的商品分類方式及類別名稱有一個(gè)大致的了解。
封閉式卡片分類：基于開放式卡片分類的結(jié)果，我從最常見的類別標(biāo)簽中創(chuàng)建了13個(gè)預(yù)定類別。然后，我進(jìn)行了封閉式的卡片分類，我邀請(qǐng)了20位參與調(diào)研的用戶將商品逐一分類到我之前預(yù)定的13種類別中。封閉式卡片分類有助于讓我在進(jìn)行設(shè)計(jì)之前能夠清楚判斷這些類別是否符合大部分網(wǎng)站用戶的分類邏輯。
△ 通過(guò)卡片分類得到的13種商品類別
2. 站點(diǎn)圖
根據(jù)卡片分類以及競(jìng)品分析的結(jié)果，我繪制了網(wǎng)站的站點(diǎn)圖來(lái)明確整個(gè)網(wǎng)站的框架結(jié)構(gòu)。這是為了確保所有產(chǎn)品都放置在用戶期望的位置，同時(shí)使購(gòu)物體驗(yàn)更加直觀。
△ 站點(diǎn)地圖
3. 系統(tǒng)架構(gòu)圖
為了對(duì)用戶將會(huì)如何瀏覽網(wǎng)站有一個(gè)全面的概述，我繪制一張系統(tǒng)架構(gòu)圖。這樣做的主要目的是為了了解網(wǎng)站應(yīng)該給用戶提供什么功能以及功能拓展的廣度。我還通過(guò)系統(tǒng)架構(gòu)圖來(lái)探索電商網(wǎng)站和實(shí)體店鋪之間的聯(lián)系。
△ 系統(tǒng)架構(gòu)圖演示用戶將會(huì)如何瀏覽網(wǎng)站
4. 用戶流程
在確定了我需要給用戶提供的體驗(yàn)「全局」之后，我為每一個(gè)用戶畫像創(chuàng)建了不同的用戶流程，通過(guò)不同的用戶流程來(lái)使購(gòu)物體驗(yàn)更加符合他們的需求。構(gòu)建用戶流程的目的是確定每個(gè)用戶為了實(shí)現(xiàn)各自的預(yù)期目標(biāo)經(jīng)過(guò)的頁(yè)面和操作步驟。這不僅能使我專注于每個(gè)用戶的操作，也使我能夠在設(shè)計(jì)網(wǎng)站的時(shí)候?qū)⒐δ懿鸱?，以便給用戶提供更佳的購(gòu)物體驗(yàn)。
我繪制的第一個(gè)用戶流程是關(guān)于用戶畫像是 Jenny 的。Jenny 最主要的目是為自己的孫子購(gòu)買初級(jí)魔術(shù)玩具。Jenny 的用戶流程（如下圖所示）表明了她是如何搜索初級(jí)魔術(shù)玩具，以及為了成功購(gòu)買她可能采取的幾種不同路徑。
△ Jenny 的用戶流程
Debbie 和 Jenny 都希望能有一個(gè)的下單結(jié)賬流程，所以很有必要在用戶流程中繪制出下單結(jié)賬流程。下圖的用戶流程顯示了Debbie在選定一個(gè)特技自行車之后該如何進(jìn)行結(jié)賬下單。通過(guò)允許她登錄自己的帳號(hào)，自動(dòng)輸入她的結(jié)賬信息來(lái)簡(jiǎn)化她的結(jié)賬下單流程。
△ Debbie 的用戶流程
1. 草稿
在我整理了前期獲取的所有信息之后，我就開始著手設(shè)計(jì)網(wǎng)站?；谥罢沓鰜?lái)的用戶流程圖，我開始繪制幾個(gè)主要頁(yè)面的草圖，同時(shí)快速思考出幾個(gè)不同的網(wǎng)站布局方案。之后我邀請(qǐng)3個(gè)用戶參與了用戶調(diào)研，以驗(yàn)證這些方案是否同時(shí)滿足客戶和網(wǎng)站用戶的需求。
△ 網(wǎng)站首頁(yè)和品類頁(yè)面的初稿
2. 線框圖
基于用戶對(duì)草圖的反饋和我個(gè)人的想法，我開始使用Figma來(lái)繪制線框圖。整個(gè)過(guò)程中，根據(jù)優(yōu)先級(jí)不同，優(yōu)先考慮最能滿足網(wǎng)站用戶的功能。
△ 網(wǎng)站首頁(yè)和產(chǎn)品詳情頁(yè)的線框圖
1. 主頁(yè)
首頁(yè)我盡可能的保持簡(jiǎn)潔，避免用戶進(jìn)入網(wǎng)站時(shí)被過(guò)多的信息干擾而不知所措。
首頁(yè)放置了全局導(dǎo)航、輔助導(dǎo)航和搜索欄，方便用戶快捷的找到自己想要的商品。首頁(yè)還放置了新品推薦，因?yàn)樾缕吠扑]能夠展示品牌豐富的庫(kù)存，同時(shí)能為用戶提供有用的購(gòu)買建議。我想通過(guò)介紹 Jeffrey’s Toys 豐富的歷史來(lái)樹立用戶品牌聯(lián)系，所以在首頁(yè)我還放置了「關(guān)于我們」部分，用戶點(diǎn)擊還可跳轉(zhuǎn)到具體的介紹頁(yè)面查看更多關(guān)于品牌故事的信息。在頁(yè)腳，我放置了其他的用戶可能需要的信息。除此之外，我還將用戶交流系統(tǒng)放在頁(yè)腳，這樣是為了獲得用戶想法并在店鋪進(jìn)行活動(dòng)時(shí)通過(guò)用戶參與提高店鋪活動(dòng)氛圍。
2. 商品類別頁(yè)面
當(dāng)用戶點(diǎn)擊商店按鈕或者是某個(gè)類別之后，用戶將會(huì)前往一個(gè)列出了該類別下所有商品的商品列表頁(yè)。有個(gè)用戶畫像想要給他的孫子買一個(gè)合適他孫子年齡的玩具，所以頁(yè)面需要一個(gè)品類篩選器，同時(shí)支持商品按照不同的屬性例如年齡、價(jià)格和品牌分類也很重要。除此之外，我還通過(guò)面包屑導(dǎo)航來(lái)方便用戶定位頁(yè)面位置。
△ 商品類別頁(yè)線框圖
3. 商品詳情頁(yè)
在商品詳情頁(yè)，我希望能夠提供盡可能多的商品詳情來(lái)確保這個(gè)商品是用戶想要的。
在頁(yè)面下方，網(wǎng)站會(huì)基于當(dāng)前商品給用戶推薦其他相似商品。在商品詳情頁(yè)，產(chǎn)品評(píng)論區(qū)占了很大一部分，因?yàn)橛脩艨梢栽诋a(chǎn)品評(píng)論區(qū)反饋商品信息，便于樹立用戶信任，同時(shí)用戶能夠通過(guò)其他用戶的評(píng)論來(lái)作出更明智的購(gòu)買決定。為了簡(jiǎn)化下單流程，我設(shè)計(jì)了一個(gè)購(gòu)物車預(yù)覽頁(yè)，用戶在購(gòu)物車預(yù)覽頁(yè)可以預(yù)覽商品信息，用戶每次將商品加入購(gòu)物車后都會(huì)出現(xiàn)購(gòu)物車預(yù)覽頁(yè)，在購(gòu)物車預(yù)覽頁(yè)面，用戶可以很方便的點(diǎn)擊「選好了」按鈕而進(jìn)入結(jié)賬下單流程。
△ 商品詳情頁(yè)線框圖
4. 購(gòu)物車預(yù)覽頁(yè)
當(dāng)用戶點(diǎn)擊「選好了」按鈕或者是購(gòu)物車按鈕，用戶將會(huì)進(jìn)入到一個(gè)如下圖所示的購(gòu)物車預(yù)覽頁(yè)。這是結(jié)賬下單流程的第一步，用戶在購(gòu)物車可以管理他們所選的商品，作出合適的調(diào)整。用戶在下單時(shí)，可以選擇到店自提或者是物流配送，設(shè)置到店自提是為了引導(dǎo)用戶去 Jeffrey’s Toy的線下店鋪，同時(shí)降低運(yùn)輸成本。
△ 購(gòu)物車預(yù)覽頁(yè)線框圖
5. 結(jié)帳頁(yè)面
客戶提供的三個(gè)用戶畫像的主要痛點(diǎn)之一就是想要有一個(gè)的結(jié)賬流程，所以我得確保結(jié)賬下單體驗(yàn)要盡可能的流暢。作為一個(gè)回頭客，用戶可以選擇登錄自己的帳號(hào)，并自動(dòng)保存物流信息和支付信息。我決定在一個(gè)頁(yè)面上承載全部的結(jié)賬流程，這樣方便用戶在結(jié)賬流程中任何時(shí)刻都能編輯信息。頂部的進(jìn)度欄顯示了下單結(jié)賬流程有多少步，用戶當(dāng)前在哪一步以及用戶還剩下多少步驟。
△ 登錄頁(yè)
△ 下單頁(yè)
△ 訂單查看頁(yè)
6. 其他畫面
我還創(chuàng)建了一些其他頁(yè)面，例如訂單確認(rèn)頁(yè)面。訂單確認(rèn)頁(yè)面明確告知用戶結(jié)賬流程已經(jīng)完成了，用戶還能在訂單確認(rèn)頁(yè)查看有關(guān)訂單的其他信息，以供參考。
我創(chuàng)建了一個(gè)店鋪聯(lián)系頁(yè)面，當(dāng)用戶在網(wǎng)站找不到想要的商品時(shí)，可以在店鋪聯(lián)系頁(yè)面查詢線下店鋪商品情況以及店鋪的營(yíng)業(yè)時(shí)間、位置和聯(lián)系電話。
除此之外我還創(chuàng)建了一個(gè)「關(guān)于頁(yè)面」用來(lái)著重強(qiáng)調(diào) Jeffrey’s Toys 與其他電商網(wǎng)站例如亞馬遜的區(qū)別。我還在這個(gè)頁(yè)面介紹了Jeffrey’s Toys 長(zhǎng)達(dá)60年的獨(dú)特歷史，以增強(qiáng)用戶對(duì)于品牌傳統(tǒng)、有趣和創(chuàng)意的商業(yè)價(jià)值的印象。
△ 訂單確認(rèn)頁(yè)
△ 聯(lián)系方式頁(yè)
△ 公司介紹頁(yè)
7. 可用性測(cè)試
在完成線框圖之后，我就開始繪制網(wǎng)站原型以便進(jìn)行可用性測(cè)試。這使我能夠評(píng)估用戶將會(huì)如何與網(wǎng)站進(jìn)行交互，也能讓我評(píng)估網(wǎng)站是否滿足了用戶的基本需求。在進(jìn)行UI設(shè)計(jì)之前，通過(guò)中保真原型進(jìn)行可用性測(cè)試來(lái)獲取潛在用戶真實(shí)、關(guān)鍵的反饋是很有必要的，可用性測(cè)試還能鞏固網(wǎng)站的功能需求。
我邀請(qǐng)了4位用戶進(jìn)行可用性測(cè)試，為了讓他們吻合用戶畫像中的用戶特征，我指定了三種用戶場(chǎng)景來(lái)讓他們完成測(cè)試。這三種用戶場(chǎng)景包括：
您需要為您的女兒購(gòu)買一個(gè)玩具。您會(huì)怎么查找商品并完成購(gòu)買。
您可以通過(guò)什么方法知道 Jeffrey’s Toys 下個(gè)月將要舉辦的店鋪活動(dòng)。
當(dāng)您在網(wǎng)站上沒(méi)有找到您想要的玩具時(shí)，您將如何查詢并購(gòu)買。
這些是我通過(guò)可用性測(cè)試得到的用戶反饋：
總體而言，用戶能夠輕松地找到想要的產(chǎn)品和信息
在結(jié)賬流程中，促銷活動(dòng)部分會(huì)分散用戶的注意力
部分用戶不想通過(guò)電話來(lái)查詢商品信息，需要提供其他的查詢方式。
部分用戶覺(jué)得前往線下店鋪的引導(dǎo)部分還可以增強(qiáng)，目前的引導(dǎo)不夠。
△ 可用性測(cè)試得到的反饋
8. 后續(xù)步驟
這個(gè)案例研究展現(xiàn)的只是電商網(wǎng)站設(shè)計(jì)的開端。后續(xù)我將會(huì)繼續(xù)進(jìn)行可用性測(cè)試，并進(jìn)一步迭代我的設(shè)計(jì)。如果有更多的時(shí)間，我將會(huì)著重探索更多從網(wǎng)站引導(dǎo)用戶前往線下店鋪的方式。我也將會(huì)繼續(xù)豐富網(wǎng)站頁(yè)面并將Jeffrey’s Toys的視覺(jué)風(fēng)格融入到網(wǎng)站中。下圖展示了我最初設(shè)想的UI設(shè)計(jì)風(fēng)格。UI設(shè)計(jì)我希望秉持簡(jiǎn)潔、創(chuàng)意、傳統(tǒng)的設(shè)計(jì)理念。
△ 首頁(yè)
△ 商品分類頁(yè)
△ 商品詳情頁(yè)
本文以玩具購(gòu)物網(wǎng)站這個(gè)小案例，清晰地記錄了一個(gè)較為完整的產(chǎn)品設(shè)計(jì)流程。不論是設(shè)計(jì)方法，還是記錄方法，都可以借鑒運(yùn)用在工作、匯報(bào)和作品集上。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
容易被忽視的圖形，不僅能傳達(dá)不同的情緒，也能提升視設(shè)計(jì)的品質(zhì)感。
本文節(jié)選自德國(guó)紅點(diǎn)獲獎(jiǎng)設(shè)計(jì)師大凡的分享，主要包括三個(gè)部分：
1 圖形是什么
2 好的圖形設(shè)計(jì)長(zhǎng)什么樣
3 圖形設(shè)計(jì)創(chuàng)意思路分享
提到圖形設(shè)計(jì)，你腦海中對(duì)應(yīng)到的第一個(gè)畫面是什么？我們打開了某搜索器，檢索了「圖形」二字，這里的圖形多集中于「幾何圖形、標(biāo)志、矢量圖形、圖標(biāo)」。
我們又搜集了一些不錯(cuò)的設(shè)計(jì)網(wǎng)站，搜索「圖形設(shè)計(jì)」或「graphic design」，它的表現(xiàn)形式與應(yīng)用范圍都擴(kuò)大了，海報(bào)、信息、插圖、包裝、圖標(biāo)、字體、攝影、標(biāo)志、品牌，無(wú)所不在。
如果給圖形下個(gè)定義，它主要指二維空間中可以用輪廓?jiǎng)澐殖龅目臻g形狀，設(shè)計(jì)中無(wú)處不在的表現(xiàn)手法。它與色彩、版式、字體等一樣，在設(shè)計(jì)師的知識(shí)體系中處于相對(duì)重要的位置，但往往容易被忽視。
在優(yōu)秀的設(shè)計(jì)作品中，圖形可以作為主體、符號(hào)、輔助、信息等不同角色出現(xiàn)在設(shè)計(jì)的各個(gè)應(yīng)用場(chǎng)景中，可以通過(guò)抽象的、具象的、平面的、空間的多樣化表達(dá)手法，傳達(dá)出不同風(fēng)格的視覺(jué)表現(xiàn)力。
那么，好的圖形是什么樣的？我們可以從3個(gè)維度去感受好的圖形設(shè)計(jì)作品：抽象、創(chuàng)意與風(fēng)格。
抽象是對(duì)日常事物的提煉與概括，我們先來(lái)感受一下下面兩組建筑，某搜索器中的「最丑建筑」和「知名建筑」之間的對(duì)比?？梢院苤庇^的感受到，抽象的圖形與色彩可以傳遞更加豐富的情感。
對(duì)企業(yè)來(lái)說(shuō)，溝通成本代表的就是金錢，而一個(gè)抽象的符號(hào)就能巧妙地為企業(yè)節(jié)省了很多說(shuō)話的時(shí)間。
我們可以看這個(gè)案例，1個(gè)點(diǎn)產(chǎn)生了多少可能性？這是美國(guó)一家大型連鎖超市的logo，以這個(gè)點(diǎn)為原型，衍生出了各種解鎖生活方式的海報(bào)。簡(jiǎn)單的點(diǎn)，發(fā)散出各種生活方式，一看就能夠知道超市供應(yīng)的各種商品。
設(shè)計(jì)的創(chuàng)意體現(xiàn)在哪兒呢？我們先看看那些腦洞大開的大師們是如何使用圖形的。
第一位是福田繁雄大師，在他的年代沒(méi)有人用這樣的圖形方式做設(shè)計(jì)，炮彈朝向炮筒里面，一張非常簡(jiǎn)潔的反戰(zhàn)海報(bào)。他也特別擅長(zhǎng)運(yùn)用圖形的異形同構(gòu)。
第二位是瑞士的史蒂芬邦迪大師，這些是他為劇場(chǎng)設(shè)計(jì)的宣傳海報(bào)。簡(jiǎn)單的人形搭配鮮血撕裂感的方式就可以把卡門劇情表達(dá)出來(lái)了。
創(chuàng)意是天馬行空的。我們看下面這個(gè)音樂(lè)節(jié)海報(bào)設(shè)計(jì)，拆解其中包含的文字、吉他、人影、波浪等，每個(gè)元素與音樂(lè)都息息相關(guān)，組合在一起就缺了些創(chuàng)意表達(dá)。
再看網(wǎng)易云音樂(lè)與快手聯(lián)合做的民謠音樂(lè)節(jié)H5，音樂(lè)的感覺(jué)一下就出來(lái)了。
很簡(jiǎn)單的圖形運(yùn)用，就能產(chǎn)生創(chuàng)意性的差距。
著名的可可香奈兒女士曾經(jīng)說(shuō)過(guò)，流行稍縱即逝，但風(fēng)格永存。
從包豪斯開始，設(shè)計(jì)風(fēng)格發(fā)展到今天已經(jīng)是多元混合存在的，很多所謂流行不過(guò)是循環(huán)與往復(fù)。
即使是運(yùn)用最簡(jiǎn)單的圖形，也可以表達(dá)出不同的風(fēng)格，甚至引領(lǐng)浪潮，為品牌傳播加分。比如，下面這組圖，你能猜的到是同一家公司的傳播海報(bào)嗎？
現(xiàn)在，我們感受到了圖形的巧妙之處。但具體拿到一個(gè)需求后，我們?cè)撊绾稳ビ脠D形輔助設(shè)計(jì)呢？這里分享一個(gè)“三步理性創(chuàng)意發(fā)散法”。
舉個(gè)栗子，我們?yōu)椤赶募厩嗄暌魳?lè)節(jié)」設(shè)計(jì)一張活動(dòng)海報(bào)。
我們首先給主題做一個(gè)分析、把關(guān)鍵詞拆解與排序后，視覺(jué)的重要程度依次是：音樂(lè)、夏季、青年、節(jié)日。
這些關(guān)鍵詞讓你最直觀的感受是什么呢？
基于感受，我們可以嘗試提取出基礎(chǔ)的圖形元素了。
色彩方面，我們也可以根據(jù)對(duì)應(yīng)的元素去設(shè)置，最終我們提取出了這組圖形元素。
這一步需要我們?cè)O(shè)計(jì)師發(fā)揮想象力了，為一組元素找到視覺(jué)上的聯(lián)結(jié)關(guān)系。這也需要大家平時(shí)能去多看、多想、多練。
然后，我們?yōu)閳D形融合進(jìn)更多的細(xì)節(jié)。
我們首先采取最簡(jiǎn)單的主體式構(gòu)圖方式，將想突出的圖形最大化、成為視覺(jué)焦點(diǎn)，添加海報(bào)所需文字進(jìn)行排版。
這種方式能夠做出相對(duì)合格的圖形海報(bào)，但我們可以用不同的版式與分割構(gòu)圖，去嘗試更多的可能性。比如第三個(gè)海報(bào)，我們可以先建立不一樣的版面分割、進(jìn)行配色，然后再放入圖形與文字進(jìn)行排版，營(yíng)造不同的畫面感覺(jué)。
其他兩組也可以用這種方式、進(jìn)行不同嘗試。
最后，我們可以整體上對(duì)比一下。
大師級(jí)的創(chuàng)意難得，但基本的圖形創(chuàng)意確實(shí)有跡可循，希望本次的分享能夠給大家?guī)?lái)圖形思維上的啟發(fā)。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
文字 LOGO 的設(shè)計(jì)經(jīng)常會(huì)采用優(yōu)質(zhì)的經(jīng)典字體作為基底，那么我們所熟悉的著名品牌會(huì)使用哪些經(jīng)典字體？這些字體本身又有哪些特質(zhì)，被這些品牌所選擇？而設(shè)計(jì)師在設(shè)計(jì)的時(shí)候，又是如何借用這些字體的特質(zhì)來(lái)凸顯品牌的特征？這回借用一個(gè) LOGO 「逆向工程」設(shè)計(jì)項(xiàng)目，盤點(diǎn)8款經(jīng)典英文字體，以及一系列優(yōu)秀的 LOGO 設(shè)計(jì)范例。
雖然很多品牌LOGO 在設(shè)計(jì)的時(shí)候，會(huì)專門設(shè)計(jì)字體，但是實(shí)際上，很多品牌的 LOGO 其實(shí)是使用既有的字體來(lái)進(jìn)行小幅度優(yōu)化來(lái)進(jìn)行設(shè)計(jì)的。最近幾年，設(shè)計(jì)師 Emanuele Abrate 一直在關(guān)注一些著名的品牌 LOGO 背后的設(shè)計(jì)處理技巧，他開始借助這些字體背后原始的字體來(lái)進(jìn)行「逆向工程」。
Abrate 的 Logofonts 項(xiàng)目就是這個(gè)「逆向工程」之后的結(jié)果?！府?dāng)一些你陌生的元素和你熟悉的元素結(jié)合到一起的時(shí)候，有趣的事情就會(huì)發(fā)生……所以我決定重新拆解這些大眾所熟悉的品牌，然后將文字部分替換成這個(gè) LOGO 對(duì)應(yīng)的字體名稱」Abrate 的思路就是這樣來(lái)的。
其實(shí)，以這種方式來(lái)重新解構(gòu)這些令人熟悉的 LOGO 本身是一種非常有趣的嘗試，給人的體驗(yàn)也頗為不同。但是回過(guò)頭來(lái)說(shuō)，這也證明了一件事情：即使是那些你感覺(jué)很熟悉的字體，同樣可以借助一些并不復(fù)雜的方式，來(lái)制造出爆款設(shè)計(jì)，營(yíng)造出令人過(guò)目不忘的獨(dú)特視覺(jué)體驗(yàn)。
如果你使用 Instagram，那么你可以在上面關(guān)注一下這個(gè) LogoFonts 項(xiàng)目。
在這些品牌 LOGO 的文本字體當(dāng)中，有很多大家非常非常熟悉的字體，它們?cè)谟⑽淖煮w中的大眾認(rèn)知程度，完全不亞于「微軟雅黑」在中文世界里的認(rèn)知度。
Futura 字體的靈感來(lái)自包豪斯運(yùn)動(dòng)，繼承了包豪斯的設(shè)計(jì)理念，由設(shè)計(jì)師保羅倫納1924年至1926年所創(chuàng)建。Futura 不僅本身大獲成功，而且成功催生了新的幾何無(wú)襯線字體。
在國(guó)外的設(shè)計(jì)圈中，設(shè)計(jì)師私下經(jīng)常調(diào)侃，在設(shè)計(jì)的時(shí)候嘗試過(guò)很多不同的字體，最后總會(huì)用回 Futura ，于是有了「字體不決就用 Futura」的調(diào)侃。當(dāng)然，很品牌的 LOGO 設(shè)計(jì)是否幾經(jīng)修改重回 Futura 就很難說(shuō)了，但是我還蠻認(rèn)可這種說(shuō)法的。
FedEx
Supreme
PayPal
Nike
Red Bull
Helvetica是一種被廣泛使用的的西文字體，于1957年由瑞士字體設(shè)計(jì)師愛德華德·霍夫曼（Eduard Hoffmann）和馬克斯·米耶丁格（Max Miedinger）設(shè)計(jì)，體現(xiàn)了瑞士設(shè)計(jì)的理性主義精神，同時(shí)被認(rèn)為是現(xiàn)代主義設(shè)計(jì)理念的典范。
很多現(xiàn)代都使用 Helvetica 字體來(lái)作為設(shè)計(jì)的基底，借助基礎(chǔ)的傾斜、色彩和裝飾，在它現(xiàn)代和整飭的設(shè)計(jì)基礎(chǔ)上，來(lái)營(yíng)造獨(dú)特品牌視覺(jué)特征和氣質(zhì)。
Target
Energizer
Post-it
The North Face
CAT
Behance
Avenir是由Adrian Frutiger設(shè)計(jì)的一款無(wú)襯線字體，最初于1988年由萊諾字體公司發(fā)布?！窤venir」在法語(yǔ)當(dāng)中是「未來(lái)」的意思，在某種意義上，它和 Futura 在精神內(nèi)核上有所呼應(yīng)。
和 Helvetica 一樣，Avenir 字體是為了「基本適合用在任何平面設(shè)計(jì)場(chǎng)合」的一種字體，同時(shí)，F(xiàn)rutiger 先生也認(rèn)為，無(wú)襯線字體是不應(yīng)該有斜體的，所以他也僅僅只是為了商業(yè)需求，使用光學(xué)儀器制作了偽斜體的效果。
Avenir 這款字體整體呈現(xiàn)出一種中性、去性格化的特點(diǎn)，是一種氣質(zhì)「透明」的字體。
Toyota
我們常說(shuō)的 Avant Garde 字體完整的名稱應(yīng)該是 ITC Avant Garde Gothic，它原本是 Avant Garde 雜志的 LOGO 字體，由 Herb Lubalin 所創(chuàng)建。
之后他與盧巴林設(shè)計(jì)公司的合伙人 Tom Carnase 一同努力，將這款字體完善成為一套完整的標(biāo)準(zhǔn)字體。
由于 Avant Garde 出色的幾何特征，很多品牌 LOGO 在設(shè)計(jì)的時(shí)候都考慮并采用了這款字體。
Adidas
New Balance
Durex
Gotham 是一款 2000 年的時(shí)候?yàn)?GQ 所設(shè)計(jì)，并于 2002 年向公眾開放的字體。它出現(xiàn)的地方很多，從可樂(lè)瓶、推特、Spotify、Netflix、Saks 到紐約大學(xué)、翠貝卡電影節(jié)，這還不止，包括《柯南秀》和《周六夜現(xiàn)場(chǎng)》在內(nèi)的電視劇、包括《盜夢(mèng)空間》、《點(diǎn)球成金》、《可愛的骨頭》和《月光男孩》在內(nèi)的電影，都用到了這一字體。
關(guān)于這款字體的故事，可以看看這篇文章：
Gotham 原本的設(shè)計(jì)構(gòu)思中，是要呈現(xiàn)出一種「新鮮和陽(yáng)剛」的氣息，不過(guò)真正投入使用的時(shí)候，才發(fā)現(xiàn)它的細(xì)體非常的具有女性的「優(yōu)雅感」。Gotham 在現(xiàn)代的品牌和 LOGO 設(shè)計(jì)中應(yīng)用廣泛，它兼顧了靈活和高級(jí)感，說(shuō)是「可鹽可甜」一點(diǎn)錯(cuò)都沒(méi)有。
TikTok
Spotify
Discovery
Univers 字體和 Avenir 同樣出自設(shè)計(jì)師 Adrian Frutiger 之手，不過(guò) Univers 是 Frutiger 的早期字體作品，它和 Helvetica 并稱為「瑞士風(fēng)格字體」，最初是作為一款照相排印字體所發(fā)布的。
Univers 字體的字重控制和其他的字體不同，是按照數(shù)字來(lái)進(jìn)行區(qū)分的，到現(xiàn)在 Univers 字體族當(dāng)中所包含的變體已經(jīng)非常之多了，多達(dá)44種，不同寬度、粗細(xì)變化的衍生字體使得它作為 LOGO 字體非常方便。
Alibaba
ebay
正如同你從下圖看到的，Myriad 字體就是 Adobe 的LOGO 品牌用字，因?yàn)檫@款字體原本就是 Robert Slimbach 和 Carol Twombly 為 Adobe 定制的字體。不過(guò)，值得一提的是，Myriad 字體的基底是 Frutiger 字體——而 Frutiger 、Univers、Avenir 三款字體系出同門，都出自 Adrian Frutiger 之手。
和很多早期的非襯線體字體不同，Myriad 從一開始就是為了數(shù)字化而設(shè)計(jì)的，字體家族內(nèi)不同字重、樣式的變化是動(dòng)態(tài)的，通過(guò)不同的字母寬度調(diào)解平衡，給人溫暖友好的感覺(jué)，而這一點(diǎn)也使得它在屏幕和印刷品上，顯得更加協(xié)調(diào)和自然。
Adobe
Visa
Walmart
其實(shí) Arial 這款字體能走向世界，和微軟息息相關(guān)。這款 Monotype 出品的數(shù)字字體是隨著當(dāng)年的 Windows 3.1 操作系統(tǒng)和當(dāng)時(shí)的 Truetype 技術(shù)一同分發(fā)出來(lái)的，它的競(jìng)爭(zhēng)對(duì)象則是最為經(jīng)典的 Helvetica 字體，而在視覺(jué)上，Arial 和 Helvetica 是非常相近的。
Monatype 在設(shè)計(jì)Arial 時(shí)，考慮到會(huì)在電腦上面使用，在字體及字距上都作了一些細(xì)微的調(diào)整和變動(dòng)，以增加它在電腦屏幕上不同分辨率下的可讀性。
Skype
Pxxxhub
其實(shí)經(jīng)典的字體有很多，你單獨(dú)看這些字體的時(shí)候可能會(huì)感到單調(diào)，但是Abrate 的 Logofonts 能夠幫你了解到這些經(jīng)典的英文字體是怎么應(yīng)用到 LOGO 當(dāng)中，讓你看到這些字體本身豐富的可能性和多變性格氣質(zhì)。我將一部分字體打包存到百度云當(dāng)中，供你學(xué)習(xí)研究。如果你需要在設(shè)計(jì)項(xiàng)目當(dāng)中使用，請(qǐng)購(gòu)買正版授權(quán)。
文章來(lái)源：優(yōu)設(shè) 作者：陳子木
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
在進(jìn)行小程序項(xiàng)目啟動(dòng)，進(jìn)行技術(shù)選型的時(shí)候，對(duì)市場(chǎng)上多個(gè)小程序框架進(jìn)行了考慮:
團(tuán)隊(duì)成員mpvue、wepy、uni-app都有實(shí)際的項(xiàng)目經(jīng)驗(yàn),且根據(jù)Github上的star數(shù)還有issue,最后決定回到到使用原生開發(fā)。
雖然框架有些很成熟，有工程化和跨端的解決方案，也有實(shí)際的上線項(xiàng)目，但考慮到后續(xù)一些支撐性的問(wèn)題(維護(hù)，文檔，坑等)，在github上看了issue，有些已經(jīng)沒(méi)在維護(hù)了。
想著讓項(xiàng)目持續(xù)迭代，不受第三方框架限制，保持穩(wěn)健，最后決定使用原生，跟著官方的迭代升級(jí)，自己維護(hù)，引入前端工程化的思想，提高繁瑣的流程以及開發(fā)效率。
基于Webpack4.x,自定義Webpack配置
scss編譯為wxss：定義全局變量,使用公共的樣式文件,提高css開發(fā)效率和可維護(hù)性；
自動(dòng)壓縮圖片資源 : 小程序?qū)Π笮∮邢拗?，壓縮圖片大小可以減少空間，加快頁(yè)面加載；普通的圖片壓縮需要將圖片上傳到在線圖片壓縮網(wǎng)站，壓縮完再保存下來(lái)，效率比較低。現(xiàn)在執(zhí)行命令就可以自動(dòng)壓縮圖片。
代碼規(guī)范
eslint: 能在js運(yùn)行前就識(shí)別一些基礎(chǔ)的語(yǔ)法錯(cuò)誤，減少不必要的小問(wèn)題，提高調(diào)試效率；
husky、line-staged、prettier: 統(tǒng)一團(tuán)隊(duì)代碼規(guī)范: 當(dāng)執(zhí)行代碼提交到git倉(cāng)庫(kù)時(shí)，會(huì)將已改動(dòng)文件的代碼格式化統(tǒng)一規(guī)范的代碼風(fēng)格;
命令行創(chuàng)建頁(yè)面和組件模板
引入jest單元測(cè)試
app -> 小程序程序的入口，使用微信開發(fā)者工具制定app目錄cli -> 生pages和components的模板腳手架img ->
圖片資源原文件.eslintignore.eslintrc.js.gitignore(忽略wxss的提交，多人和做改動(dòng)，容易有沖突，將scss文件傳到服務(wù)器就好了).prettierrc.js(代碼格式化風(fēng)格配置)babel.config.jsjest.config.js(單元測(cè)試配置文件)webpack.compress.js(指定入口圖片資源文件，將圖片壓縮編譯到小程序的資源目錄)webpack.config.js -> (工程化入口文件,指定入口scss文件，監(jiān)聽文件變化，自動(dòng)將scss編譯為wxss)
. 安裝依賴 npm install 或 yarn install. 編譯scss
npm run dev. 壓縮圖片 npm run img. 單元測(cè)試 npm run test(生成測(cè)試報(bào)告) npm run test:watch(監(jiān)聽測(cè)試文件改動(dòng)—開發(fā)環(huán)境下使用)
執(zhí)行 npm run dev
執(zhí)行 npm run img將圖片壓縮到app/assets/img目錄下,一張7k的圖片變成5k，肉眼看不出有什么差別。
執(zhí)行 npm run create終端會(huì)提示選擇頁(yè)面還是組件,選擇頁(yè)面,按Enter鍵，輸入頁(yè)面的名稱，會(huì)自動(dòng)將4個(gè)文件創(chuàng)建到app/pages/xxx下。
執(zhí)行 npm run create終端會(huì)提示選擇頁(yè)面還是組件,選擇組件,按Enter鍵，輸入組件的名稱，會(huì)自動(dòng)將4個(gè)文件創(chuàng)建到app/components/xxx下。
執(zhí)行 npm run test 生成測(cè)試報(bào)告執(zhí)行 npm run test:watch 監(jiān)聽測(cè)試文件，方便開發(fā)使用
工程化的初衷就是為了減少重復(fù)性的操作，提高編碼的效率和樂(lè)趣。
JavaScript是弱類型語(yǔ)言，好處是靈活，壞處是太靈活(多人協(xié)作，維護(hù)別人寫的代碼就是很痛苦了)。
項(xiàng)目最主要的是穩(wěn)健，可高度自定義拓展，不拘束于版本和地上那方，特別多人協(xié)作的團(tuán)隊(duì)，工程化能給團(tuán)隊(duì)帶來(lái)更多的收益，后續(xù)也會(huì)考慮將TypeScript等其他好的方案引入項(xiàng)目。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
在經(jīng)典的尼爾森十大啟發(fā)式當(dāng)中，「系統(tǒng)狀態(tài)可見性」可以說(shuō)是如今交互設(shè)計(jì)領(lǐng)域當(dāng)中，最為重要的原則之一。通過(guò)向用戶展現(xiàn)當(dāng)前的狀態(tài)，讓用戶擁有對(duì)系統(tǒng)的控制權(quán)，建立用戶對(duì)于產(chǎn)品的信任感，這也是這種設(shè)計(jì)啟發(fā)式的最重要的價(jià)值之一。
但是，想要做到可靠、易用，系統(tǒng)狀態(tài)展現(xiàn)的技巧是很講究的。這里梳理了4種最為常用的方法，結(jié)合了不少實(shí)用的案例，希望對(duì)你有所幫助。
1.1、讓用戶知道自己在哪
沒(méi)有人會(huì)喜歡迷失方向，但是無(wú)論在現(xiàn)實(shí)生活還是在數(shù)字領(lǐng)域當(dāng)中，這種情況都會(huì)發(fā)生。讓用戶知道他們?cè)谀睦锸莿?chuàng)建良好導(dǎo)航體驗(yàn)的關(guān)鍵。應(yīng)用程序和網(wǎng)站都應(yīng)該凸顯當(dāng)前的導(dǎo)航選項(xiàng)，幫助用戶了解他們所在的位置。
Google 的底部導(dǎo)航欄設(shè)計(jì)
1.2、要經(jīng)過(guò)多少步驟來(lái)完成任務(wù)
這也是一個(gè)非?；镜牟僮?，通過(guò)展現(xiàn)步驟數(shù)量，幫助用戶來(lái)預(yù)估完成這個(gè)過(guò)程所需要的時(shí)間。
Selecto 的調(diào)查問(wèn)卷的設(shè)計(jì)
數(shù)字界面畢竟不是現(xiàn)實(shí)世界中的真實(shí)硬件機(jī)構(gòu)，用戶更多只能借助交互過(guò)程中的即時(shí)視覺(jué)反饋來(lái)確定是否完成了操作，即時(shí)的視覺(jué)反饋因此顯得非常重要。
即時(shí)的視覺(jué)反饋?zhàn)層脩舻牟僮鞯玫搅艘曈X(jué)上的「認(rèn)可」，從而強(qiáng)化了「確信感」，這樣一來(lái)一回的確認(rèn)可以避免錯(cuò)誤的發(fā)生，比如可以避免用戶因?yàn)椤父杏X(jué)沒(méi)有點(diǎn)下去」而反復(fù)點(diǎn)擊。
這種視覺(jué)反饋的設(shè)計(jì)，最常見的范例就是點(diǎn)擊按鈕按下的微交互動(dòng)畫，它告知用戶「系統(tǒng)已經(jīng)捕捉到點(diǎn)擊交互了」。
AliAli 所設(shè)計(jì)的懸停點(diǎn)擊動(dòng)畫
但是在某些狀況下，按鈕的視覺(jué)反饋還有很多不同的呈現(xiàn)形式，有更多可見的、可理解的新形態(tài)，可以在原有的基礎(chǔ)上探索更多可能性，比如下面的
2.1、單擊點(diǎn)贊按鈕
Spread love, not viruses ，作者 Charles Patterson
2.2、開關(guān)按鈕
這個(gè)開關(guān)按鈕不僅有點(diǎn)擊動(dòng)效，而且色彩和按鈕標(biāo)識(shí)也隨之改變，更為清晰地表明狀態(tài)，甚至兼顧到了視覺(jué)障礙用戶
Switcher XLIV , 作者 Oleg Frolov
2.3、書簽按鈕微交互
這個(gè)書簽按鈕通過(guò)色彩的虛實(shí)變化來(lái)呈現(xiàn)書簽已添加的狀態(tài)，頗為巧妙。
Bookmark interaction，作者 Oleg Frolov
2.4、添加購(gòu)物車微交互
在這種情況下，視覺(jué)反饋非常明確且優(yōu)雅地告知用戶已經(jīng)添加到購(gòu)物車?yán)锩媪恕?
咖啡下單動(dòng)效，作者 Nhat M. Tran
3.1、系統(tǒng)正忙于什么事情
當(dāng)系統(tǒng)正在加載，正在執(zhí)行，正在運(yùn)行的過(guò)程中，通過(guò)動(dòng)效來(lái)告知用戶系統(tǒng)并沒(méi)有停止，而是正忙于執(zhí)行某件事情，是避免用戶誤解的手段。在用戶等待的過(guò)程中，通常會(huì)實(shí)用無(wú)限加載的動(dòng)效（一般使用在低于10s的操作中）：
對(duì)于超過(guò)10s的更長(zhǎng)的執(zhí)行過(guò)程，無(wú)限加載的動(dòng)效會(huì)顯得令人沮喪，這個(gè)時(shí)候?qū)嵱眠M(jìn)度條會(huì)更好：
這些視覺(jué)反饋很大程度上降低了系統(tǒng)給人的不確定感。
對(duì)于移動(dòng)端應(yīng)用，在初始加載階段所使用的啟動(dòng)動(dòng)畫界面，是否精心設(shè)計(jì)，決定了用戶對(duì)于整個(gè)產(chǎn)品的第一印象，優(yōu)秀的初始加載動(dòng)畫能夠?qū)⒂脩舻淖⒁饬慕乖甑牡却薪夥懦鰜?lái)。
Logo 閃屏 ，作者 Gleb Kuznetsov?
3.2、內(nèi)容加載
當(dāng)用戶需要時(shí)間來(lái)加載內(nèi)容的時(shí)候，建議使用一種特殊的的容器「界面骨架」來(lái)展現(xiàn)。這種臨時(shí)的內(nèi)容容器不僅能夠幫助用戶快速地了解界面的整體框架，構(gòu)建用戶預(yù)期，并且能夠在后臺(tái)快速地加載數(shù)據(jù)，漸進(jìn)式地幫用戶獲得信息。
內(nèi)容加載，作者 Ginny Wood
這種設(shè)計(jì)方式對(duì)于移動(dòng)端和桌面端的設(shè)計(jì)同樣適用：
界面骨架加載動(dòng)效，作者 Shane Doyle
4.1、通知和提醒
有效的通知和提醒，能幫用戶意識(shí)到有新的事情正在發(fā)生。在多數(shù)時(shí)候，我們建議設(shè)計(jì)師使用微妙的動(dòng)畫來(lái)進(jìn)行通知，因?yàn)閯?dòng)畫效果會(huì)自然地吸引用戶的注意力，人類的雙眼的動(dòng)態(tài)視覺(jué)其實(shí)是非常強(qiáng)的。
Aleksei Kipin 設(shè)計(jì)的通知?jiǎng)有?
4.2、提示用戶采取行動(dòng)
在很多情況下，用戶界面中會(huì)有很多地方會(huì)需要用戶提交信息。比如，需要用戶提交表單，或者用戶創(chuàng)建了一個(gè)密碼，但是在復(fù)雜度上不足需要修正，或者填寫郵箱來(lái)訂閱信息的時(shí)候，郵箱格式出錯(cuò)，等等。使用適當(dāng)?shù)囊曈X(jué)反饋總能夠更加有效地將問(wèn)題告知用戶。
內(nèi)聯(lián)郵箱驗(yàn)證機(jī)制，作者 Derek Reynolds
讓用戶有掌控感，就是為用戶創(chuàng)造更好的體驗(yàn)。在很多設(shè)計(jì)方案中，視覺(jué)反饋會(huì)因?yàn)榉N種原因被削弱了，甚至被忽略了。但是當(dāng)用戶在和 UI 進(jìn)行交互的時(shí)候，期望度和可動(dòng)性其實(shí)是高度依賴于這些動(dòng)效和微交互，而這正是設(shè)計(jì)師需要設(shè)計(jì)出優(yōu)秀視覺(jué)反饋效果的原因所在。
文章來(lái)源：優(yōu)設(shè) 作者：Nick Babich
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
隨著大眾消費(fèi)生活多元化和個(gè)性化的發(fā)展，卡通形象在當(dāng)下社會(huì)的影響力變得越來(lái)越重要，它們活躍在各個(gè)文化領(lǐng)域中，特別是在商業(yè)中應(yīng)用也越來(lái)越頻繁。
在信息爆炸時(shí)代，大多數(shù)人對(duì)過(guò)量的文字信息容易產(chǎn)生排斥的心理，并漸漸樂(lè)于接受視覺(jué)圖像形式的表達(dá)；而卡通形象由于其本身簡(jiǎn)潔的視覺(jué)形象，也成為了最理想的視覺(jué)傳播符號(hào)之一。
本期分享會(huì)先從比較知名的幾個(gè)卡通形象切入，然后分享過(guò)去幾年我自己創(chuàng)作過(guò)的一些形象，希望對(duì)正在設(shè)計(jì)卡通形象或自己想創(chuàng)作形象的朋友有些許幫助。
先羅列幾個(gè)比較有名的卡通形象
卡通形象一般分為具象動(dòng)物類型和抽象類型兩個(gè)方向。一提起動(dòng)物類比較有名氣的卡通形象（比如熊這種動(dòng)物），你大概會(huì)先想到熊本熊、布朗熊、泰迪熊，還有韓國(guó)的倒霉熊……兔子類的就是兔斯基、找死兔、可妮兔、流氓兔，還有很早的兔八哥……太多太多。
熊本熊的特征比較明顯，一身黑色加上兩個(gè)紅腮點(diǎn)，顏色上本身就給人很潮很時(shí)尚的感覺(jué)，體型略寬厚偏呆萌。很多女生會(huì)覺(jué)得它給人一種安全感，我的印象里它一直都是很憨厚的面癱造型出現(xiàn)，特別是出現(xiàn)在GIF動(dòng)圖里大量真人穿著它的道具摔倒的畫面（有了“智障熊”這個(gè)外號(hào)）比較搞笑，有點(diǎn)愣頭愣腦。
所以設(shè)計(jì)造型上除了能讓粉絲記住的特征外，更多的是對(duì)于它的性格打造成，給人總愛賣萌的印象。
流氓兔（MASHIMARO）是一只瞇著眼的韓國(guó)兔子，隨著無(wú)厘頭文化的興起，流氓兔調(diào)皮又帶戲謔的個(gè)性通過(guò)原創(chuàng)者創(chuàng)作的網(wǎng)絡(luò)動(dòng)畫形式呈現(xiàn)，其FLASH動(dòng)畫在亞洲乃至全球掀起不小的風(fēng)潮。
還有監(jiān)獄兔、兔斯基、兔八哥…這些耳熟能詳?shù)男蜗?，這里不一一列舉了。
以具象動(dòng)物創(chuàng)作卡通形象既簡(jiǎn)單又挺難的，為什么簡(jiǎn)單？因?yàn)椴挥媚闳ポ^勁腦汁再重新創(chuàng)造一個(gè)新的形象，具象動(dòng)物（比如熊）就是那個(gè)樣子。那為什么又很難？具象動(dòng)物卡通形象太多了，不管你怎么去變著法兒努力畫的不一樣，但最后的效果可能還是會(huì)雷同，況且知名的具象動(dòng)物IP形象又很多，所以不容易創(chuàng)作。
如何創(chuàng)作一個(gè)有特征的卡通形象
那么，今天主要是聊一聊我之前創(chuàng)作過(guò)的卡通形象當(dāng)中的心得體會(huì)和一些過(guò)程稿。第一個(gè)例子是在創(chuàng)作浪小花時(shí)候，主要從微博品牌標(biāo)志找切入點(diǎn)，提取LOGO的主要特征（就是圖形頭上的三個(gè)波浪，如下圖），這也是比較能體現(xiàn)卡通形象與品牌之間關(guān)系的地方。
前期草圖探索是比較漫長(zhǎng)和煎熬的，（下圖）這些是其中的一部分比較靠譜的草圖，盡管只是三個(gè)波，但做了很多種不同的變化。比如可以像個(gè)公雞冠一樣長(zhǎng)在頭上，也可以帽子形式戴在頭頂上，還可以長(zhǎng)在后背上。
在創(chuàng)作形象時(shí)是先從PC端的動(dòng)態(tài)表情（下圖22px大小）開始的，也就是先從主要使用場(chǎng)景著手，所以做出來(lái)的表情利用好有限的展示活動(dòng)區(qū)域，頭身比例控制好，既要考慮形象的完整性，又要考慮動(dòng)作展示能夠看得最清楚，還要能突出這個(gè)不一樣的品牌特征（腦袋上那三個(gè)波），這也是一個(gè)非常具有挑戰(zhàn)性的案例。
到了手機(jī)移動(dòng)端里，表情基本上是把PC上的表情一部分移植過(guò)去，不改變比例和動(dòng)作情況下，盡可能豐富設(shè)計(jì)的細(xì)節(jié)。
這里要提的是形象顏色的選擇，考慮要最貼近用戶，不用微博那么重的紅色，由于表情是最開始是用在PC網(wǎng)頁(yè)版微博文字里，顏色太重就會(huì)看來(lái)視覺(jué)比較突兀，所以選了一個(gè)跟人的膚色很近的肉粉色（有點(diǎn)像小嬰兒），這樣表情用起來(lái)就比較具有親和感。
而在設(shè)計(jì)微小米的時(shí)候選用了LOGO本身的顏色大紅色，由于使用場(chǎng)景是手機(jī)端聊天對(duì)話里（下圖），感覺(jué)不會(huì)那么影響閱讀（其實(shí)我個(gè)人很喜歡這個(gè)紅色，給人很喜慶的感覺(jué)）。
（下圖）在確定這個(gè)形象之前的一些探索草圖這里也發(fā)出來(lái)，而且這一次創(chuàng)作了三個(gè)形象，包括一個(gè)白胖子和一只小雞，（有參考了Line的形象）希望能出一個(gè)小家族，這樣后期延展運(yùn)用也能玩起來(lái)。
在創(chuàng)作這個(gè)形象前，嘗試了很多不同的形象（上圖），最后采用了這個(gè)大紅口袋娃娃：臉和身子是連在一起的，也看不到脖子，所以這個(gè)形象的特點(diǎn)也就在這里。另外，頭上加了一個(gè)小揪兒。
（上圖）這個(gè)是優(yōu)化前的樣子（頭上是圓圓的揪兒），為了制作動(dòng)態(tài)GIF時(shí)，讓頭上的小揪兒動(dòng)起來(lái)更帶感，就改成了（下圖）這個(gè)樣子，跳起來(lái)可以一甩一甩的。
在進(jìn)行卡通形象提案之前，如果能花點(diǎn)心思做一個(gè)小小的場(chǎng)景（下圖）也能給自己的方案加分。
每個(gè)形象都嘗試一些動(dòng)作變化，這樣它們各自的性格就很容易把握了。比如，我會(huì)覺(jué)得（下圖）紅框那個(gè)表情延伸感覺(jué)很猥瑣，不太適合這個(gè)形象，所以后面的表情延展盡量讓微小米表現(xiàn)得更萌一些，避開這種很猥瑣的感覺(jué)。(當(dāng)然這些說(shuō)起來(lái)都比較偏個(gè)人感受，只有作者自己可以體會(huì)到）
把這幾個(gè)形象性格先摸透很有必要（來(lái)一張定妝的全家福）。
我個(gè)人比較滿意（下圖）這一組系列的扁平化風(fēng)格，沒(méi)有描線的感覺(jué)確實(shí)更輕快，偏小清新。
下面是幾組自己平時(shí)的創(chuàng)作，也是利用業(yè)余時(shí)間創(chuàng)作的幾個(gè)形象，我會(huì)思考如何抓取每一個(gè)形象不一樣的特征？于是，這些特征可能是發(fā)型的變化，可能是眼睛的變化，也可能是衣著的變化……
這些不一樣的變化都是讓這個(gè)形象看起來(lái)與眾不同，讓人先記住它，但最打動(dòng)人的還是這個(gè)形象能否跟看到它的人產(chǎn)生互動(dòng)和共鳴……這也是這個(gè)形象的靈魂和存在的意義。
這一個(gè)形象的創(chuàng)意點(diǎn)是借用大家都熟知的“小紅帽”這個(gè)經(jīng)典童話造型，讓這個(gè)小人長(zhǎng)著胡子，名字和形象就會(huì)形成一個(gè)心理和視覺(jué)的反差。
將自戀、貪吃、自大、邋遢……這些小人物的缺點(diǎn)賦予這個(gè)形象，這樣一個(gè)活脫脫的“小屌絲”的形象可能就會(huì)給人很深的記憶。
畢竟生活中大部分人都有著這樣那樣的缺點(diǎn)，但都希望擺脫囧態(tài)，讓自己變好的那分勵(lì)志感。
我很喜歡畫一些丑乖的東西，現(xiàn)在大家都審美疲勞了，可愛的東西都乏味了，反而更喜歡一些丑的可愛的形象。那么給這些形象加個(gè)厚嘴唇、小胡子什么的，反而很容易出效果。
好了，寫到這里……下面的圖大家自己發(fā)現(xiàn)亮點(diǎn)，自己感受腦補(bǔ)吧……總之，創(chuàng)作形象時(shí)還是要抓住大眾的心理軟肋，先打動(dòng)自己再去感染別人。
在畫卡通形象時(shí)候，我們往往很容易陷入兩個(gè)難以跳出的區(qū)域：一個(gè)是容易畫得偏低幼、低齡化；另一個(gè)就是表情動(dòng)作偏呆板國(guó)企風(fēng)。這是受我們從小周圍接收的圖像信息影響的，在還沒(méi)有將練習(xí)探索的草圖量形成一個(gè)質(zhì)的提升之前，先有這種意識(shí)也很重要，這種意識(shí)會(huì)幫助你在以后摸索練習(xí)的時(shí)候注意到形象的頭身比例，以及思路慣性的打破。
歡迎對(duì)品牌、插畫和卡通形象感興趣的朋友可以一起討論、練習(xí)。
文章來(lái)源：我們的設(shè)計(jì)日記（ID：helloskys）
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
很多朋友面對(duì)AE表達(dá)式望而生畏，不過(guò)再難的東西都會(huì)有它最本質(zhì)的規(guī)則，如果你理解了基本的原理和常用的表達(dá)式命令，這也許會(huì)提高你的工作效率。我通過(guò)自己對(duì)AE表達(dá)式的理解，嘗試用最簡(jiǎn)單的語(yǔ)言解釋一些看似復(fù)雜的操作，如果此篇文章能給你帶來(lái)一些啟發(fā)，不勝榮幸~
表達(dá)式就是AE內(nèi)部基于JS編程語(yǔ)言開發(fā)的編輯工具，可以理解為簡(jiǎn)單的編程，不過(guò)沒(méi)有編程那么復(fù)雜。其次表達(dá)式只能添加在可以編輯的關(guān)建幀的屬性上，不可以添加在其他地方；表達(dá)式的使用根據(jù)實(shí)際情況來(lái)決定，如果關(guān)鍵幀可以更好的實(shí)現(xiàn)你想要的效果，使用關(guān)鍵幀就可以啦，表達(dá)式大部分情況下是可以更節(jié)約時(shí)間，提高工作效率的。
A.表達(dá)式開關(guān) B.表達(dá)式圖表 C.表達(dá)式關(guān)聯(lián)器 D.表達(dá)式語(yǔ)言菜單
由于AE里不同的屬性的參數(shù)不同，常用的我們可以分為：數(shù)值（旋轉(zhuǎn)/不透明度）、數(shù)組（位置/縮放）、布爾值（true代表真、false代表假/0代表假、1代表真）這三種形式來(lái)進(jìn)行書寫表達(dá)式。對(duì)于表達(dá)式AE也有很多內(nèi)置的函數(shù)命令，直接可以在表達(dá)式語(yǔ)言菜單里面進(jìn)行調(diào)用。
原理:
time表示時(shí)間，以秒為單位，time*n =時(shí)間（秒數(shù)）*n （若應(yīng)用于旋轉(zhuǎn)屬性，則n表示角度）
舉例:
若在旋轉(zhuǎn)屬性上設(shè)置time表達(dá)式為time*60，則圖層將通過(guò)1秒的時(shí)間旋轉(zhuǎn)60度，2秒時(shí)旋轉(zhuǎn)到120度以此類推（數(shù)值為正數(shù)時(shí)順時(shí)針旋轉(zhuǎn)，為負(fù)數(shù)時(shí)逆時(shí)針旋轉(zhuǎn)）
注意事項(xiàng):
time只能賦予一維屬性的數(shù)據(jù)。(位置屬性可進(jìn)行單獨(dú)尺寸的分離，從而可單獨(dú)設(shè)置X或Y上的time)
wiggle(freq, amp, octaves = 1, amp_mult = 0.5, t = time)
原理:
freq=頻率（設(shè)置每秒抖動(dòng)的頻率）；amp=振幅（每次抖動(dòng)的幅度）；octaves=振幅幅度（在每次振幅的基礎(chǔ)上還會(huì)進(jìn)行一定的震幅幅度，很少用）；amp_mult=頻率倍頻（默認(rèn)數(shù)值即可，數(shù)值越接近0，細(xì)節(jié)越少；越接近1，細(xì)節(jié)越多）；t=持續(xù)時(shí)間（抖動(dòng)時(shí)間為合成時(shí)間，一般無(wú)需修改）；一般只寫前兩個(gè)數(shù)值即可
舉例:
若在一維屬性中，為位置屬性添加wiggle(10,20)，則表示圖層每秒抖動(dòng)10次，每次隨機(jī)波動(dòng)的幅度為20；若在二維屬性中，為縮放添加n=wiggle(1,10);[n[0],n[0]]，則表示圖層的縮放XY在每秒抖動(dòng)10次，每次隨機(jī)波動(dòng)的幅度為20；若在二維屬性中，想單獨(dú)在單維度進(jìn)行抖動(dòng)，需要將屬性設(shè)置為單獨(dú)尺寸后添加wiggle(10,20)，表示圖層的縮放X軸在每秒抖動(dòng)10次，每次隨機(jī)波動(dòng)的幅度為20。
注意事項(xiàng):
可直接在現(xiàn)有屬性上運(yùn)行，包括任何關(guān)鍵幀
原理:
為每間隔多少數(shù)值來(lái)產(chǎn)生多少變化
舉例:
若為圖層1的旋轉(zhuǎn)屬性添加表達(dá)式index*5 ，則第一個(gè)圖層會(huì)旋轉(zhuǎn)5度，之后按Ctrl+D去復(fù)制多個(gè)圖層時(shí)，第2個(gè)圖層將旋轉(zhuǎn)10度，以此類推；若想第一層圖形不產(chǎn)生旋轉(zhuǎn)保持正常形態(tài)，復(fù)制后的圖形以5度遞增，表達(dá)式可寫為(index-1)*5
原理:
在當(dāng)前時(shí)間輸出當(dāng)前屬性值
舉例:
若對(duì)位置屬性添加表達(dá)式為value+100，則位置會(huì)在關(guān)鍵幀數(shù)值的基礎(chǔ)上對(duì)X軸向右偏移100（正數(shù)向右側(cè)，負(fù)數(shù)像左側(cè)）；若想控制Y軸的位置屬性，則可對(duì)位置屬性進(jìn)行單獨(dú)尺寸的分割，從而可單獨(dú)控制Y軸（正數(shù)向下，負(fù)數(shù)向上）
注意事項(xiàng):
更多的使用場(chǎng)景是結(jié)合其他表達(dá)式一起應(yīng)用
5. random表達(dá)式（隨機(jī)表達(dá)式）
原理:
random(x,y)在數(shù)值x到y(tǒng)之間隨機(jī)進(jìn)行抽取，最小值為x，最大值為y
舉例:
若為數(shù)字源文本添加表達(dá)式random(20)，則數(shù)據(jù)會(huì)隨機(jī)改變，最大值不會(huì)超過(guò)20；
若為數(shù)字源文本添加表達(dá)式random(10,100)，則數(shù)據(jù)會(huì)在10<數(shù)值<100之間隨機(jī)改變； 若為數(shù)字源文本添加表達(dá)式seedRandom(5, timeless = false)，random(50)，則數(shù)據(jù)會(huì)在50以內(nèi)隨機(jī)改變（前面的5是種子數(shù)，如一張畫面中需要多個(gè)相同區(qū)間的數(shù)值做隨機(jī)變化，就要為他們添加不同的種子數(shù)，防止兩者隨機(jī)變化雷同）,若希望數(shù)字隨機(jī)變化為整數(shù)則應(yīng)添加表達(dá)式為Math.round(random(2,50))，表示在2和50之間隨機(jī)改變無(wú)小數(shù)
注意事項(xiàng):
隨機(jī)表達(dá)式不僅局限于數(shù)據(jù)上的使用，其他屬性也可以應(yīng)用，若數(shù)值為整數(shù)Math的M要大寫
原理:
以此類推
舉例:
如下圖gif
原理:
timeRemap*n，n以幀為單位
舉例:
將圖層設(shè)置為timeRemap*10，代表每隔10幀就抽掉1幀畫面，(根據(jù)要抽取的速率決定)
注意事項(xiàng):
使用timeRemap表達(dá)式之前要啟用時(shí)間重映射，否則無(wú)法使用此表達(dá)式
原理:
舉例:
見下圖均以(time,0,3,131,1000)為例，若為數(shù)字的源文本屬性添加此表達(dá)式可以制作出倒計(jì)時(shí)的效果n=linear(time, 0, 3, 3, 0)表示從0-3秒數(shù)字從3到0，希望數(shù)字為整體需添加Math.floor(）
注意事項(xiàng):
倒計(jì)時(shí)的用法比較常用，整數(shù)M要大寫
原理:
degreesToRadians(degrees) 角度轉(zhuǎn)為弧度（degrees度的變量或表達(dá)式）radiansToDegrees(radians)弧度轉(zhuǎn)為角度（radians弧度的變量或表達(dá)式）
舉例:
常用語(yǔ)數(shù)學(xué)中的一些計(jì)算sin，cos，tan，sec，csc，cot等
原理:
layer(index)中index 是數(shù)值，按照編號(hào)檢索圖層；layer(name)中name 是一個(gè)字符串，按照名稱檢索圖層（若沒(méi)有圖層名稱，則根據(jù)源名稱）；layer(otherLayer, relIndex)中otherLayer 表示圖層對(duì)象，relIndex 表示數(shù)值，檢索屬于圖層對(duì)象的數(shù)值圖層
舉例:
原理:
marker.key(index)中index 是數(shù)值；marker.key(name)中name 是一個(gè)字符串
舉例:
thisComp.marker.key(1).time表示返回第一個(gè)合成標(biāo)記的時(shí)間;thisComp.marker.key(“我叫注釋名稱”).time表示返回具有名稱”我叫注釋名稱”的合成標(biāo)記的時(shí)間
原理:
width表示返回合成寬度；height表示返回合成高度
舉例:
[thisComp.width/2, thisComp.height/2]表示寬度和高度為合成的一半也就是居中的位置
原理:
param(name)中name表示字符串；param(index)表示數(shù)值
舉例:
effect(“高斯模糊”).param(“模糊度”)效果控制點(diǎn)始終位于圖層空間中
原理:
復(fù)制粘貼表達(dá)式使用就可以，amp表示振幅,freq表示頻率,decay表示衰減（根據(jù)不同需求做不同的調(diào)整）
舉例:
n = 0; if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){n–;}}
if (n == 0){t = 0;}else{
t = time – key(n).time;}
if (n > 0){
v = velocityAtTime(key(n).time – thisComp.frameDuration/10);
amp = .03;
freq = 2.5;
decay = 4.0;
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{value;}
上述內(nèi)容復(fù)制粘貼使用即可
注意:motion2腳本也帶此功能，方法不唯一
原理:
k表示反彈最終結(jié)果，a表示反彈阻力，b表示反彈變化時(shí)間
舉例:
k=500; a=8; b=30; x=k*(1-Math.exp(-a*time)*Math.cos(b*time));[x,x]（根據(jù)不同情況調(diào)節(jié)kab的數(shù)值即可）
原理:
StartNumber表示開始時(shí)的數(shù)值，EndNumber表示結(jié)束時(shí)的數(shù)值，StartTime表示開始的時(shí)間，EndTime表示結(jié)束的時(shí)間，和前面的linear表達(dá)式相對(duì)應(yīng)
舉例:
StartNumber=1;
EndNumber=20;
StartTime=0;
EndTime=3;
t=linear(time,StartTime,EndTime,StartNumber,EndNumber);Math.floor(t)
原理:
spd表示擠壓拉伸的速度，maxDev表示擠壓拉伸的大小，decay表示衰減
舉例:
spd =20;maxDev =10;
decay = 1;
t = time – inPoint;
offset = maxDev*Math.sin(t*spd)/Math.exp(t*decay);
scaleX = scale[0] + offset;scaleY = scale[1] – offset;
[scaleX,scaleY]
原理:
delay表示要延遲的幀數(shù)
舉例:
為位置屬性添加表達(dá)式delay = 0.5;
d = delay*thisComp.frameDuration*(index – 1);
thisComp.layer(1).position.valueAtTime(time – d)；
如想要實(shí)現(xiàn)不透明度拖尾需為不透明度屬性添加表達(dá)式opacityFactor =.80;
Math.pow(opacityFactor,index – 1)*100(調(diào)整好一個(gè)圖層后復(fù)制多個(gè))
文章來(lái)源：優(yōu)設(shè) 作者：凌旬
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如果要設(shè)計(jì)產(chǎn)品或開發(fā)界面，我們通常會(huì)需要風(fēng)格相同的圖標(biāo)，若無(wú)法自行繪制或不希望付費(fèi)購(gòu)買也有很多替代方案，本文要推薦的「Basicons」是一款基礎(chǔ)、簡(jiǎn)單的圖標(biāo)設(shè)計(jì)，可用于產(chǎn)品開發(fā)設(shè)計(jì)，這套圖標(biāo)一共收錄186種圖案，同時(shí)提供.svg向量圖格式可一次打包下載，利用Basicons界面快速預(yù)覽圖標(biāo)，也能切換不同尺寸下的呈現(xiàn)樣式，包括12px、16px、24px和32px四種大小和1px、1.5px和2px筆觸粗細(xì)，可以快速下載圖標(biāo)圖案或取得源碼。
Basicons也有一個(gè)內(nèi)嵌（Embed）語(yǔ)法產(chǎn)生器，能產(chǎn)生帶入圖標(biāo)圖案的JavaScript語(yǔ)法和HTML程式碼，如果要獲得更好的效能，建議直接從網(wǎng)站一次下載所有圖標(biāo)，再依照需求使用即可。這套圖標(biāo)集以MIT授權(quán)方式釋出。（即可以免費(fèi)使用、修改、出售，附上協(xié)議即可）
網(wǎng)站鏈接：https://basicons.xyz/
使用教學(xué)
STEP 1
開啟Basicons 從首頁(yè)就能預(yù)覽完整圖標(biāo)圖案，這套圖標(biāo)特色是以非常精簡(jiǎn)、干凈的線條繪制而成的圖形，每個(gè)圖案下方會(huì)有名稱，應(yīng)該能夠很快速聯(lián)想到圖標(biāo)代表的意思（否則就失去圖標(biāo)的意義…），可以稍微預(yù)覽一下看看自己需要的圖案有沒(méi)有列在上面，依照說(shuō)明，Basicons 每周都會(huì)更新加入新的圖案。
STEP 2
從右側(cè)的「Customize」自訂選項(xiàng)可以調(diào)整圖標(biāo)尺寸、線條粗細(xì)，調(diào)整后會(huì)直接呈現(xiàn)于左側(cè)。
STEP 3
點(diǎn)選要下載的圖標(biāo)后再按下右側(cè)的「Download」就能下載.svg圖標(biāo)格式（或是從上方點(diǎn)選Download All將所有186個(gè)圖標(biāo)完整下載），如果想直接取用SVG原始碼的話可點(diǎn)選「Copy SVG」復(fù)制程式碼。
除此之外，Basicons 還有提供直接嵌入的JavaScript 鏈結(jié)和原始碼。
文章來(lái)源：優(yōu)設(shè) 作者：Pseric
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
import 導(dǎo)入模塊、export 導(dǎo)出模塊
可以直接在任何變量或者函數(shù)前面加上一個(gè) export 關(guān)鍵字，就可以將它導(dǎo)出。
在一個(gè)文件中：
export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } import { square, diag } from 'lib'; console.log(square(11)); // 121 console.log(diag(4, 3)); 總結(jié)
//mod.js // 第一種模塊導(dǎo)出的書寫方式(一個(gè)個(gè)的導(dǎo)出) // 導(dǎo)出普通值 export let a = 12; export let b = 5; // 導(dǎo)出json export let json = { a, b }; // 導(dǎo)出函數(shù) export let show = function(){ return 'welcome'; }; // 導(dǎo)出類 export class Person{ constructor(){ this.name = 'jam'; } showName(){ return this.name; } } //index.js //導(dǎo)出模塊如果用default了，引入的時(shí)候直接用，若沒(méi)有用default，引入的時(shí)候可以用{}的形式 // 導(dǎo)入模塊的方式 import { a, b, json, show, Person } from './mod.js'; console.log(a); // 12 console.log(b); // 5 console.log(json.a); // 12 console.log(json.b); // 5 console.log(show()); // welcome console.log(new Person().showName()); // jam //mod1.js // 第二種模塊導(dǎo)出的書寫方式 let a = 12; let b = 5; let c = 10; export { a, b, c as cc // as是別名，使用的時(shí)候只能用別名，特別注意下 }; //index1.js // 導(dǎo)入模塊的方式 import { a, b, cc // cc是導(dǎo)出的，as別名 } from './mod1.js'; console.log(a); // 12 console.log(b); // 5 console.log(cc); // 10 //mod2.js // 第三種模塊導(dǎo)出的書寫方式 ---> default // default方式的優(yōu)點(diǎn)，import無(wú)需知道變量名，就可以直接使用，如下 // 每個(gè)模塊只允許一個(gè)默認(rèn)出口 var name = 'jam'; var age = '28'; export default { name, age, default(){ console.log('welcome to es6 module of default...'); }, getName(){ return 'bb'; }, getAge(){ return 2; } }; //index2.js // 導(dǎo)入模塊的方式 import mainAttr from './mod2.js'; var str = ' '; // 直接調(diào)用 console.log(`我的英文名是:${mainAttr.name}我的年齡是${mainAttr.age}`); mainAttr.default(); // welcome to es6 module of default... console.log(mainAttr.getName()); // bb console.log(mainAttr.getAge()); // 2 //mod3.js var name = 'jam'; var age = '28'; export function getName(){ return name; }; export function getAge(){ return age; }; //index3.js // 導(dǎo)入模塊的方式 import * as fn from './mod3.js'; // 直接調(diào)用 console.log(fn.getName()); //
手機(jī)UI中的交互是保持產(chǎn)品鮮活生命力的源動(dòng)力。好的交互可以幫助用戶快速地獲得反饋，認(rèn)知布局，增強(qiáng)體驗(yàn)感和沉浸感。
手機(jī)UI中的交互是保持產(chǎn)品鮮活生命力的源動(dòng)力。好的交互可以幫助用戶快速地獲得反饋，認(rèn)知布局，增強(qiáng)體驗(yàn)感和沉浸感。這里為大家整理了一些優(yōu)秀并富有創(chuàng)意的交互作品，為你的產(chǎn)品設(shè)計(jì)注入靈感。
--手機(jī)appUI設(shè)計(jì)--
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
更多精彩文章：
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn