在這個項目中，主要任務(wù)是為舊金山最古老的玩具品牌 Jeffrey’s Toys 設(shè)計一個全新的品牌電商網(wǎng)站。

新電商網(wǎng)站最主要的目的是吸引顧客前往線下店鋪選購商品，同時也希望通過快遞和門店自提的方式來完善線上銷售流程，拓展消費群體。

該網(wǎng)站需要鞏固品牌核心業(yè)務(wù)價值觀：傳統(tǒng)，有趣和創(chuàng)意。該網(wǎng)站還需要通過強調(diào)其龐大的庫存體量和手工精選商品來將 Jeffrey’s Toys 和其他電子商務(wù)零售商區(qū)分開。

該網(wǎng)站的主要業(yè)務(wù)目標(biāo)包括：

• 能快速定位商品

• 每一個商品都有單獨的詳情頁

• 用戶能成功購買一個或多個商品

• 為爆款商品引流

用戶分析

1. 用戶畫像

誰才是這個網(wǎng)站真正的用戶？當(dāng)我接到這個任務(wù)的時候，客戶已經(jīng)繪制出了3個用戶畫像，每個用戶畫像都有特定的需求和痛點。

△ 客戶繪制的三個用戶畫像

基于三個用戶畫像，我確定了該網(wǎng)站要滿足的用戶需求，同時也考慮了Jeffrey’s Toys的需求。

確定的主要需求是：

• 通過清晰的商品組織分類來提供流暢的電商購物體驗

• 通過商品搜索使用戶能夠快速找到想要的商品

• 通過實用的商品推薦來體現(xiàn) Jeffrey’s Toys 的專業(yè)以及龐大的庫存

• 通過與用戶建立品牌關(guān)系來樹立信任

• 通過產(chǎn)品細節(jié)信息來確保用戶選購合適的商品

• 通過商品評論來輔助用戶作出消費決策并允許用戶進行商品反饋

• 通過的下單結(jié)賬流程簡化購買行為并節(jié)省用戶時間

2. 競品分析

為了獲得啟發(fā)，我確定了3個主要競品，特別是舊金山的精品玩具店；還有3個玩具零售市場的間接競品。直接競品我分析了包括 Ambassador Toys 、 Amazon 和 TANTRUM 。間接競品分析了 Lululemon 、Ikea 和 CVS 。競品分析的目的是比較并找出這些電商網(wǎng)站的共同特征以及 Jeffrey’s Toys 能夠脫穎而出的潛在機會。

競品分析最重要的收獲是了解了不同的電商網(wǎng)站的商品選擇模塊以及網(wǎng)站整體的布局。這些信息有助于鞏固我第二階段的研究。

△ 比較直接競品和間接競品的特征

2. 思維導(dǎo)圖

在完成競品分析之后，我把這個項目中用戶的需求和客戶的需求列成了長長的信息清單。之后我又通過思維導(dǎo)圖來理清了在這個項目中用戶的需求和客戶的需求。思維導(dǎo)圖幫助我將信息組織成更清晰的想法，同時在各個想法之間建立層次結(jié)構(gòu)關(guān)系。

△ 用來理清信息和想法的思維導(dǎo)圖

信息架構(gòu)

接下來我通過卡片分類法來構(gòu)造網(wǎng)站的導(dǎo)航系統(tǒng)，卡片分類法是一種利用人們現(xiàn)有思維模型的研究技術(shù)。在構(gòu)造導(dǎo)航系統(tǒng)時，我了解到94種商店中最暢銷的商品庫存信息。擁有如此龐大的商品庫存，就很有必要通過清晰易懂的方式組織、分類庫存信息，以便用戶能夠快速的找到他們想要的商品。

1. 卡片分類

△ 卡片分類的初期階段

開放式卡片分類：我要求9位參與調(diào)研的用戶通過他們自己覺得合理的分類規(guī)則將94種商品分類，然后給每個類別加上他們認為能夠準(zhǔn)確描述該類別的標(biāo)簽。這樣做的目的是對于網(wǎng)站潛在的商品分類方式及類別名稱有一個大致的了解。

封閉式卡片分類：基于開放式卡片分類的結(jié)果，我從最常見的類別標(biāo)簽中創(chuàng)建了13個預(yù)定類別。然后，我進行了封閉式的卡片分類，我邀請了20位參與調(diào)研的用戶將商品逐一分類到我之前預(yù)定的13種類別中。封閉式卡片分類有助于讓我在進行設(shè)計之前能夠清楚判斷這些類別是否符合大部分網(wǎng)站用戶的分類邏輯。

△ 通過卡片分類得到的13種商品類別

2. 站點圖

根據(jù)卡片分類以及競品分析的結(jié)果，我繪制了網(wǎng)站的站點圖來明確整個網(wǎng)站的框架結(jié)構(gòu)。這是為了確保所有產(chǎn)品都放置在用戶期望的位置，同時使購物體驗更加直觀。

△ 站點地圖

3. 系統(tǒng)架構(gòu)圖

為了對用戶將會如何瀏覽網(wǎng)站有一個全面的概述，我繪制一張系統(tǒng)架構(gòu)圖。這樣做的主要目的是為了了解網(wǎng)站應(yīng)該給用戶提供什么功能以及功能拓展的廣度。我還通過系統(tǒng)架構(gòu)圖來探索電商網(wǎng)站和實體店鋪之間的聯(lián)系。

△ 系統(tǒng)架構(gòu)圖演示用戶將會如何瀏覽網(wǎng)站

4. 用戶流程

在確定了我需要給用戶提供的體驗「全局」之后，我為每一個用戶畫像創(chuàng)建了不同的用戶流程，通過不同的用戶流程來使購物體驗更加符合他們的需求。構(gòu)建用戶流程的目的是確定每個用戶為了實現(xiàn)各自的預(yù)期目標(biāo)經(jīng)過的頁面和操作步驟。這不僅能使我專注于每個用戶的操作，也使我能夠在設(shè)計網(wǎng)站的時候?qū)⒐δ懿鸱?，以便給用戶提供更佳的購物體驗。

我繪制的第一個用戶流程是關(guān)于用戶畫像是 Jenny 的。Jenny 最主要的目是為自己的孫子購買初級魔術(shù)玩具。Jenny 的用戶流程（如下圖所示）表明了她是如何搜索初級魔術(shù)玩具，以及為了成功購買她可能采取的幾種不同路徑。

△ Jenny 的用戶流程

Debbie 和 Jenny 都希望能有一個的下單結(jié)賬流程，所以很有必要在用戶流程中繪制出下單結(jié)賬流程。下圖的用戶流程顯示了Debbie在選定一個特技自行車之后該如何進行結(jié)賬下單。通過允許她登錄自己的帳號，自動輸入她的結(jié)賬信息來簡化她的結(jié)賬下單流程。

△ Debbie 的用戶流程

開發(fā)階段

1. 草稿

在我整理了前期獲取的所有信息之后，我就開始著手設(shè)計網(wǎng)站?；谥罢沓鰜淼挠脩袅鞒虉D，我開始繪制幾個主要頁面的草圖，同時快速思考出幾個不同的網(wǎng)站布局方案。之后我邀請3個用戶參與了用戶調(diào)研，以驗證這些方案是否同時滿足客戶和網(wǎng)站用戶的需求。

△ 網(wǎng)站首頁和品類頁面的初稿

2. 線框圖

基于用戶對草圖的反饋和我個人的想法，我開始使用Figma來繪制線框圖。整個過程中，根據(jù)優(yōu)先級不同，優(yōu)先考慮最能滿足網(wǎng)站用戶的功能。

△ 網(wǎng)站首頁和產(chǎn)品詳情頁的線框圖

原型制作

1. 主頁

首頁我盡可能的保持簡潔，避免用戶進入網(wǎng)站時被過多的信息干擾而不知所措。

首頁放置了全局導(dǎo)航、輔助導(dǎo)航和搜索欄，方便用戶快捷的找到自己想要的商品。首頁還放置了新品推薦，因為新品推薦能夠展示品牌豐富的庫存，同時能為用戶提供有用的購買建議。我想通過介紹 Jeffrey’s Toys 豐富的歷史來樹立用戶品牌聯(lián)系，所以在首頁我還放置了「關(guān)于我們」部分，用戶點擊還可跳轉(zhuǎn)到具體的介紹頁面查看更多關(guān)于品牌故事的信息。在頁腳，我放置了其他的用戶可能需要的信息。除此之外，我還將用戶交流系統(tǒng)放在頁腳，這樣是為了獲得用戶想法并在店鋪進行活動時通過用戶參與提高店鋪活動氛圍。

2. 商品類別頁面

當(dāng)用戶點擊商店按鈕或者是某個類別之后，用戶將會前往一個列出了該類別下所有商品的商品列表頁。有個用戶畫像想要給他的孫子買一個合適他孫子年齡的玩具，所以頁面需要一個品類篩選器，同時支持商品按照不同的屬性例如年齡、價格和品牌分類也很重要。除此之外，我還通過面包屑導(dǎo)航來方便用戶定位頁面位置。

△ 商品類別頁線框圖

3. 商品詳情頁

在商品詳情頁，我希望能夠提供盡可能多的商品詳情來確保這個商品是用戶想要的。

在頁面下方，網(wǎng)站會基于當(dāng)前商品給用戶推薦其他相似商品。在商品詳情頁，產(chǎn)品評論區(qū)占了很大一部分，因為用戶可以在產(chǎn)品評論區(qū)反饋商品信息，便于樹立用戶信任，同時用戶能夠通過其他用戶的評論來作出更明智的購買決定。為了簡化下單流程，我設(shè)計了一個購物車預(yù)覽頁，用戶在購物車預(yù)覽頁可以預(yù)覽商品信息，用戶每次將商品加入購物車后都會出現(xiàn)購物車預(yù)覽頁，在購物車預(yù)覽頁面，用戶可以很方便的點擊「選好了」按鈕而進入結(jié)賬下單流程。

△ 商品詳情頁線框圖

4. 購物車預(yù)覽頁

當(dāng)用戶點擊「選好了」按鈕或者是購物車按鈕，用戶將會進入到一個如下圖所示的購物車預(yù)覽頁。這是結(jié)賬下單流程的第一步，用戶在購物車可以管理他們所選的商品，作出合適的調(diào)整。用戶在下單時，可以選擇到店自提或者是物流配送，設(shè)置到店自提是為了引導(dǎo)用戶去 Jeffrey’s Toy的線下店鋪，同時降低運輸成本。

△ 購物車預(yù)覽頁線框圖

5. 結(jié)帳頁面

客戶提供的三個用戶畫像的主要痛點之一就是想要有一個的結(jié)賬流程，所以我得確保結(jié)賬下單體驗要盡可能的流暢。作為一個回頭客，用戶可以選擇登錄自己的帳號，并自動保存物流信息和支付信息。我決定在一個頁面上承載全部的結(jié)賬流程，這樣方便用戶在結(jié)賬流程中任何時刻都能編輯信息。頂部的進度欄顯示了下單結(jié)賬流程有多少步，用戶當(dāng)前在哪一步以及用戶還剩下多少步驟。

△ 登錄頁

△ 下單頁

△ 訂單查看頁

6. 其他畫面

我還創(chuàng)建了一些其他頁面，例如訂單確認頁面。訂單確認頁面明確告知用戶結(jié)賬流程已經(jīng)完成了，用戶還能在訂單確認頁查看有關(guān)訂單的其他信息，以供參考。

我創(chuàng)建了一個店鋪聯(lián)系頁面，當(dāng)用戶在網(wǎng)站找不到想要的商品時，可以在店鋪聯(lián)系頁面查詢線下店鋪商品情況以及店鋪的營業(yè)時間、位置和聯(lián)系電話。

除此之外我還創(chuàng)建了一個「關(guān)于頁面」用來著重強調(diào) Jeffrey’s Toys 與其他電商網(wǎng)站例如亞馬遜的區(qū)別。我還在這個頁面介紹了Jeffrey’s Toys 長達60年的獨特歷史，以增強用戶對于品牌傳統(tǒng)、有趣和創(chuàng)意的商業(yè)價值的印象。

△ 訂單確認頁

△ 聯(lián)系方式頁

△ 公司介紹頁

7. 可用性測試

在完成線框圖之后，我就開始繪制網(wǎng)站原型以便進行可用性測試。這使我能夠評估用戶將會如何與網(wǎng)站進行交互，也能讓我評估網(wǎng)站是否滿足了用戶的基本需求。在進行UI設(shè)計之前，通過中保真原型進行可用性測試來獲取潛在用戶真實、關(guān)鍵的反饋是很有必要的，可用性測試還能鞏固網(wǎng)站的功能需求。

我邀請了4位用戶進行可用性測試，為了讓他們吻合用戶畫像中的用戶特征，我指定了三種用戶場景來讓他們完成測試。這三種用戶場景包括：

• 您需要為您的女兒購買一個玩具。您會怎么查找商品并完成購買。

• 您可以通過什么方法知道 Jeffrey’s Toys 下個月將要舉辦的店鋪活動。

• 當(dāng)您在網(wǎng)站上沒有找到您想要的玩具時，您將如何查詢并購買。

這些是我通過可用性測試得到的用戶反饋：

• 總體而言，用戶能夠輕松地找到想要的產(chǎn)品和信息

• 在結(jié)賬流程中，促銷活動部分會分散用戶的注意力

• 部分用戶不想通過電話來查詢商品信息，需要提供其他的查詢方式。

• 部分用戶覺得前往線下店鋪的引導(dǎo)部分還可以增強，目前的引導(dǎo)不夠。

△ 可用性測試得到的反饋

8. 后續(xù)步驟

這個案例研究展現(xiàn)的只是電商網(wǎng)站設(shè)計的開端。后續(xù)我將會繼續(xù)進行可用性測試，并進一步迭代我的設(shè)計。如果有更多的時間，我將會著重探索更多從網(wǎng)站引導(dǎo)用戶前往線下店鋪的方式。我也將會繼續(xù)豐富網(wǎng)站頁面并將Jeffrey’s Toys的視覺風(fēng)格融入到網(wǎng)站中。下圖展示了我最初設(shè)想的UI設(shè)計風(fēng)格。UI設(shè)計我希望秉持簡潔、創(chuàng)意、傳統(tǒng)的設(shè)計理念。

△ 首頁

△ 商品分類頁

△ 商品詳情頁

編輯總結(jié)

本文以玩具購物網(wǎng)站這個小案例，清晰地記錄了一個較為完整的產(chǎn)品設(shè)計流程。不論是設(shè)計方法，還是記錄方法，都可以借鑒運用在工作、匯報和作品集上。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

文字 LOGO 的設(shè)計經(jīng)常會采用優(yōu)質(zhì)的經(jīng)典字體作為基底，那么我們所熟悉的著名品牌會使用哪些經(jīng)典字體？這些字體本身又有哪些特質(zhì)，被這些品牌所選擇？而設(shè)計師在設(shè)計的時候，又是如何借用這些字體的特質(zhì)來凸顯品牌的特征？這回借用一個 LOGO 「逆向工程」設(shè)計項目，盤點8款經(jīng)典英文字體，以及一系列優(yōu)秀的 LOGO 設(shè)計范例。

雖然很多品牌LOGO 在設(shè)計的時候，會專門設(shè)計字體，但是實際上，很多品牌的 LOGO 其實是使用既有的字體來進行小幅度優(yōu)化來進行設(shè)計的。最近幾年，設(shè)計師 Emanuele Abrate 一直在關(guān)注一些著名的品牌 LOGO 背后的設(shè)計處理技巧，他開始借助這些字體背后原始的字體來進行「逆向工程」。

Abrate 的 Logofonts 項目就是這個「逆向工程」之后的結(jié)果?！府?dāng)一些你陌生的元素和你熟悉的元素結(jié)合到一起的時候，有趣的事情就會發(fā)生……所以我決定重新拆解這些大眾所熟悉的品牌，然后將文字部分替換成這個 LOGO 對應(yīng)的字體名稱」Abrate 的思路就是這樣來的。

其實，以這種方式來重新解構(gòu)這些令人熟悉的 LOGO 本身是一種非常有趣的嘗試，給人的體驗也頗為不同。但是回過頭來說，這也證明了一件事情：即使是那些你感覺很熟悉的字體，同樣可以借助一些并不復(fù)雜的方式，來制造出爆款設(shè)計，營造出令人過目不忘的獨特視覺體驗。

如果你使用 Instagram，那么你可以在上面關(guān)注一下這個 LogoFonts 項目。

在這些品牌 LOGO 的文本字體當(dāng)中，有很多大家非常非常熟悉的字體，它們在英文字體中的大眾認知程度，完全不亞于「微軟雅黑」在中文世界里的認知度。

Futura：字體不決，就用 Futura

Futura 字體的靈感來自包豪斯運動，繼承了包豪斯的設(shè)計理念，由設(shè)計師保羅倫納1924年至1926年所創(chuàng)建。Futura 不僅本身大獲成功，而且成功催生了新的幾何無襯線字體。

在國外的設(shè)計圈中，設(shè)計師私下經(jīng)常調(diào)侃，在設(shè)計的時候嘗試過很多不同的字體，最后總會用回 Futura ，于是有了「字體不決就用 Futura」的調(diào)侃。當(dāng)然，很品牌的 LOGO 設(shè)計是否幾經(jīng)修改重回 Futura 就很難說了，但是我還蠻認可這種說法的。

FedEx

Supreme

PayPal

Nike

Red Bull

Helvetica：最為經(jīng)典的現(xiàn)代非襯線字體

Helvetica是一種被廣泛使用的的西文字體，于1957年由瑞士字體設(shè)計師愛德華德·霍夫曼（Eduard Hoffmann）和馬克斯·米耶丁格（Max Miedinger）設(shè)計，體現(xiàn)了瑞士設(shè)計的理性主義精神，同時被認為是現(xiàn)代主義設(shè)計理念的典范。

很多現(xiàn)代都使用 Helvetica 字體來作為設(shè)計的基底，借助基礎(chǔ)的傾斜、色彩和裝飾，在它現(xiàn)代和整飭的設(shè)計基礎(chǔ)上，來營造獨特品牌視覺特征和氣質(zhì)。

Target

Energizer

Post-it

The North Face

CAT

Behance

Avenir：氣質(zhì)透明的中性字體

Avenir是由Adrian Frutiger設(shè)計的一款無襯線字體，最初于1988年由萊諾字體公司發(fā)布?！窤venir」在法語當(dāng)中是「未來」的意思，在某種意義上，它和 Futura 在精神內(nèi)核上有所呼應(yīng)。

和 Helvetica 一樣，Avenir 字體是為了「基本適合用在任何平面設(shè)計場合」的一種字體，同時，F(xiàn)rutiger 先生也認為，無襯線字體是不應(yīng)該有斜體的，所以他也僅僅只是為了商業(yè)需求，使用光學(xué)儀器制作了偽斜體的效果。

Avenir 這款字體整體呈現(xiàn)出一種中性、去性格化的特點，是一種氣質(zhì)「透明」的字體。

Linkedin

Toyota

Avant Garde：源自雜志的幾何標(biāo)準(zhǔn)字

我們常說的 Avant Garde 字體完整的名稱應(yīng)該是 ITC Avant Garde Gothic，它原本是 Avant Garde 雜志的 LOGO 字體，由 Herb Lubalin 所創(chuàng)建。

之后他與盧巴林設(shè)計公司的合伙人 Tom Carnase 一同努力，將這款字體完善成為一套完整的標(biāo)準(zhǔn)字體。

由于 Avant Garde 出色的幾何特征，很多品牌 LOGO 在設(shè)計的時候都考慮并采用了這款字體。

Adidas

New Balance

Durex

Gotham：可鹽可甜的人文主義字體

Gotham 是一款 2000 年的時候為 GQ 所設(shè)計，并于 2002 年向公眾開放的字體。它出現(xiàn)的地方很多，從可樂瓶、推特、Spotify、Netflix、Saks 到紐約大學(xué)、翠貝卡電影節(jié)，這還不止，包括《柯南秀》和《周六夜現(xiàn)場》在內(nèi)的電視劇、包括《盜夢空間》、《點球成金》、《可愛的骨頭》和《月光男孩》在內(nèi)的電影，都用到了這一字體。

關(guān)于這款字體的故事，可以看看這篇文章：

Gotham 原本的設(shè)計構(gòu)思中，是要呈現(xiàn)出一種「新鮮和陽剛」的氣息，不過真正投入使用的時候，才發(fā)現(xiàn)它的細體非常的具有女性的「優(yōu)雅感」。Gotham 在現(xiàn)代的品牌和 LOGO 設(shè)計中應(yīng)用廣泛，它兼顧了靈活和高級感，說是「可鹽可甜」一點錯都沒有。

TikTok

Spotify

Discovery

Univers：大氣而豐富的現(xiàn)代字體家族

Univers 字體和 Avenir 同樣出自設(shè)計師 Adrian Frutiger 之手，不過 Univers 是 Frutiger 的早期字體作品，它和 Helvetica 并稱為「瑞士風(fēng)格字體」，最初是作為一款照相排印字體所發(fā)布的。

Univers 字體的字重控制和其他的字體不同，是按照數(shù)字來進行區(qū)分的，到現(xiàn)在 Univers 字體族當(dāng)中所包含的變體已經(jīng)非常之多了，多達44種，不同寬度、粗細變化的衍生字體使得它作為 LOGO 字體非常方便。

Alibaba

ebay

Myriad：協(xié)調(diào)平衡的數(shù)字世代字體

正如同你從下圖看到的，Myriad 字體就是 Adobe 的LOGO 品牌用字，因為這款字體原本就是 Robert Slimbach 和 Carol Twombly 為 Adobe 定制的字體。不過，值得一提的是，Myriad 字體的基底是 Frutiger 字體——而 Frutiger 、Univers、Avenir 三款字體系出同門，都出自 Adrian Frutiger 之手。

和很多早期的非襯線體字體不同，Myriad 從一開始就是為了數(shù)字化而設(shè)計的，字體家族內(nèi)不同字重、樣式的變化是動態(tài)的，通過不同的字母寬度調(diào)解平衡，給人溫暖友好的感覺，而這一點也使得它在屏幕和印刷品上，顯得更加協(xié)調(diào)和自然。

Adobe

Visa

Walmart

Arial ：數(shù)字時代 Helvetica 的宿敵

其實 Arial 這款字體能走向世界，和微軟息息相關(guān)。這款 Monotype 出品的數(shù)字字體是隨著當(dāng)年的 Windows 3.1 操作系統(tǒng)和當(dāng)時的 Truetype 技術(shù)一同分發(fā)出來的，它的競爭對象則是最為經(jīng)典的 Helvetica 字體，而在視覺上，Arial 和 Helvetica 是非常相近的。

Monatype 在設(shè)計Arial 時，考慮到會在電腦上面使用，在字體及字距上都作了一些細微的調(diào)整和變動，以增加它在電腦屏幕上不同分辨率下的可讀性。

Skype

Pxxxhub

結(jié)語

其實經(jīng)典的字體有很多，你單獨看這些字體的時候可能會感到單調(diào)，但是Abrate 的 Logofonts 能夠幫你了解到這些經(jīng)典的英文字體是怎么應(yīng)用到 LOGO 當(dāng)中，讓你看到這些字體本身豐富的可能性和多變性格氣質(zhì)。我將一部分字體打包存到百度云當(dāng)中，供你學(xué)習(xí)研究。如果你需要在設(shè)計項目當(dāng)中使用，請購買正版授權(quán)。

文章來源：優(yōu)設(shè)    作者：陳子木

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

小程序開發(fā)現(xiàn)狀:

1. 開發(fā)工具不好使用(無法熱更新，編譯緩慢)；
2. 無法使用css預(yù)處理語言(Sass、Less)，有些IDE的插件可以監(jiān)聽編譯，但不同編輯器需要額外安裝；
3. 無法使用工程化(圖片自動壓縮，文件監(jiān)聽編譯等)；
4. 編碼繁瑣(創(chuàng)建一個頁面，需要新建4個文件(.wxml、.js、.json、.wxss),每次新建都需要新建4次或者復(fù)制文件比較浪費時間)；
5. 團隊多人協(xié)作，代碼風(fēng)格、使用的編輯器不一致；

技術(shù)選型：

在進行小程序項目啟動，進行技術(shù)選型的時候，對市場上多個小程序框架進行了考慮:

• uni-app、mpVue、wepy、taro、 kbone

團隊成員mpvue、wepy、uni-app都有實際的項目經(jīng)驗,且根據(jù)Github上的star數(shù)還有issue,最后決定回到到使用原生開發(fā)。

原因:

雖然框架有些很成熟，有工程化和跨端的解決方案，也有實際的上線項目，但考慮到后續(xù)一些支撐性的問題(維護，文檔，坑等)，在github上看了issue，有些已經(jīng)沒在維護了。

想著讓項目持續(xù)迭代，不受第三方框架限制，保持穩(wěn)健，最后決定使用原生，跟著官方的迭代升級，自己維護，引入前端工程化的思想，提高繁瑣的流程以及開發(fā)效率。

引入工程化

1. 基于Webpack4.x,自定義Webpack配置

   • scss編譯為wxss：定義全局變量,使用公共的樣式文件,提高css開發(fā)效率和可維護性；

   • 自動壓縮圖片資源 : 小程序?qū)Π笮∮邢拗?，壓縮圖片大小可以減少空間，加快頁面加載；普通的圖片壓縮需要將圖片上傳到在線圖片壓縮網(wǎng)站，壓縮完再保存下來，效率比較低。現(xiàn)在執(zhí)行命令就可以自動壓縮圖片。

2. 代碼規(guī)范

   • eslint: 能在js運行前就識別一些基礎(chǔ)的語法錯誤，減少不必要的小問題，提高調(diào)試效率；

   • husky、line-staged、prettier: 統(tǒng)一團隊代碼規(guī)范: 當(dāng)執(zhí)行代碼提交到git倉庫時，會將已改動文件的代碼格式化統(tǒng)一規(guī)范的代碼風(fēng)格;

1. 命令行創(chuàng)建頁面和組件模板

   • 小程序每次新建頁面或者組件，需要依賴4個文件(.wxml,.js,.wxss,.json)。只需要執(zhí)行npm run create命令，會提示選擇創(chuàng)建頁面還是組件，選擇完成輸入頁面或者組件的名字，會自動生成4個模板文件(.wxml,.js,json,.scss)到對應(yīng)的目錄

1. 引入jest單元測試

   • 生成測試覆蓋率

項目結(jié)構(gòu)

app -> 小程序程序的入口，使用微信開發(fā)者工具制定app目錄cli -> 生pages和components的模板腳手架img ->

 圖片資源原文件.eslintignore.eslintrc.js.gitignore(忽略wxss的提交，多人和做改動，容易有沖突，將scss文件傳到服務(wù)器就好了).prettierrc.js(代碼格式化風(fēng)格配置)babel.config.jsjest.config.js(單元測試配置文件)webpack.compress.js(指定入口圖片資源文件，將圖片壓縮編譯到小程序的資源目錄)webpack.config.js -> (工程化入口文件,指定入口scss文件，監(jiān)聽文件變化，自動將scss編譯為wxss)

項目使用的包文件

• webpack、babel、eslint: 轉(zhuǎn)換、規(guī)范js
• chalk: console.log打印彩色顏色
• scss、css-loader: 編譯scss
• figlet: 控制臺顯示字體樣式
• husky,line-staged,prettier: 代碼格式化相關(guān)
• jest、miniprogram-simulate: 單元測試

項目運行

. 安裝依賴    npm install 或 yarn install. 編譯scss   

 npm run dev. 壓縮圖片    npm run img. 單元測試    npm run test(生成測試報告)    npm run test:watch(監(jiān)聽測試文件改動—開發(fā)環(huán)境下使用)

示例

編譯scss

執(zhí)行 npm run dev

壓縮圖片

執(zhí)行 npm run img

將圖片壓縮到app/assets/img目錄下,一張7k的圖片變成5k，肉眼看不出有什么差別。

新建頁面

執(zhí)行 npm run create

終端會提示選擇頁面還是組件,選擇頁面,按Enter鍵，輸入頁面的名稱，會自動將4個文件創(chuàng)建到app/pages/xxx下。

新建組件

執(zhí)行 npm run create

終端會提示選擇頁面還是組件,選擇組件,按Enter鍵，輸入組件的名稱，會自動將4個文件創(chuàng)建到app/components/xxx下。

單元測試

執(zhí)行 npm run test 生成測試報告執(zhí)行 npm run test:watch 監(jiān)聽測試文件，方便開發(fā)使用

其他思考

工程化的初衷就是為了減少重復(fù)性的操作，提高編碼的效率和樂趣。

JavaScript是弱類型語言，好處是靈活，壞處是太靈活(多人協(xié)作，維護別人寫的代碼就是很痛苦了)。

項目最主要的是穩(wěn)健，可高度自定義拓展，不拘束于版本和地上那方，特別多人協(xié)作的團隊，工程化能給團隊帶來更多的收益，后續(xù)也會考慮將TypeScript等其他好的方案引入項目。

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

在經(jīng)典的尼爾森十大啟發(fā)式當(dāng)中，「系統(tǒng)狀態(tài)可見性」可以說是如今交互設(shè)計領(lǐng)域當(dāng)中，最為重要的原則之一。通過向用戶展現(xiàn)當(dāng)前的狀態(tài)，讓用戶擁有對系統(tǒng)的控制權(quán)，建立用戶對于產(chǎn)品的信任感，這也是這種設(shè)計啟發(fā)式的最重要的價值之一。

但是，想要做到可靠、易用，系統(tǒng)狀態(tài)展現(xiàn)的技巧是很講究的。這里梳理了4種最為常用的方法，結(jié)合了不少實用的案例，希望對你有所幫助。

1、展示用戶位置、進度的視覺反饋

1.1、讓用戶知道自己在哪

沒有人會喜歡迷失方向，但是無論在現(xiàn)實生活還是在數(shù)字領(lǐng)域當(dāng)中，這種情況都會發(fā)生。讓用戶知道他們在哪里是創(chuàng)建良好導(dǎo)航體驗的關(guān)鍵。應(yīng)用程序和網(wǎng)站都應(yīng)該凸顯當(dāng)前的導(dǎo)航選項，幫助用戶了解他們所在的位置。

Google 的底部導(dǎo)航欄設(shè)計

1.2、要經(jīng)過多少步驟來完成任務(wù)

這也是一個非?；镜牟僮?，通過展現(xiàn)步驟數(shù)量，幫助用戶來預(yù)估完成這個過程所需要的時間。

Selecto 的調(diào)查問卷的設(shè)計

2、輔助用戶交互的視覺反饋

數(shù)字界面畢竟不是現(xiàn)實世界中的真實硬件機構(gòu)，用戶更多只能借助交互過程中的即時視覺反饋來確定是否完成了操作，即時的視覺反饋因此顯得非常重要。

即時的視覺反饋讓用戶的操作得到了視覺上的「認可」，從而強化了「確信感」，這樣一來一回的確認可以避免錯誤的發(fā)生，比如可以避免用戶因為「感覺沒有點下去」而反復(fù)點擊。

這種視覺反饋的設(shè)計，最常見的范例就是點擊按鈕按下的微交互動畫，它告知用戶「系統(tǒng)已經(jīng)捕捉到點擊交互了」。

AliAli 所設(shè)計的懸停點擊動畫

但是在某些狀況下，按鈕的視覺反饋還有很多不同的呈現(xiàn)形式，有更多可見的、可理解的新形態(tài)，可以在原有的基礎(chǔ)上探索更多可能性，比如下面的

2.1、單擊點贊按鈕

Spread love, not viruses ，作者  Charles Patterson

2.2、開關(guān)按鈕

這個開關(guān)按鈕不僅有點擊動效，而且色彩和按鈕標(biāo)識也隨之改變，更為清晰地表明狀態(tài)，甚至兼顧到了視覺障礙用戶

Switcher XLIV , 作者 Oleg Frolov

2.3、書簽按鈕微交互

這個書簽按鈕通過色彩的虛實變化來呈現(xiàn)書簽已添加的狀態(tài)，頗為巧妙。

Bookmark interaction，作者 Oleg Frolov

2.4、添加購物車微交互

在這種情況下，視覺反饋非常明確且優(yōu)雅地告知用戶已經(jīng)添加到購物車里面了。

咖啡下單動效，作者 Nhat M. Tran

3、呈現(xiàn)系統(tǒng)狀態(tài)的視覺反饋

3.1、系統(tǒng)正忙于什么事情

當(dāng)系統(tǒng)正在加載，正在執(zhí)行，正在運行的過程中，通過動效來告知用戶系統(tǒng)并沒有停止，而是正忙于執(zhí)行某件事情，是避免用戶誤解的手段。在用戶等待的過程中，通常會實用無限加載的動效（一般使用在低于10s的操作中）：

對于超過10s的更長的執(zhí)行過程，無限加載的動效會顯得令人沮喪，這個時候?qū)嵱眠M度條會更好：

這些視覺反饋很大程度上降低了系統(tǒng)給人的不確定感。

對于移動端應(yīng)用，在初始加載階段所使用的啟動動畫界面，是否精心設(shè)計，決定了用戶對于整個產(chǎn)品的第一印象，優(yōu)秀的初始加載動畫能夠?qū)⒂脩舻淖⒁饬慕乖甑牡却薪夥懦鰜怼?

Logo 閃屏 ，作者 Gleb Kuznetsov?

3.2、內(nèi)容加載

當(dāng)用戶需要時間來加載內(nèi)容的時候，建議使用一種特殊的的容器「界面骨架」來展現(xiàn)。這種臨時的內(nèi)容容器不僅能夠幫助用戶快速地了解界面的整體框架，構(gòu)建用戶預(yù)期，并且能夠在后臺快速地加載數(shù)據(jù)，漸進式地幫用戶獲得信息。

內(nèi)容加載，作者 Ginny Wood

這種設(shè)計方式對于移動端和桌面端的設(shè)計同樣適用：

界面骨架加載動效，作者 Shane Doyle

4、觸發(fā)事件

4.1、通知和提醒

有效的通知和提醒，能幫用戶意識到有新的事情正在發(fā)生。在多數(shù)時候，我們建議設(shè)計師使用微妙的動畫來進行通知，因為動畫效果會自然地吸引用戶的注意力，人類的雙眼的動態(tài)視覺其實是非常強的。

Aleksei Kipin 設(shè)計的通知動效

4.2、提示用戶采取行動

在很多情況下，用戶界面中會有很多地方會需要用戶提交信息。比如，需要用戶提交表單，或者用戶創(chuàng)建了一個密碼，但是在復(fù)雜度上不足需要修正，或者填寫郵箱來訂閱信息的時候，郵箱格式出錯，等等。使用適當(dāng)?shù)囊曈X反饋總能夠更加有效地將問題告知用戶。

內(nèi)聯(lián)郵箱驗證機制，作者 Derek Reynolds

結(jié)語

讓用戶有掌控感，就是為用戶創(chuàng)造更好的體驗。在很多設(shè)計方案中，視覺反饋會因為種種原因被削弱了，甚至被忽略了。但是當(dāng)用戶在和 UI 進行交互的時候，期望度和可動性其實是高度依賴于這些動效和微交互，而這正是設(shè)計師需要設(shè)計出優(yōu)秀視覺反饋效果的原因所在。

文章來源：優(yōu)設(shè)     作者：Nick Babich

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

隨著大眾消費生活多元化和個性化的發(fā)展，卡通形象在當(dāng)下社會的影響力變得越來越重要，它們活躍在各個文化領(lǐng)域中，特別是在商業(yè)中應(yīng)用也越來越頻繁。

在信息爆炸時代，大多數(shù)人對過量的文字信息容易產(chǎn)生排斥的心理，并漸漸樂于接受視覺圖像形式的表達；而卡通形象由于其本身簡潔的視覺形象，也成為了最理想的視覺傳播符號之一。

本期分享會先從比較知名的幾個卡通形象切入，然后分享過去幾年我自己創(chuàng)作過的一些形象，希望對正在設(shè)計卡通形象或自己想創(chuàng)作形象的朋友有些許幫助。

先羅列幾個比較有名的卡通形象

卡通形象一般分為具象動物類型和抽象類型兩個方向。一提起動物類比較有名氣的卡通形象（比如熊這種動物），你大概會先想到熊本熊、布朗熊、泰迪熊，還有韓國的倒霉熊……兔子類的就是兔斯基、找死兔、可妮兔、流氓兔，還有很早的兔八哥……太多太多。

熊本熊的特征比較明顯，一身黑色加上兩個紅腮點，顏色上本身就給人很潮很時尚的感覺，體型略寬厚偏呆萌。很多女生會覺得它給人一種安全感，我的印象里它一直都是很憨厚的面癱造型出現(xiàn)，特別是出現(xiàn)在GIF動圖里大量真人穿著它的道具摔倒的畫面（有了“智障熊”這個外號）比較搞笑，有點愣頭愣腦。

所以設(shè)計造型上除了能讓粉絲記住的特征外，更多的是對于它的性格打造成，給人總愛賣萌的印象。

流氓兔（MASHIMARO）是一只瞇著眼的韓國兔子，隨著無厘頭文化的興起，流氓兔調(diào)皮又帶戲謔的個性通過原創(chuàng)者創(chuàng)作的網(wǎng)絡(luò)動畫形式呈現(xiàn)，其FLASH動畫在亞洲乃至全球掀起不小的風(fēng)潮。

還有監(jiān)獄兔、兔斯基、兔八哥…這些耳熟能詳?shù)男蜗?，這里不一一列舉了。

以具象動物創(chuàng)作卡通形象既簡單又挺難的，為什么簡單？因為不用你去較勁腦汁再重新創(chuàng)造一個新的形象，具象動物（比如熊）就是那個樣子。那為什么又很難？具象動物卡通形象太多了，不管你怎么去變著法兒努力畫的不一樣，但最后的效果可能還是會雷同，況且知名的具象動物IP形象又很多，所以不容易創(chuàng)作。

如何創(chuàng)作一個有特征的卡通形象

那么，今天主要是聊一聊我之前創(chuàng)作過的卡通形象當(dāng)中的心得體會和一些過程稿。第一個例子是在創(chuàng)作浪小花時候，主要從微博品牌標(biāo)志找切入點，提取LOGO的主要特征（就是圖形頭上的三個波浪，如下圖），這也是比較能體現(xiàn)卡通形象與品牌之間關(guān)系的地方。

前期草圖探索是比較漫長和煎熬的，（下圖）這些是其中的一部分比較靠譜的草圖，盡管只是三個波，但做了很多種不同的變化。比如可以像個公雞冠一樣長在頭上，也可以帽子形式戴在頭頂上，還可以長在后背上。

在創(chuàng)作形象時是先從PC端的動態(tài)表情（下圖22px大?。╅_始的，也就是先從主要使用場景著手，所以做出來的表情利用好有限的展示活動區(qū)域，頭身比例控制好，既要考慮形象的完整性，又要考慮動作展示能夠看得最清楚，還要能突出這個不一樣的品牌特征（腦袋上那三個波），這也是一個非常具有挑戰(zhàn)性的案例。

到了手機移動端里，表情基本上是把PC上的表情一部分移植過去，不改變比例和動作情況下，盡可能豐富設(shè)計的細節(jié)。

這里要提的是形象顏色的選擇，考慮要最貼近用戶，不用微博那么重的紅色，由于表情是最開始是用在PC網(wǎng)頁版微博文字里，顏色太重就會看來視覺比較突兀，所以選了一個跟人的膚色很近的肉粉色（有點像小嬰兒），這樣表情用起來就比較具有親和感。

而在設(shè)計微小米的時候選用了LOGO本身的顏色大紅色，由于使用場景是手機端聊天對話里（下圖），感覺不會那么影響閱讀（其實我個人很喜歡這個紅色，給人很喜慶的感覺）。

（下圖）在確定這個形象之前的一些探索草圖這里也發(fā)出來，而且這一次創(chuàng)作了三個形象，包括一個白胖子和一只小雞，（有參考了Line的形象）希望能出一個小家族，這樣后期延展運用也能玩起來。

在創(chuàng)作這個形象前，嘗試了很多不同的形象（上圖），最后采用了這個大紅口袋娃娃：臉和身子是連在一起的，也看不到脖子，所以這個形象的特點也就在這里。另外，頭上加了一個小揪兒。

（上圖）這個是優(yōu)化前的樣子（頭上是圓圓的揪兒），為了制作動態(tài)GIF時，讓頭上的小揪兒動起來更帶感，就改成了（下圖）這個樣子，跳起來可以一甩一甩的。

在進行卡通形象提案之前，如果能花點心思做一個小小的場景（下圖）也能給自己的方案加分。

每個形象都嘗試一些動作變化，這樣它們各自的性格就很容易把握了。比如，我會覺得（下圖）紅框那個表情延伸感覺很猥瑣，不太適合這個形象，所以后面的表情延展盡量讓微小米表現(xiàn)得更萌一些，避開這種很猥瑣的感覺。(當(dāng)然這些說起來都比較偏個人感受，只有作者自己可以體會到）

把這幾個形象性格先摸透很有必要（來一張定妝的全家福）。

我個人比較滿意（下圖）這一組系列的扁平化風(fēng)格，沒有描線的感覺確實更輕快，偏小清新。

下面是幾組自己平時的創(chuàng)作，也是利用業(yè)余時間創(chuàng)作的幾個形象，我會思考如何抓取每一個形象不一樣的特征？于是，這些特征可能是發(fā)型的變化，可能是眼睛的變化，也可能是衣著的變化……

這些不一樣的變化都是讓這個形象看起來與眾不同，讓人先記住它，但最打動人的還是這個形象能否跟看到它的人產(chǎn)生互動和共鳴……這也是這個形象的靈魂和存在的意義。

這一個形象的創(chuàng)意點是借用大家都熟知的“小紅帽”這個經(jīng)典童話造型，讓這個小人長著胡子，名字和形象就會形成一個心理和視覺的反差。

將自戀、貪吃、自大、邋遢……這些小人物的缺點賦予這個形象，這樣一個活脫脫的“小屌絲”的形象可能就會給人很深的記憶。

畢竟生活中大部分人都有著這樣那樣的缺點，但都希望擺脫囧態(tài)，讓自己變好的那分勵志感。

我很喜歡畫一些丑乖的東西，現(xiàn)在大家都審美疲勞了，可愛的東西都乏味了，反而更喜歡一些丑的可愛的形象。那么給這些形象加個厚嘴唇、小胡子什么的，反而很容易出效果。

好了，寫到這里……下面的圖大家自己發(fā)現(xiàn)亮點，自己感受腦補吧……總之，創(chuàng)作形象時還是要抓住大眾的心理軟肋，先打動自己再去感染別人。

在畫卡通形象時候，我們往往很容易陷入兩個難以跳出的區(qū)域：一個是容易畫得偏低幼、低齡化；另一個就是表情動作偏呆板國企風(fēng)。這是受我們從小周圍接收的圖像信息影響的，在還沒有將練習(xí)探索的草圖量形成一個質(zhì)的提升之前，先有這種意識也很重要，這種意識會幫助你在以后摸索練習(xí)的時候注意到形象的頭身比例，以及思路慣性的打破。

歡迎對品牌、插畫和卡通形象感興趣的朋友可以一起討論、練習(xí)。

文章來源：我們的設(shè)計日記（ID：helloskys）

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

很多朋友面對AE表達式望而生畏，不過再難的東西都會有它最本質(zhì)的規(guī)則，如果你理解了基本的原理和常用的表達式命令，這也許會提高你的工作效率。我通過自己對AE表達式的理解，嘗試用最簡單的語言解釋一些看似復(fù)雜的操作，如果此篇文章能給你帶來一些啟發(fā)，不勝榮幸~

首先什么是表達式呢？

表達式就是AE內(nèi)部基于JS編程語言開發(fā)的編輯工具，可以理解為簡單的編程，不過沒有編程那么復(fù)雜。其次表達式只能添加在可以編輯的關(guān)建幀的屬性上，不可以添加在其他地方；表達式的使用根據(jù)實際情況來決定，如果關(guān)鍵幀可以更好的實現(xiàn)你想要的效果，使用關(guān)鍵幀就可以啦，表達式大部分情況下是可以更節(jié)約時間，提高工作效率的。

接下來看一下如何添加表達式

表達式工具

A.表達式開關(guān) B.表達式圖表 C.表達式關(guān)聯(lián)器 D.表達式語言菜單

由于AE里不同的屬性的參數(shù)不同，常用的我們可以分為：數(shù)值（旋轉(zhuǎn)/不透明度）、數(shù)組（位置/縮放）、布爾值（true代表真、false代表假/0代表假、1代表真）這三種形式來進行書寫表達式。對于表達式AE也有很多內(nèi)置的函數(shù)命令，直接可以在表達式語言菜單里面進行調(diào)用。

接下來一起看看常用的表達式有哪些吧！

1. time表達式

原理:

time表示時間，以秒為單位，time*n =時間（秒數(shù)）*n （若應(yīng)用于旋轉(zhuǎn)屬性，則n表示角度）

舉例:

若在旋轉(zhuǎn)屬性上設(shè)置time表達式為time*60，則圖層將通過1秒的時間旋轉(zhuǎn)60度，2秒時旋轉(zhuǎn)到120度以此類推（數(shù)值為正數(shù)時順時針旋轉(zhuǎn)，為負數(shù)時逆時針旋轉(zhuǎn)）

注意事項:

time只能賦予一維屬性的數(shù)據(jù)。(位置屬性可進行單獨尺寸的分離，從而可單獨設(shè)置X或Y上的time)

2. 抖動/擺動表達式

wiggle(freq, amp, octaves = 1, amp_mult = 0.5, t = time)

原理:

freq=頻率（設(shè)置每秒抖動的頻率）；amp=振幅（每次抖動的幅度）；octaves=振幅幅度（在每次振幅的基礎(chǔ)上還會進行一定的震幅幅度，很少用）；amp_mult=頻率倍頻（默認數(shù)值即可，數(shù)值越接近0，細節(jié)越少；越接近1，細節(jié)越多）；t=持續(xù)時間（抖動時間為合成時間，一般無需修改）；一般只寫前兩個數(shù)值即可

舉例:

若在一維屬性中，為位置屬性添加wiggle(10,20)，則表示圖層每秒抖動10次，每次隨機波動的幅度為20；若在二維屬性中，為縮放添加n=wiggle(1,10);[n[0],n[0]]，則表示圖層的縮放XY在每秒抖動10次，每次隨機波動的幅度為20；若在二維屬性中，想單獨在單維度進行抖動，需要將屬性設(shè)置為單獨尺寸后添加wiggle(10,20)，表示圖層的縮放X軸在每秒抖動10次，每次隨機波動的幅度為20。

注意事項:

可直接在現(xiàn)有屬性上運行，包括任何關(guān)鍵幀

3. index表達式（索引表達式）

原理:

為每間隔多少數(shù)值來產(chǎn)生多少變化

舉例:

若為圖層1的旋轉(zhuǎn)屬性添加表達式index*5 ，則第一個圖層會旋轉(zhuǎn)5度，之后按Ctrl+D去復(fù)制多個圖層時，第2個圖層將旋轉(zhuǎn)10度，以此類推；若想第一層圖形不產(chǎn)生旋轉(zhuǎn)保持正常形態(tài)，復(fù)制后的圖形以5度遞增，表達式可寫為(index-1)*5

4. value表達式

原理:

在當(dāng)前時間輸出當(dāng)前屬性值

舉例:

若對位置屬性添加表達式為value+100，則位置會在關(guān)鍵幀數(shù)值的基礎(chǔ)上對X軸向右偏移100（正數(shù)向右側(cè)，負數(shù)像左側(cè)）；若想控制Y軸的位置屬性，則可對位置屬性進行單獨尺寸的分割，從而可單獨控制Y軸（正數(shù)向下，負數(shù)向上）

注意事項:

更多的使用場景是結(jié)合其他表達式一起應(yīng)用

5. random表達式（隨機表達式）

原理:

random(x,y)在數(shù)值x到y(tǒng)之間隨機進行抽取，最小值為x，最大值為y

舉例:

若為數(shù)字源文本添加表達式random(20)，則數(shù)據(jù)會隨機改變，最大值不會超過20；

若為數(shù)字源文本添加表達式random(10,100)，則數(shù)據(jù)會在10<數(shù)值<100之間隨機改變； 若為數(shù)字源文本添加表達式seedRandom(5, timeless = false)，random(50)，則數(shù)據(jù)會在50以內(nèi)隨機改變（前面的5是種子數(shù)，如一張畫面中需要多個相同區(qū)間的數(shù)值做隨機變化，就要為他們添加不同的種子數(shù)，防止兩者隨機變化雷同）,若希望數(shù)字隨機變化為整數(shù)則應(yīng)添加表達式為Math.round(random(2,50))，表示在2和50之間隨機改變無小數(shù)

注意事項:

隨機表達式不僅局限于數(shù)據(jù)上的使用，其他屬性也可以應(yīng)用，若數(shù)值為整數(shù)Math的M要大寫

6. loopOut表達式（循環(huán)表達式）

原理:

• loopOut(type=”類型”,numkeyframes=0)對一組動作進行循環(huán)
• loopOut(type=”pingpong”,numkeyframes=0)是類似像乒乓球一樣的來回循環(huán)；
• loopOut(type=”cycle”,numkeyframes=0)是周而復(fù)始的循環(huán)；
• loopOut(type=”continue”)延續(xù)屬性變化的最后速度，
• loopOut(type=”offset”,numkeyframes=0)是重復(fù)指定的時間段進行循環(huán)；
• numkeyframes=0是循環(huán)的次數(shù)，0為無限循環(huán)，1是最后兩個關(guān)鍵幀無限循環(huán)，2是最后三個關(guān)鍵幀無限循環(huán)，

以此類推

舉例:

如下圖gif

7. timeRemap表達式（抽幀）

原理:

timeRemap*n，n以幀為單位

舉例:

將圖層設(shè)置為timeRemap*10，代表每隔10幀就抽掉1幀畫面，(根據(jù)要抽取的速率決定)

注意事項:

使用timeRemap表達式之前要啟用時間重映射，否則無法使用此表達式

8. linear表達式（線性表達式）

原理:

• linear(t, tMin, tMax, value1, value2)表示linear(time, 開始變化的時間, 結(jié)束變化的時間, 開始變化時的數(shù)值, 結(jié)束變化的數(shù)值);
• linear(t, value1, value2)表示當(dāng)time在0到1之間時，從value1變化到value2；
• ease(t, tMin, tMax, value1, value2)的含義與linear一樣， 區(qū)別是在tMin和tMax點處，進行緩入緩出，使數(shù)據(jù)更加平滑；
• easeIn(t, tMin, tMax, value1, value2)與linear的含義一樣， 區(qū)別是在tMin處，進行緩入，使數(shù)據(jù)更加平滑；
• easeOut(t, tMin, tMax, value1, value2)與linear的含義一樣， 區(qū)別是在tMax點處，進行緩出，使數(shù)據(jù)更加平滑

舉例:

見下圖均以(time,0,3,131,1000)為例，若為數(shù)字的源文本屬性添加此表達式可以制作出倒計時的效果n=linear(time, 0, 3, 3, 0)表示從0-3秒數(shù)字從3到0，希望數(shù)字為整體需添加Math.floor(）

注意事項:

倒計時的用法比較常用，整數(shù)M要大寫

9. Other Math（角度弧度）

原理:

degreesToRadians(degrees) 角度轉(zhuǎn)為弧度（degrees度的變量或表達式）radiansToDegrees(radians)弧度轉(zhuǎn)為角度（radians弧度的變量或表達式）

舉例:

常用語數(shù)學(xué)中的一些計算sin，cos，tan，sec，csc，cot等

10. layer表達式

原理:

layer(index)中index 是數(shù)值，按照編號檢索圖層；layer(name)中name 是一個字符串，按照名稱檢索圖層（若沒有圖層名稱，則根據(jù)源名稱）；layer(otherLayer, relIndex)中otherLayer 表示圖層對象，relIndex 表示數(shù)值，檢索屬于圖層對象的數(shù)值圖層

舉例:

• layer(index)—thisComp.layer(1).position；
• layer(name)—thisComp.layer(“形狀圖層1”)；
• layer(otherLayer, relIndex)—thisComp.layer(thisLayer, 1).active 將返回 true

11. marker表達式

原理:

marker.key(index)中index 是數(shù)值；marker.key(name)中name 是一個字符串

舉例:

thisComp.marker.key(1).time表示返回第一個合成標(biāo)記的時間;thisComp.marker.key(“我叫注釋名稱”).time表示返回具有名稱”我叫注釋名稱”的合成標(biāo)記的時間

12. comp(合成屬性和方法)width與height表達式

原理:

width表示返回合成寬度；height表示返回合成高度

舉例:

[thisComp.width/2, thisComp.height/2]表示寬度和高度為合成的一半也就是居中的位置

13. param表達式

原理:

param(name)中name表示字符串；param(index)表示數(shù)值

舉例:

effect(“高斯模糊”).param(“模糊度”)效果控制點始終位于圖層空間中

14. 彈性表達式

原理:

復(fù)制粘貼表達式使用就可以，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腳本也帶此功能，方法不唯一

15. 反彈表達式

原理:

k表示反彈最終結(jié)果，a表示反彈阻力，b表示反彈變化時間

舉例:

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ù)值即可）

16. 數(shù)字遞增表達式

原理:

StartNumber表示開始時的數(shù)值，EndNumber表示結(jié)束時的數(shù)值，StartTime表示開始的時間，EndTime表示結(jié)束的時間，和前面的linear表達式相對應(yīng)

舉例:

StartNumber=1;

EndNumber=20;

StartTime=0;

EndTime=3;

t=linear(time,StartTime,EndTime,StartNumber,EndNumber);Math.floor(t)

17. 擠壓與伸展

原理:

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]

18. 運動拖尾

原理:

delay表示要延遲的幀數(shù)

舉例:

為位置屬性添加表達式delay = 0.5;

d = delay*thisComp.frameDuration*(index – 1);

thisComp.layer(1).position.valueAtTime(time – d)；

如想要實現(xiàn)不透明度拖尾需為不透明度屬性添加表達式opacityFactor =.80;

Math.pow(opacityFactor,index – 1)*100(調(diào)整好一個圖層后復(fù)制多個)

文章來源：優(yōu)設(shè)    作者：凌旬 

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

如果要設(shè)計產(chǎn)品或開發(fā)界面，我們通常會需要風(fēng)格相同的圖標(biāo)，若無法自行繪制或不希望付費購買也有很多替代方案，本文要推薦的「Basicons」是一款基礎(chǔ)、簡單的圖標(biāo)設(shè)計，可用于產(chǎn)品開發(fā)設(shè)計，這套圖標(biāo)一共收錄186種圖案，同時提供.svg向量圖格式可一次打包下載，利用Basicons界面快速預(yù)覽圖標(biāo)，也能切換不同尺寸下的呈現(xiàn)樣式，包括12px、16px、24px和32px四種大小和1px、1.5px和2px筆觸粗細，可以快速下載圖標(biāo)圖案或取得源碼。

Basicons也有一個內(nèi)嵌（Embed）語法產(chǎn)生器，能產(chǎn)生帶入圖標(biāo)圖案的JavaScript語法和HTML程式碼，如果要獲得更好的效能，建議直接從網(wǎng)站一次下載所有圖標(biāo)，再依照需求使用即可。這套圖標(biāo)集以MIT授權(quán)方式釋出。（即可以免費使用、修改、出售，附上協(xié)議即可）

Basicons

網(wǎng)站鏈接：https://basicons.xyz/

使用教學(xué)

STEP 1

開啟Basicons 從首頁就能預(yù)覽完整圖標(biāo)圖案，這套圖標(biāo)特色是以非常精簡、干凈的線條繪制而成的圖形，每個圖案下方會有名稱，應(yīng)該能夠很快速聯(lián)想到圖標(biāo)代表的意思（否則就失去圖標(biāo)的意義…），可以稍微預(yù)覽一下看看自己需要的圖案有沒有列在上面，依照說明，Basicons 每周都會更新加入新的圖案。

STEP 2

從右側(cè)的「Customize」自訂選項可以調(diào)整圖標(biāo)尺寸、線條粗細，調(diào)整后會直接呈現(xiàn)于左側(cè)。

STEP 3

點選要下載的圖標(biāo)后再按下右側(cè)的「Download」就能下載.svg圖標(biāo)格式（或是從上方點選Download All將所有186個圖標(biāo)完整下載），如果想直接取用SVG原始碼的話可點選「Copy SVG」復(fù)制程式碼。

除此之外，Basicons 還有提供直接嵌入的JavaScript 鏈結(jié)和原始碼。

值得一試的三個理由：

1. 簡單的免費圖標(biāo)集，收錄186 種圖標(biāo)圖案供免費下載使用
2. 可一次打包下載完整svg 格式圖標(biāo)，或單獨復(fù)制產(chǎn)生svg 源碼
3. 線上調(diào)整預(yù)覽不同的尺寸大小、筆觸粗細效果

文章來源：優(yōu)設(shè)    作者：Pseric

藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

模塊化 export 和 import

import 導(dǎo)入模塊、export 導(dǎo)出模塊
可以直接在任何變量或者函數(shù)前面加上一個 export 關(guān)鍵字，就可以將它導(dǎo)出。
在一個文件中：

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)出的書寫方式(一個個的導(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了，引入的時候直接用，若沒有用default，引入的時候可以用{}的形式 // 導(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是別名，使用的時候只能用別名，特別注意下 }; //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)點，import無需知道變量名，就可以直接使用，如下 // 每個模塊只允許一個默認出口 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()); // 

手機UI中的交互是保持產(chǎn)品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。

手機UI中的交互是保持產(chǎn)品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。這里為大家整理了一些優(yōu)秀并富有創(chuàng)意的交互作品，為你的產(chǎn)品設(shè)計注入靈感。

--手機appUI設(shè)計--

 藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

  更多精彩文章：

       手機appUI界面設(shè)計賞析（一）

       手機appUI界面設(shè)計賞析（二）

       手機appUI界面設(shè)計賞析（三）

       手機appUI界面設(shè)計賞析（四）

       手機appUI界面設(shè)計賞析（五）

       手機appUI界面設(shè)計賞析（六）

       手機appUI界面設(shè)計賞析（七）

       手機appUI界面設(shè)計賞析（八）