<strong id="jzqzp"><pre id="jzqzp"><xmp id="jzqzp"></xmp></pre></strong>
<tt id="jzqzp"><span id="jzqzp"><blockquote id="jzqzp"></blockquote></span></tt>

          首頁

          如何從零開始設計一個購物網站?送你這份高手流程!

          周周

          在這個項目中,主要任務是為舊金山最古老的玩具品牌 Jeffrey’s Toys 設計一個全新的品牌電商網站。

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

          該網站需要鞏固品牌核心業務價值觀:傳統,有趣和創意。該網站還需要通過強調其龐大的庫存體量和手工精選商品來將 Jeffrey’s Toys 和其他電子商務零售商區分開。

          該網站的主要業務目標包括:

          • 能快速定位商品

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

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

          • 為爆款商品引流

          用戶分析

          1. 用戶畫像

          誰才是這個網站真正的用戶?當我接到這個任務的時候,客戶已經繪制出了3個用戶畫像,每個用戶畫像都有特定的需求和痛點。

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

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

          確定的主要需求是:

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

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

          • 通過實用的商品推薦來體現 Jeffrey’s Toys 的專業以及龐大的庫存

          • 通過與用戶建立品牌關系來樹立信任

          • 通過產品細節信息來確保用戶選購合適的商品

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

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

          2. 競品分析

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

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

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

          2. 思維導圖

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

          △ 用來理清信息和想法的思維導圖

          信息架構

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

          1. 卡片分類

          △ 卡片分類的初期階段

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

          封閉式卡片分類:基于開放式卡片分類的結果,我從最常見的類別標簽中創建了13個預定類別。然后,我進行了封閉式的卡片分類,我邀請了20位參與調研的用戶將商品逐一分類到我之前預定的13種類別中。封閉式卡片分類有助于讓我在進行設計之前能夠清楚判斷這些類別是否符合大部分網站用戶的分類邏輯。

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

          2. 站點圖

          根據卡片分類以及競品分析的結果,我繪制了網站的站點圖來明確整個網站的框架結構。這是為了確保所有產品都放置在用戶期望的位置,同時使購物體驗更加直觀。

          △ 站點地圖

          3. 系統架構圖

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

          △ 系統架構圖演示用戶將會如何瀏覽網站

          4. 用戶流程

          在確定了我需要給用戶提供的體驗「全局」之后,我為每一個用戶畫像創建了不同的用戶流程,通過不同的用戶流程來使購物體驗更加符合他們的需求。構建用戶流程的目的是確定每個用戶為了實現各自的預期目標經過的頁面和操作步驟。這不僅能使我專注于每個用戶的操作,也使我能夠在設計網站的時候將功能拆分,以便給用戶提供更佳的購物體驗。

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

          △ Jenny 的用戶流程

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

          △ Debbie 的用戶流程

          開發階段

          1. 草稿

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

          △ 網站首頁和品類頁面的初稿

          2. 線框圖

          基于用戶對草圖的反饋和我個人的想法,我開始使用Figma來繪制線框圖。整個過程中,根據優先級不同,優先考慮最能滿足網站用戶的功能。

          △ 網站首頁和產品詳情頁的線框圖

          原型制作

          1. 主頁

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

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

          2. 商品類別頁面

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

          △ 商品類別頁線框圖

          3. 商品詳情頁

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

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

          △ 商品詳情頁線框圖

          4. 購物車預覽頁

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

          △ 購物車預覽頁線框圖

          5. 結帳頁面

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

          △ 登錄頁

          △ 下單頁

          △ 訂單查看頁

          6. 其他畫面

          我還創建了一些其他頁面,例如訂單確認頁面。訂單確認頁面明確告知用戶結賬流程已經完成了,用戶還能在訂單確認頁查看有關訂單的其他信息,以供參考。

          我創建了一個店鋪聯系頁面,當用戶在網站找不到想要的商品時,可以在店鋪聯系頁面查詢線下店鋪商品情況以及店鋪的營業時間、位置和聯系電話。

          除此之外我還創建了一個「關于頁面」用來著重強調 Jeffrey’s Toys 與其他電商網站例如亞馬遜的區別。我還在這個頁面介紹了Jeffrey’s Toys 長達60年的獨特歷史,以增強用戶對于品牌傳統、有趣和創意的商業價值的印象。

          △ 訂單確認頁

          △ 聯系方式頁

          △ 公司介紹頁

          7. 可用性測試

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

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

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

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

          • 當您在網站上沒有找到您想要的玩具時,您將如何查詢并購買。

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

          • 總體而言,用戶能夠輕松地找到想要的產品和信息

          • 在結賬流程中,促銷活動部分會分散用戶的注意力

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

          • 部分用戶覺得前往線下店鋪的引導部分還可以增強,目前的引導不夠。

          △ 可用性測試得到的反饋

          8. 后續步驟

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

          △ 首頁

          △ 商品分類頁

          △ 商品詳情頁

          編輯總結

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

          藍藍設計www.bjlmtradeweb.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          圖形的設計妙用

          雪濤

          容易被忽視的圖形,不僅能傳達不同的情緒,也能提升視設計的品質感。

          本文節選自德國紅點獲獎設計師大凡的分享,主要包括三個部分:

          1 圖形是什么

          2 好的圖形設計長什么樣

          3 圖形設計創意思路分享


          1 圖形有多樣化的表達方式

          提到圖形設計,你腦海中對應到的第一個畫面是什么?我們打開了某搜索器,檢索了「圖形」二字,這里的圖形多集中于「幾何圖形、標志、矢量圖形、圖標」。

          我們又搜集了一些不錯的設計網站,搜索「圖形設計」或「graphic design」,它的表現形式與應用范圍都擴大了,海報、信息、插圖、包裝、圖標、字體、攝影、標志、品牌,無所不在。

          如果給圖形下個定義,它主要指二維空間中可以用輪廓劃分出的空間形狀,設計中無處不在的表現手法。它與色彩、版式、字體等一樣,在設計師的知識體系中處于相對重要的位置,但往往容易被忽視。


          在優秀的設計作品中,圖形可以作為主體、符號、輔助、信息等不同角色出現在設計的各個應用場景中,可以通過抽象的、具象的、平面的、空間的多樣化表達手法,傳達出不同風格的視覺表現力。


          2 好的圖形設計長這樣

          那么,好的圖形是什么樣的?我們可以從3個維度去感受好的圖形設計作品:抽象、創意風格。


          ① 圖形的抽象性

          抽象是對日常事物的提煉與概括,我們先來感受一下下面兩組建筑,某搜索器中的「最丑建筑」和「知名建筑」之間的對比??梢院苤庇^的感受到,抽象的圖形與色彩可以傳遞更加豐富的情感。

          對企業來說,溝通成本代表的就是金錢,而一個抽象的符號就能巧妙地為企業節省了很多說話的時間。

          我們可以看這個案例,1個點產生了多少可能性?這是美國一家大型連鎖超市的logo,以這個點為原型,衍生出了各種解鎖生活方式的海報。簡單的點,發散出各種生活方式,一看就能夠知道超市供應的各種商品。

           


           圖形的創意性

          設計的創意體現在哪兒呢?我們先看看那些腦洞大開的大師們是如何使用圖形的。

          第一位是福田繁雄大師,在他的年代沒有人用這樣的圖形方式做設計,炮彈朝向炮筒里面,一張非常簡潔的反戰海報。他也特別擅長運用圖形的異形同構。

          第二位是瑞士的史蒂芬邦迪大師,這些是他為劇場設計的宣傳海報。簡單的人形搭配鮮血撕裂感的方式就可以把卡門劇情表達出來了。

          創意是天馬行空的。我們看下面這個音樂節海報設計,拆解其中包含的文字、吉他、人影、波浪等,每個元素與音樂都息息相關,組合在一起就缺了些創意表達。

          再看網易云音樂與快手聯合做的民謠音樂節H5,音樂的感覺一下就出來了。

          很簡單的圖形運用,就能產生創意性的差距。 


          ③ 圖形的風格化

          著名的可可香奈兒女士曾經說過,流行稍縱即逝,但風格永存。

          從包豪斯開始,設計風格發展到今天已經是多元混合存在的,很多所謂流行不過是循環與往復。

          即使是運用最簡單的圖形,也可以表達出不同的風格,甚至引領浪潮,為品牌傳播加分。比如,下面這組圖,你能猜的到是同一家公司的傳播海報嗎?

           

          3 圖形設計創意思路分享

          現在,我們感受到了圖形的巧妙之處。但具體拿到一個需求后,我們該如何去用圖形輔助設計呢?這里分享一個“三步理性創意發散法”。

          舉個栗子,我們為「夏季青年音樂節」設計一張活動海報。


          第一步,分析主題、提取元素。

          我們首先給主題做一個分析、把關鍵詞拆解與排序后,視覺的重要程度依次是:音樂、夏季、青年、節日。

          這些關鍵詞讓你最直觀的感受是什么呢?

          基于感受,我們可以嘗試提取出基礎的圖形元素了。

          色彩方面,我們也可以根據對應的元素去設置,最終我們提取出了這組圖形元素。

          第二步,對元素進行融合碰撞。

          這一步需要我們設計師發揮想象力了,為一組元素找到視覺上的聯結關系。這也需要大家平時能去多看、多想、多練。

          然后,我們為圖形融合進更多的細節。


          第三步,構圖與完成畫面。

          我們首先采取最簡單的主體式構圖方式,將想突出的圖形最大化、成為視覺焦點,添加海報所需文字進行排版。

          這種方式能夠做出相對合格的圖形海報,但我們可以用不同的版式與分割構圖,去嘗試更多的可能性。比如第三個海報,我們可以先建立不一樣的版面分割、進行配色,然后再放入圖形與文字進行排版,營造不同的畫面感覺。

          其他兩組也可以用這種方式、進行不同嘗試。

          最后,我們可以整體上對比一下。

           

          大師級的創意難得,但基本的圖形創意確實有跡可循,希望本次的分享能夠給大家帶來圖形思維上的啟發。


          文章來源:站酷    作者:站酷高高手

          藍藍設計www.bjlmtradeweb.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          原來這些最LOGO,一開始就用上了最的字體

          雪濤

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

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

          Abrate 的 Logofonts 項目就是這個「逆向工程」之后的結果?!府斠恍┠隳吧脑睾湍闶煜さ脑亟Y合到一起的時候,有趣的事情就會發生……所以我決定重新拆解這些大眾所熟悉的品牌,然后將文字部分替換成這個 LOGO 對應的字體名稱」Abrate 的思路就是這樣來的。

          原來這些最LOGO,一開始就用上了最的字體「附下載」

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

          如果你使用 Instagram,那么你可以在上面關注一下這個 LogoFonts 項目。

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

          Futura:字體不決,就用 Futura

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

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

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          FedEx

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Supreme

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          PayPal

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Nike

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Red Bull

          Helvetica:最為經典的現代非襯線字體

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

          很多現代都使用 Helvetica 字體來作為設計的基底,借助基礎的傾斜、色彩和裝飾,在它現代和整飭的設計基礎上,來營造獨特品牌視覺特征和氣質。

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Target

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Energizer

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Post-it

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          The North Face

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          CAT

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Behance

          Avenir:氣質透明的中性字體

          Avenir是由Adrian Frutiger設計的一款無襯線字體,最初于1988年由萊諾字體公司發布?!窤venir」在法語當中是「未來」的意思,在某種意義上,它和 Futura 在精神內核上有所呼應。

          和 Helvetica 一樣,Avenir 字體是為了「基本適合用在任何平面設計場合」的一種字體,同時,Frutiger 先生也認為,無襯線字體是不應該有斜體的,所以他也僅僅只是為了商業需求,使用光學儀器制作了偽斜體的效果。

          Avenir 這款字體整體呈現出一種中性、去性格化的特點,是一種氣質「透明」的字體。

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Linkedin

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Toyota

          Avant Garde:源自雜志的幾何標準字

          我們常說的 Avant Garde 字體完整的名稱應該是 ITC Avant Garde Gothic,它原本是 Avant Garde 雜志的 LOGO 字體,由 Herb Lubalin 所創建。

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          之后他與盧巴林設計公司的合伙人 Tom Carnase 一同努力,將這款字體完善成為一套完整的標準字體。

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

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Adidas

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          New Balance

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Durex

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

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

          關于這款字體的故事,可以看看這篇文章:

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

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          TikTok

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Spotify

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Discovery

          Univers:大氣而豐富的現代字體家族

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

          Univers 字體的字重控制和其他的字體不同,是按照數字來進行區分的,到現在 Univers 字體族當中所包含的變體已經非常之多了,多達44種,不同寬度、粗細變化的衍生字體使得它作為 LOGO 字體非常方便。

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Alibaba

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          ebay

          Myriad:協調平衡的數字世代字體

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

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

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Adobe

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Visa

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Walmart

          Arial :數字時代 Helvetica 的宿敵

          其實 Arial 這款字體能走向世界,和微軟息息相關。這款 Monotype 出品的數字字體是隨著當年的 Windows 3.1 操作系統和當時的 Truetype 技術一同分發出來的,它的競爭對象則是最為經典的 Helvetica 字體,而在視覺上,Arial 和 Helvetica 是非常相近的。

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

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Skype

          原來這些最LOGO,一開始就用上了最的字體「附下載」

          Pxxxhub

          結語

          其實經典的字體有很多,你單獨看這些字體的時候可能會感到單調,但是Abrate 的 Logofonts 能夠幫你了解到這些經典的英文字體是怎么應用到 LOGO 當中,讓你看到這些字體本身豐富的可能性和多變性格氣質。我將一部分字體打包存到百度云當中,供你學習研究。如果你需要在設計項目當中使用,請購買正版授權。

          文章來源:優設    作者:陳子木

          藍藍設計www.bjlmtradeweb.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          基于Webpack4.X,小程序工程化落地實踐

          seo達人

          小程序開發現狀:

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

          技術選型:

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

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

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

          原因:

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

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

          引入工程化

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

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

            • 自動壓縮圖片資源 : 小程序對包大小有限制,壓縮圖片大小可以減少空間,加快頁面加載;普通的圖片壓縮需要將圖片上傳到在線圖片壓縮網站,壓縮完再保存下來,效率比較低?,F在執行命令就可以自動壓縮圖片。

          2. 代碼規范

            • eslint: 能在js運行前就識別一些基礎的語法錯誤,減少不必要的小問題,提高調試效率;

            • husky、line-staged、prettier: 統一團隊代碼規范: 當執行代碼提交到git倉庫時,會將已改動文件的代碼格式化統一規范的代碼風格;

          1. 命令行創建頁面和組件模板

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

          1. 引入jest單元測試

            • 生成測試覆蓋率

          項目結構

          app -> 小程序程序的入口,使用微信開發者工具制定app目錄cli -> 生pagescomponents的模板腳手架img ->

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

          項目使用的包文件

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

          項目運行

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

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

          示例

          編譯scss

          執行 npm run dev

          壓縮圖片

          執行 npm run img

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

          新建頁面

          執行 npm run create

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

          新建組件

          執行 npm run create

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

          單元測試

          執行 npm run test 生成測試報告執行 npm run test:watch 監聽測試文件,方便開發使用

          其他思考

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

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

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

          藍藍設計www.bjlmtradeweb.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          想讓交互更走心?這4種可見狀態微交互技巧一定要學會

          周周

          在經典的尼爾森十大啟發式當中,「系統狀態可見性」可以說是如今交互設計領域當中,最為重要的原則之一。通過向用戶展現當前的狀態,讓用戶擁有對系統的控制權,建立用戶對于產品的信任感,這也是這種設計啟發式的最重要的價值之一。

          但是,想要做到可靠、易用,系統狀態展現的技巧是很講究的。這里梳理了4種最為常用的方法,結合了不少實用的案例,希望對你有所幫助。

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

          1.1、讓用戶知道自己在哪

          沒有人會喜歡迷失方向,但是無論在現實生活還是在數字領域當中,這種情況都會發生。讓用戶知道他們在哪里是創建良好導航體驗的關鍵。應用程序和網站都應該凸顯當前的導航選項,幫助用戶了解他們所在的位置。

          Google 的底部導航欄設計

          1.2、要經過多少步驟來完成任務

          這也是一個非?;镜牟僮?,通過展現步驟數量,幫助用戶來預估完成這個過程所需要的時間。

          Selecto 的調查問卷的設計

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

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

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

          這種視覺反饋的設計,最常見的范例就是點擊按鈕按下的微交互動畫,它告知用戶「系統已經捕捉到點擊交互了」。

          AliAli 所設計的懸停點擊動畫

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

          2.1、單擊點贊按鈕

          Spread love, not viruses ,作者  Charles Patterson

          2.2、開關按鈕

          這個開關按鈕不僅有點擊動效,而且色彩和按鈕標識也隨之改變,更為清晰地表明狀態,甚至兼顧到了視覺障礙用戶

          Switcher XLIV , 作者 Oleg Frolov

          2.3、書簽按鈕微交互

          這個書簽按鈕通過色彩的虛實變化來呈現書簽已添加的狀態,頗為巧妙。

          Bookmark interaction,作者 Oleg Frolov

          2.4、添加購物車微交互

          在這種情況下,視覺反饋非常明確且優雅地告知用戶已經添加到購物車里面了。

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

          3、呈現系統狀態的視覺反饋

          3.1、系統正忙于什么事情

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

          對于超過10s的更長的執行過程,無限加載的動效會顯得令人沮喪,這個時候實用進度條會更好:

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

          對于移動端應用,在初始加載階段所使用的啟動動畫界面,是否精心設計,決定了用戶對于整個產品的第一印象,優秀的初始加載動畫能夠將用戶的注意力從焦躁的等待中解放出來。

          Logo 閃屏 ,作者 Gleb Kuznetsov?

          3.2、內容加載

          當用戶需要時間來加載內容的時候,建議使用一種特殊的的容器「界面骨架」來展現。這種臨時的內容容器不僅能夠幫助用戶快速地了解界面的整體框架,構建用戶預期,并且能夠在后臺快速地加載數據,漸進式地幫用戶獲得信息。

          內容加載,作者 Ginny Wood

          這種設計方式對于移動端和桌面端的設計同樣適用:

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

          4、觸發事件

          4.1、通知和提醒

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

          Aleksei Kipin 設計的通知動效

          4.2、提示用戶采取行動

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

          內聯郵箱驗證機制,作者 Derek Reynolds

          結語

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

          文章來源:優設     作者:Nick Babich

          藍藍設計www.bjlmtradeweb.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          原來那些經典的卡通形象是這么設計出來的

          周周

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

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

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

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

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

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

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

          流氓兔(MASHIMARO)是一只瞇著眼的韓國兔子,隨著無厘頭文化的興起,流氓兔調皮又帶戲謔的個性通過原創者創作的網絡動畫形式呈現,其FLASH動畫在亞洲乃至全球掀起不小的風潮。

          還有監獄兔、兔斯基、兔八哥…這些耳熟能詳的形象,這里不一一列舉了。

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

          如何創作一個有特征的卡通形象

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

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

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

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

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

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

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

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

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

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

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

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

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

          下面是幾組自己平時的創作,也是利用業余時間創作的幾個形象,我會思考如何抓取每一個形象不一樣的特征?于是,這些特征可能是發型的變化,可能是眼睛的變化,也可能是衣著的變化……

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

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

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

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

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

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

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

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

          文章來源:我們的設計日記(ID:helloskys)

          藍藍設計www.bjlmtradeweb.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          18種常用AE表達式解析

          雪濤

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

          首先什么是表達式呢?

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

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

          超實用!18種常用AE表達式解析

          表達式工具

          A.表達式開關 B.表達式圖表 C.表達式關聯器 D.表達式語言菜單

          超實用!18種常用AE表達式解析

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

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

          1. time表達式

          原理:

          time表示時間,以秒為單位,time*n =時間(秒數)*n (若應用于旋轉屬性,則n表示角度)

          舉例:

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

          注意事項:

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

          超實用!18種常用AE表達式解析

          2. 抖動/擺動表達式

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

          原理:

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

          舉例:

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

          注意事項:

          可直接在現有屬性上運行,包括任何關鍵幀

          超實用!18種常用AE表達式解析

          超實用!18種常用AE表達式解析

          3. index表達式(索引表達式)

          原理:

          為每間隔多少數值來產生多少變化

          舉例:

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

          超實用!18種常用AE表達式解析

          4. value表達式

          原理:

          在當前時間輸出當前屬性值

          舉例:

          若對位置屬性添加表達式為value+100,則位置會在關鍵幀數值的基礎上對X軸向右偏移100(正數向右側,負數像左側);若想控制Y軸的位置屬性,則可對位置屬性進行單獨尺寸的分割,從而可單獨控制Y軸(正數向下,負數向上)

          注意事項:

          更多的使用場景是結合其他表達式一起應用

          超實用!18種常用AE表達式解析

          5. random表達式(隨機表達式)

          原理:

          random(x,y)在數值x到y之間隨機進行抽取,最小值為x,最大值為y

          舉例:

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

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

          注意事項:

          隨機表達式不僅局限于數據上的使用,其他屬性也可以應用,若數值為整數Math的M要大寫

          超實用!18種常用AE表達式解析

          6. loopOut表達式(循環表達式)

          原理:

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

          以此類推

          舉例:

          如下圖gif

          超實用!18種常用AE表達式解析

          超實用!18種常用AE表達式解析

          7. timeRemap表達式(抽幀)

          原理:

          timeRemap*n,n以幀為單位

          舉例:

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

          注意事項:

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

          超實用!18種常用AE表達式解析

          8. linear表達式(線性表達式)

          原理:

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

          舉例:

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

          注意事項:

          倒計時的用法比較常用,整數M要大寫

          超實用!18種常用AE表達式解析

          超實用!18種常用AE表達式解析

          9. Other Math(角度弧度)

          原理:

          degreesToRadians(degrees) 角度轉為弧度(degrees度的變量或表達式)radiansToDegrees(radians)弧度轉為角度(radians弧度的變量或表達式)

          舉例:

          常用語數學中的一些計算sin,cos,tan,sec,csc,cot等

          超實用!18種常用AE表達式解析

          10. layer表達式

          原理:

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

          舉例:

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

          超實用!18種常用AE表達式解析

          11. marker表達式

          原理:

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

          舉例:

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

          超實用!18種常用AE表達式解析

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

          原理:

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

          舉例:

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

          超實用!18種常用AE表達式解析

          13. param表達式

          原理:

          param(name)中name表示字符串;param(index)表示數值

          舉例:

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

          超實用!18種常用AE表達式解析

          14. 彈性表達式

          原理:

          復制粘貼表達式使用就可以,amp表示振幅,freq表示頻率,decay表示衰減(根據不同需求做不同的調整)

          舉例:

          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;}

          上述內容復制粘貼使用即可

          注意:motion2腳本也帶此功能,方法不唯一

          超實用!18種常用AE表達式解析

          超實用!18種常用AE表達式解析

          15. 反彈表達式

          原理:

          k表示反彈最終結果,a表示反彈阻力,b表示反彈變化時間

          舉例:

          k=500; a=8; b=30; x=k*(1-Math.exp(-a*time)*Math.cos(b*time));[x,x](根據不同情況調節kab的數值即可)

          超實用!18種常用AE表達式解析

          16. 數字遞增表達式

          原理:

          StartNumber表示開始時的數值,EndNumber表示結束時的數值,StartTime表示開始的時間,EndTime表示結束的時間,和前面的linear表達式相對應

          舉例:

          StartNumber=1;

          EndNumber=20;

          StartTime=0;

          EndTime=3;

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

          超實用!18種常用AE表達式解析

          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種常用AE表達式解析

          超實用!18種常用AE表達式解析

          18. 運動拖尾

          原理:

          delay表示要延遲的幀數

          舉例:

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

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

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

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

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

          超實用!18種常用AE表達式解析

          超實用!18種常用AE表達式解析

          文章來源:優設    作者:凌旬 

          藍藍設計www.bjlmtradeweb.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          免費可商用!186個線條圖標素材打包下載!

          雪濤

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

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

          Basicons

          網站鏈接:https://basicons.xyz/

          使用教學

          STEP 1

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

          免費可商用!186個線條圖標素材打包下載!

          STEP 2

          從右側的「Customize」自訂選項可以調整圖標尺寸、線條粗細,調整后會直接呈現于左側。

          免費可商用!186個線條圖標素材打包下載!

          STEP 3

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

          免費可商用!186個線條圖標素材打包下載!

          除此之外,Basicons 還有提供直接嵌入的JavaScript 鏈結和原始碼。

          值得一試的三個理由:

          1. 簡單的免費圖標集,收錄186 種圖標圖案供免費下載使用
          2. 可一次打包下載完整svg 格式圖標,或單獨復制產生svg 源碼
          3. 線上調整預覽不同的尺寸大小、筆觸粗細效果

          文章來源:優設    作者:Pseric

          藍藍設計www.bjlmtradeweb.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          ES6 模塊知識點總結

          前端達人

          模塊化 export 和 import

          import 導入模塊、export 導出模塊
          可以直接在任何變量或者函數前面加上一個 export 關鍵字,就可以將它導出。
          在一個文件中:

          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));  

          總結

          //mod.js // 第一種模塊導出的書寫方式(一個個的導出) // 導出普通值 export let a = 12; export let b = 5; // 導出json export let json = { a, b }; // 導出函數 export let show = function(){ return 'welcome'; }; // 導出類 export class Person{ constructor(){ this.name = 'jam'; } showName(){ return this.name; } } //index.js //導出模塊如果用default了,引入的時候直接用,若沒有用default,引入的時候可以用{}的形式 // 導入模塊的方式 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 // 第二種模塊導出的書寫方式 let a = 12; let b = 5; let c = 10; export { a, b, c as cc // as是別名,使用的時候只能用別名,特別注意下 }; //index1.js // 導入模塊的方式 import { a, b, cc // cc是導出的,as別名 } from './mod1.js'; console.log(a); // 12 console.log(b); // 5 console.log(cc); // 10 //mod2.js // 第三種模塊導出的書寫方式 ---> default // default方式的優點,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 // 導入模塊的方式 import mainAttr from './mod2.js'; var str = ' '; // 直接調用 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 // 導入模塊的方式 import * as fn from './mod3.js'; // 直接調用 console.log(fn.getName()); // 


          超贊 時尚簡約 手機APP界面UI設計欣賞 - 藍藍設計(九)

          前端達人

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

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

          WechatIMG67.jpeg


          WechatIMG68.png


          WechatIMG69.jpeg


          WechatIMG70.jpeg

          WechatIMG71.jpeg

          WechatIMG64.jpeg

          WechatIMG65.png

          WechatIMG72.png

          WechatIMG76.png

          WechatIMG77.png

          WechatIMG78.png

          WechatIMG79.png

          WechatIMG80.jpeg

          WechatIMG81.png

          WechatIMG82.png



          --手機appUI設計--

           (以上圖片均來源于網絡)

           藍藍設計www.bjlmtradeweb.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服



            更多精彩文章:

                 手機appUI界面設計賞析(一)

                 手機appUI界面設計賞析(二)

                 手機appUI界面設計賞析(三)

                 手機appUI界面設計賞析(四)

                 手機appUI界面設計賞析(五)

                 手機appUI界面設計賞析(六)

                 手機appUI界面設計賞析(七)

                 手機appUI界面設計賞析(八)


          日歷

          鏈接

          blogger

          藍藍 http://www.bjlmtradeweb.com

          存檔

          一本到在线视频免费不卡观看_久久人人超碰97精品_一级做a爱过程免费_猫咪最新永久在线网站