<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          官方出品!揭秘阿里巴巴APP 8.0 視覺品牌升級背后的設計思路

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          阿里巴巴副總裁、中國內貿事業部總經理汪海在對外分享時提出 1688 已經從信息平臺時代進入數字化營銷平臺時代,讓 1688 用戶在平臺內完成營銷和銷售一體化的整個商業閉環。1688 的使命也升級成「在數字化經濟時代,讓天下沒有難做的生意!」在全新的業務態勢下,為了更好的滿足用戶需求,阿里巴巴(1688)主客升級勢在必行。

          首頁重要性

          首頁既是業務分流的中心場景,也是平臺賣家判斷平臺打法,買賣家感知平臺價值的重要「門面」。從 UED 專業視角來看,首頁是定義 APP 內體驗范式及視覺風格的核心場景。

          如何改?

          1. 盤點現象,定義問題

          滿足業務新的訴求:平臺階段性戰略不同,1688 從曾經的信息平臺過渡到交易平臺,如今向數字營銷平臺轉型,舊的內容框架難以承載業務的新發展。

          提升分流質量:從過去的數據效果來看,需重新判斷,在 For 特色采購需求和服務大面采購需求之前,如何平衡調優,提升首頁的流量轉化效能。

          體驗升級:移動端 APP 天然生長在手機系統上,系統的風格更迭也牽動著 APP 的變化和升級。在 8.0 升級前,1688APP 存在著 5.0、6.0、7.0 多個由不同設計師在不同時間點所設計的場景,到8.0,APP 趨待從框架層、表現層以及品牌等方面進行統一及升級。

          改版策略

          1. 聚焦用戶價值,基于業務打法升級內容框架

          APP 升級前與業務對焦,我們收到三點訴求:

          • 用算法的能力去承接首頁買家的轉化;
          • 搜索是 B 類買家找品、選商的核心工具,需要引導更多用戶更高頻地使用搜索;
          • 互聯網流量紅利到瓶頸期,需要進一步做好新用戶的承接。

          在內容框架制定上,我們聚焦用戶價值,舍掉 7.0 時的內容版塊個性化,聚焦做商品的個性化,僅保留For大面用戶的營銷、內容場景,提升算法推薦區的曝光率,以此區域的商品做首頁的直接轉化。

          2. 弱化容器,突出內容,塑造心智

          視覺容器升級

          做平視覺框架,選擇「大間距分隔」,為內容留出干凈、簡潔的視覺空間。

          精簡內容柵格,避免形式給用戶閱讀帶來的負擔。

          提高留白率,提升頁面整體的透氣性,為內容留出更清爽、輕松的閱讀空間。

          拉大字體大小的梯度,加重字體顏色梯度,提升文字的清晰度和可讀性。

          強調版塊特性,塑造買家心智感知,達成業務目標

          強化搜索:7.0時,曾上線過將搜索做到「主觀上覺得顯眼」的測試方案,但相較于之前沉浸式搜索,數據幾乎沒變化。

          8.0 階段,從視覺表現層跳出看:「強化搜索」并不意味把搜索設計得更「顯眼」,而是達成「讓更多用戶更高頻地使用搜索」這一目標。如提升搜索底紋詞、熱搜詞精準度和吸引力、增加搜索布點等,都可能助力達成業務目標。

          基于用戶單手操作時,拇指在屏幕不同區域的點擊體驗,選擇將搜索組件移到更易于點擊、視線更聚焦的屏幕位置,上線后數據提升非常明顯。

          Banner 升級:7.0 的 Banner 畫面豐富度高,加之描述字段多,用戶閱讀有一定成本,較難在 3 秒內掌握全 Banner 的信息。此外,相比于 C 類用戶,B 類用戶會更偏理性,我們選擇以更冷靜、克制的「視覺語氣」與 B 類商人對話,而非渲染氛圍引導點擊。(上線后,同樣的活動內容,按新、老兩版規范設計投放兩套 Banner,新版較老版 UV CTR 約高出 48%)

          For 新人:以差異化的利益、個性化秒殺、新人攻略做用戶的承接。

          營銷場景心智差異化表達:營銷由伙拼爆品、天天特賣兩部分組成,我們判斷爆品主打心智為「賣得火爆又便宜」,特賣主打心智是「限時限量搶便宜」,選擇將兩個區塊最關鍵的特質做強化表達。

          內容場景(直播)動態化、互動感、實時性傳遞:抽象出直播間的方形版面+內容疊加形式來設計,大坑位以動圖傳遞給用戶直播的動態感,以紅包、個性化商品的多維實時輪播氣泡傳達直播的互動感、實時性。

          3. 升級品牌,貫穿APP場景

          為什么要做APP應用內的品牌設計?

          品牌設計是將內容層(平臺價值)與接收層(用戶)做柔性鏈接的一環,譬如在 APP 場景中,由于有商品、商家、商機等「干貨」,即使不特意做品牌設計,用戶也能與平臺保持剛性、穩定的連接。而反過來看,品牌做得很好,但平臺沒有「干貨」,用戶也不會單奔著品牌設計來平臺。我們認為,做 APP 應用內的品牌設計,核心價值在于助力用戶認知到平臺特性,感知平臺價值。從設計專業視角來看,APP 應用內的品牌設計,有利于定義并統一 APP 內體驗范式及視覺風格,保障用戶的體驗。

          怎么做?

          每位設計師所處的業務環境不一樣,解決問題策略和方式也千差萬別,在 APP 應用內的品牌設計中,個人選擇是通過厘清內容層(平臺)多層次訴求及 For 用戶的價值點,認知、感知接收層(用戶)特質及內容傾向,基于內容層底料+接收層用戶特質確定設計底層范式,塑造用戶感知。

          1. 圖形范式

          在阿里巴巴商業操作系統中,1688 聚焦做 B 類業務,直接服務對象是 B 類買賣家,業務細分出檔口尖貨、淘工廠、企業采購、淘貨源、微商代發、工業品超級店、跨境專供等,這些都是具有一定 B 類特質及體量感的場景,故在 APP 業務門洞及常規圖標的表達上,基于扁平 vs 寫實、輕盈 vs 厚重、活潑 vs 穩重的維度,圖形選定輕擬物、弱對比的設計范式,塑造 B 類場景 For 買家的沉穩、份量感。

          此外,異常/空白場景也是平臺與用戶互動,塑造用戶感知品牌的機會。在空態情感化插圖部分的繪制上,力求塑形出有份量、易讀、有意味的場景以示對應空態,并佐以輕微動效,增強空態的互動感。(在收藏夾、我的供應商等工具型場景,基于空態信息的價值考慮,將空態與工具新手引導相結合,并未做常規的插圖。)

          2. 色彩范式

          標準色

          隨著業務的發展,我們基于新的業務態勢,豐富了 1688 品牌色,以橙紅色作營銷、利益屬性的表達,以商務藍作服務、數字化屬性的表達,以金色作權益屬性的表達。

          輔助色

          在實際產品設計中,品牌色并不足以表達各類業務場景中的多層次的內容。因此,基于 VI 品牌色,裂變出不同重量、層次更豐富的品牌輔助色。

          場景用色規則

          基于買家角色及場景特征定義用色規則。

          1688色域及選色示意

          以 HSB 模式劃定出偏沉穩的 1688 色域,在日常 banner 及業務場景中可靈活取用。

          3. 動效范式及應用

          動效是設計的重要手段,良好的動效表達能增強信息表達強度,清晰信息層級關系,提升用戶體驗的舒適度。做動效之前,將 APP 信息結構平整到三層,保障內容在頁面簡潔明暢地呈現。

          在實際落地中,動效實現非常依賴技術資源,故動效設計之前,應考慮一個前提:動效設計增益內容表達,價值可論證,效果可衡量;同時,考慮接收層用戶的商人特質,我們期望動效表達給用戶以穩定感,并且在設計表達上能兼顧效率。

          在動效呈現部分,主要以緩入、緩出、緩動結合曲線來調節,總的來說,內容入場時節奏稍慢,速度緩,分層加載,交代清信息在 Z 軸上的層次關系,內容出場時節奏快,速度快,內容層級不用再做分層消失。

          APP 內典型場景的動效案例及演示:

          4. 業務品牌的價值傳遞

          此外,除以上在圖形、色彩、動效等基礎維度收口外,我們也需要將業務品牌放聲給買賣家,以達成業務品牌的價值傳遞。在 1688 向數字營銷平臺轉型的階段,業務提出了「源頭廠貨通天下」的口號,我們通過設計手段,利用 APP 開機啟動頁及下拉刷新的空間,將「貨通天下」的概念強化表達。

          結語

          以上便是此次首頁改版階段性的記錄。在 8.0 的視覺體系里,為更好地突出內容,視覺容器選擇盡可能做輕、做平,以冷靜、克制的「視覺語氣」與 B 類商人對話。當然,這是設計師和業務同學階段性的選擇。后續品牌的完善及產品的優化,仍需結合數據持續打磨。

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

          QQ20周年展 | 策劃與設計執行

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          即便QQ已經陪伴大家20周年,我們依舊懷揣初心,保持科技改變生活的熱衷。應運而生我們設計了太空企鵝探索科技作為本次20周年的品牌理念,來寓意新的里程碑到來。

          Image title

          Image title

          Image title

          https://v.qq.com/x/page/l087071z1ua.html

          01 概述 | Overview


          QQ 20周年,是互聯網產品長青的一個傳說,也是家喻戶曉企鵝IP形象的成長,同時也代表了鵝廠精神的堅韌與奮進。即便已經陪伴大家20周年,但我們依舊懷揣初心,保持科技改變生活的熱衷。應運而生我們設計了太空企鵝探索科技作為本次20周年的品牌理念,來寓意新的里程碑到來。就像宇航員勇于探索未知宇宙知識一樣,QQ帶著初心不斷保持變革與成長,為用戶提供更具科技力與創新的服務!也寓意鵝廠不斷探索未來與科技向善的愿景!

          02 logo設計?Logo Design


          我們在設計的第一階段,logo設計,就是圍繞“有趣和科技”來展開發散設計。我們決定從數字“20”開始入手,把QQ和20不斷結合,同時融入宇宙太空元素,寓意QQ不斷的對外探索,從多個維度來看世界,尋找有趣的內容。我們為了貼合“宇宙探索”這風格,為這次展覽設計了專屬徽章,徽章設計沿用了太空的概念,結合星球,星空,宇航員等科幻元素。簡約的幾何形狀和大膽的配色貼合“QQ更好玩”的年輕潮流氣息。


          Image title

          03 概念設計?Concept & Design


          1. Space QQ


          太空QQ的太空服設計指的是科幻電影如《星際穿越》和《火星救援》中的太空服,我們也將的時尚潮流,2018年以來運動鞋領域最為明顯的趨勢,將 ugly & oversize 的潮流風格注入到運動鞋的設計當中。這種將時尚潮流與太空服相結合的新型運動鞋,使整體設計看起來時尚而風趣。如果沒有它,太空服可能只是一個淺顯的概念。


          Image title


          太空QQ創意草圖


          Image title


          運動鞋設計草圖


          Image title


          3D原型


          Image title


          2. QQ X PUPU


          本次設定,由兩只企鵝背靠背組成,20周歲的QQ與1周歲的PUPU,鵝廠擁有著各種企鵝IP形象,除了經典的企鵝QQ,還有各種其他特色企鵝,包括PUPU,BabyQ等等,同時PUPU來自外太空也是企鵝FM產品的主形象,經典企鵝QQ攜帶了新生代PUPU共同探索科技太空,寓意企鵝在不斷創新與擁抱新生代相互合力,為年輕用戶提供更具科技力與社交娛樂化的服務。


          Image title

          Image title


          04 最終設計?Final Design


          Image title

          Image title


          05 8米QQ模型制作?8m QQ Model 


          對于實際生產出這個巨型模型是個大挑戰,我們先利用電腦三維模型生產出8米高的泡沫模型,反復檢查生產的泡沫模型是否和設計模型一致,不斷的打磨調整,待到確定泡沫模后開始翻模工作。


          Image title


          先給泡沫模噴上泥巴水,便于脫模,之后噴上石膏水,并加入麻絲增加石膏的牢固性,待石膏模晾干,把石膏里的泡沫模掏出后開始往里面涂一層泥巴水(便于后面玻璃鋼脫模),然后涂上樹脂和纖維布/氈,干了之后砸爛石膏模,里面的玻璃鋼模型就出來了。


          Image title


          玻璃鋼定型之后給內部焊接鋼鐵骨架,作為加固作用。剛脫模的玻璃鋼是非常粗糙的,于是對玻璃鋼的外觀進行打磨,使得表面光滑和調整細節,打磨完成后開始批灰和上底色,前后三次,為的是填補空隙瑕疵使模型更逼真完整。接著我們便調模型身上的顏色,在不斷嘗試中調出最接近效果圖的顏色,開始逐步上色。


          Image title


          上色完成后再噴保護漆防止褪色,待模型的漆干后清洗整個模型,為貼上專屬貼紙做準備,接著確定貼紙位置并逐一貼上。最后開始搭建安裝,因為在搭建過程中模型會有磨損,搭建完后再做最后的修補工作,最后巨型QQ模型完美地呈現出來。


          Image title


          Image title

          Image title

          Image title

          Image title

          Image title

          Image title

          06 貼紙設計?Sticker Design


          配合QQ20周年慶,我們要給8m的巨型QQ模型搭配上了貼紙設計,以slogan “QQ更好玩” 為設計的出發點,希望把有趣好玩的態度注入各個品牌中,為品牌logo嚴肅的視覺帶來玩味感和潮流感。同時配合巨型QQ宇航員的造型,我們在設計貼紙時參考了航天飛機,科幻機器等機械圖案元素,每個品牌的設計方案除了有趣值得玩味外,同時需要貼合宇宙科技探險的風格。


          Image title


          我們針對這個大方向再進行了幾輪細化,選出能代表各個品牌的最終的設計方案,并把貼紙模擬在太空QQ模型上反復測試貼紙最適合的位置,讓貼紙和模型的整體風格可以完美契合。通過各個品牌的logo再設計貼紙和太空QQ的碰撞,把品牌推廣做到最大化。


          Image title

          Image title

          07 搪膠玩具設計?Figure Design


          作為QQ20周年慶的驚喜,我們制作了與巨型太空QQ同款的迷你搪膠玩具,在這次玩具設計上我們加入了小機關,在玩具內部放置了小磁鐵,使得QQ和PUPU可以方便拆卸組合。


          Image title

          Image title


          同時為其設計了專屬包裝盒,包裝設計從“太空宇宙”的角度出發,以黑色為主基調,圖案印花設計選用了太空QQ來進行設計,把太空QQ模型線體化,配合QQ20周年logo進行設計,利用燙金工藝與醒目的圖形搭配,更有效的展現了QQ年輕化的品牌特點。同時為了減少后期生產制作之間的溝通誤會,我們同期將幾個較重要的角度的包裝3D效果圖快速渲染出來,有著非常直觀的參考對照作用。


          Image title

          Image title


          08 品牌物料設計?Product Design


          1. 海報設計


          設計QQ20周年展的宣傳物料,我們采用了最能代表這次展覽的太空QQIP為主體,作為本次展覽的專屬元素,太空QQ貼近科技,同時又具有趣味性和潮流感。我們結合了太空探索的特性,提煉出宇宙元素作為宣傳的內容,讓海報設計具有更多內容可看性和觀賞性。


          Image title

          Image title


          2. T恤設計


          配合QQ20周年展,結合宇宙太空元素,并從QQ20周年logo圖形中延展設計出各類代表圖形,正面簡潔直接地顯示出本次主題,把醒目的圖形放置于T恤背后,利用坐標軸和經緯度的信息圖案配合各個抽象化的宇宙元素,增加T恤設計的科技感,更明確地展現了科技向善的愿景。


          Image title

          Image title


          09 QQ20周年展覽?Exhibition Design


          QQ聯合深圳福田星河COCO Park 舉辦了“QQ20周年主題展覽”,展館外形模擬宇宙太空站,以太空白灰色為主調,搭配簡潔的立方體造型,白色燈條勾勒大門,并以QQ20周年專屬徽章做門面,科技未來感撲面而來,就如大型QQ太空站坐落于地球。


          Image title

          Image title


          展館大門旁的墻上安置了頗具科幻氣息的全息投影裝置,上面展示著QQ在不同時期的形象以及20年關鍵大事記。代表著不同時期的QQ形象用全息投影的方式展現出來,從最開始的胖QQ到現在的新版QQ,讓你一眼了解QQ演變史。中間放著QQ歷屆各個跨界Figure展示,總有一款捕獲你的心!


          Image title


          Image title


          同時本次展覽還和% Arabica咖啡跨界合作,% Arabica咖啡展臺設計簡潔透氣與QQ20周年展覽風格完美融合。一邊喝美味咖啡,一邊暢游展館,兩全其美。


          Image title

          Image title


          藍色發光的隧道科幻神秘,一進去馬上感受到了超強的氛圍感,仿佛時光碎片擦肩而過。用QQ掃描墻上的二維碼,立刻生成你的專屬時光隧道“QQ個人軌跡”,各種瞬間涌上心頭。


          Image title

          Image title


          聯合天天P圖,用13個LED屏組成了“復古頭像畫廊”。走進互動裝置小屋里,往鏡頭前一站,稍作等待后,以你的形象即時合成的13個復古頭像就會出現在面前的13塊屏幕上,體驗即時“變臉”效果。讓自己的頭像和曾經用過的QQ經典頭像合二為一,形成專屬的復刻版頭像海報。


          結語


          QQ20周年展不僅包含了展館設計,還包含了市場營銷,運營活動,周邊商品等多個設計環節,環環相扣,缺一不可,一起構建了整個QQ20周年展的設計體系;展覽設計了太空企鵝攜帶著新生代PUPU共同探索科技,寓意鵝廠不斷創新探索與科技向善的愿景,為年輕用戶提供更具科技力與社交娛樂化的服務,在打造“QQ更好玩”的路上奮力前行。

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


          這是一篇不看會后悔的配色干貨!

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          今天我們來講一講大家期待已久的配色方面的干貨。

          其實幾年以前我就寫過一篇關于配色的文章,早期的面粉估計還有印象,在那篇文章里我基本已經把設計師需要用的關于色彩構成的主要精華內容都匯總出來了(文末會附上文章鏈接的,別著急)。

          但是因為不同設計行業的工作內容是有差別的,而且每個人的基礎和理解能力也不一樣,所以僅憑一篇文章是無法解決所有人的難題的,所以今天這篇文章算是關于那篇配色知識講解文章的補充篇。

          不過在講解如何配色之前,我們還是先應該先記住一些關于色彩的理論知識,因為有了理論依據我們才能在做設計的時候有理有據,而不是胡亂配色和瞎試浪費時間。

          所以這篇文章主要分為了以下幾個部分:

          • 普遍意義上的色彩是指什么?
          • 設計流程和配色思路分享
          • 我的其他配色法寶
          • 總結

          普遍意義上的色彩是指什么?

          簡單點來說,色彩即顏色,顏色可以分成有彩色和無彩色兩大類,看有彩色主要看色相/純度/明度三個方面的屬性,無彩色也就是白色/黑色/各種深淺不同的灰色,也可以說無彩色是飽和度為零的色彩。

          色相,即可以明確表示顏色色別的名稱,比如紅橙黃綠藍靛紫:

          色彩有冷暖之分,我大致用溫度的概念標注一下,其中「0」是指中性色,「-0」是指中性偏冷,「+0」是指中性偏暖(當然,這里的溫度是我自己為了具體化冷暖的概念而標記的,主要是方便大家理解,所以不用去糾結這個數值準不準確哈哈,你明白他們代表很冷/很熱/一般冷/一般熱就好了!~)

          明度,就是指色彩的明亮程度(通俗點講,在某種色彩里添加的白色越多就越明亮,添加的黑色越多就越暗)。

          純度(飽和度),就是指色彩的純凈度,我以紅色舉例,如下圖所示:

          如果大家想看更加詳細的關于色彩構成原理的解說,可以看這個系列:《優設獨家配色專題》

          設計流程和配色思路分享

          不管我們做什么方面的設計,設計練習也好,實際項目也好,在設計之前,我們最好是能先明確我們的設計目的是什么,然后確定一個主題,依據這個設計目的和主題,去構思創意,有了創意后再去去探討具體的落地執行,其中包含了字體(標題文案)的設計排版配色、畫面整體的構圖和配色、細節優化、氛圍渲染等等;

          當然,這一次關于其他方面的內容我只會附帶著講一點,因為我們今天的主要內容是講配色。

          以我最近做的一張照片海報設計為例:

          下面是我前幾天用手機拍的一張照片,照片里的內容是我的手拿著一朵花。

          1. 設計之前先確定主題

          比如這一次我是確定了設計主題為:浪漫。

          因為我看了下這張照片里面花是粉色的,我的手指甲油也是粉色系的,而我也是一個(年紀越大就越)喜歡粉色的女人~同時因為我喜歡嘗試各種不同的風格主題,浪漫這個主題我之前是沒有做過的,所以要不這一次就浪漫一回好咯。

          那么說到浪漫,大家腦海里的第一反應會是什么呢?我不知道大家會想到什么,反正我會想到很多場景畫面,比如2002年的韓劇《冬季戀歌》里,男女主角在雪地里相擁的畫面,天上飄著雪花,同時背景音樂響起了《My memory》;

          △ 《冬季戀歌》因為是2002年的韓劇,所以現在看海報是有點過時了,但劇是好劇的

          再比如2017年的電影《愛樂之城》里,男女主角在繁星點點的絕妙夜空下翩翩起舞和擁吻的場景,同時背景音樂響起了《City Of Stars》;

          △ 電影《愛樂之城》海報

          再比如1995年上映的宮崎駿動漫《側耳傾聽》的結尾情節,時隔2個月才見面的男女主角一早就偷跑到一個可以俯瞰城市和日出的角落互相表白,微風輕拂著女主的短發,一棟棟高樓彌漫在朦朧的霧氣當中,日出的余輝映射在波瀾的水面,同時背景音樂響起了《Take Me Home, Country Roads》;

          △ 宮崎駿動漫《側耳傾聽》劇照

          等等等,還有很多浪漫有關的畫面我就不多說啦。

          總之,浪漫是有很多種表現形式和配色的,但是有一點是有共通性的,那就是要想打造出浪漫的感覺,背景音樂、色彩搭配和氛圍渲染很重要。

          比如除去聽覺上的背景音樂渲染氛圍以外,視覺上還有《冬季戀歌》里的白雪凱凱和雪花飄、《愛樂之城》的藍紫色夜空和繁星點點、《側耳傾聽》里的暖黃色日出和微風波瀾。

          那么回到我自己拍的這張照片上面,這種大面積的灰白色背景只能讓人感覺很性冷淡,一點都不浪漫,所以這張照片我肯定是要摳圖才可以用的;從我自己的年齡、喜好、原照片內容限定等角度,可能走《愛樂之城》那種類型的浪漫色彩可能就更適合一點:用暗色調的紫色搭配我原本圖片就有的粉色系。

          ok,分析到這里先打住,我們先不要繼續著急去細化到底該怎么去配色了這時候我們只需要有一個大概的色彩感覺就好了,因為配色之前,我們還有很重要的一步沒有做,那就是構圖。

          2. 配色之前先構圖

          很多人之所以總是說自己不會配色或不管怎么配色都感覺不對勁,其實是因為,搭配顏色這個動作不能為時太早了,你得先把你整個畫面的構圖和基本框架先敲定了再去考慮配色。

          先構圖再配色,先構圖再配色,先構圖再配色,重要的事情說三遍!~

          因為構圖相當于化妝的時候先打好底子,底子不打好,你再怎么化妝都是徒勞的。同理,如果你的構圖很亂或者基本型都沒出來,你就去考慮配色,很有可能就是你磨半天都設計不出一個滿意的結果,這就是很多人磨蹭半天,做出來的設計依舊不好看的很重要的一個原因。

          因為你的設計步驟錯了。

          比如我今天要拿這朵花做一幅海報,我先不考慮配色和氛圍渲染的事情,我就這樣光溜溜的排個版出來再說,這里的排版方式和字體選擇主要考慮樂個方面,一個是照片原本的條件限制,一個是圍繞著浪漫這個主題去做,最終排版如下圖所示:

          一個淺色一個深色,大家可以對比看看效果。

          這幅海報就這樣隨便看看其實也是可以看的,只是缺少細節和情感,也沒有特別的吸引力罷了,最重要的是不夠浪漫。

          那么到這一步,我們就可以繼續細化配色方案,分配色彩比例,優化細節,增加最重要的一些氛圍渲染步驟了。

          所以我繼續優化海報,最終得到了下面這幅海報:

          這張海報的背景是我用ps自帶的筆刷刷出來的,順著一個方向刷出一種墜感,這就是起到一種氛圍渲染的作用。

          然后,雖然粉色和紫色也算是同色系的顏色了,但是因為明亮的粉色與暗色調紫色在明度上有很大的落差,所以等他們組合在一起就會有一種碰撞的感覺,給人的視覺記憶力就會強一點,暗色也給人跟多神秘的感覺,讓人琢磨不透。

          畢竟,讓人琢磨不透的人比一眼就能看穿的人給人更多聯想和猜測,有插曲有意外的浪漫愛情給人的印象才會比較深刻一點,對吧~

          同時,為了方便大家理解,我又做了以下幾個版本,大家可以對比看看色彩的差異給人感覺上的變化。

          比如,如果我改變畫面的明度,提高畫面的明度,如下圖所示:

          這樣看,是不是畫面給人的感覺要少女很多?而且給人一種很溫柔的感覺,但是盯久了會覺得甜膩膩的。

          如果前面第一版暗色調的是為20-40歲左右的女人而設計的浪漫,那么上面這一版則像是為20歲左右的小姑娘而設計的浪漫。

          在這個基礎上,如果我既改變明度,也改變配色,給畫面加入非同色系的顏色,如下圖所示:

          這樣看,其實感覺也很美對不對?美歸美,但是卻感覺比上面那一版還要膩,因為像是為兒童或小蘿莉小公主而設計的浪漫了,適用的心理年齡段更小了。

          ok,我們接著往下看。

          如果我將背景隨便換什么顏色,但是保持背景顏色是同色系不同明度的,畫面里有明也有暗,如下圖所示:

          最后出來的感覺其實也是可以的,也很美,但就是少了一些抓眼球的感覺,覺得中規中矩的,沒什么特別之處,就好比那種平平淡淡的感情,缺少激情的感情。

          但是這種同色系的做法,卻是平臺和品牌為了統一形象方便視覺規范化管理最喜歡使用的一種配色方式,對此,大家可以去留意一下天貓或京東的一些頻道頁面或者大型活動各個分會場的頁面配色。

          ok,前面的配色技巧大家估計發現了,我要么是用同色系配色,要么是同色系改變明度和純度,要么是用不同色系不同純度但是保持明度一致,所以以這種方式去配色,無論你怎么配其實最后出來的感覺都是不會太差的,只是針對的受眾不同罷了,可以各取所需。

          所以如果你不會配色的話,那么就在這些基本的框架規則里去變化就好了。這是非常保險的一種配色方法。

          但是如果你不遵守這種規則,而是胡亂瞎配色,則很有可能會出現下面這種情況,要么是畫面顯得臟,要么是畫面顯得艷俗、花哨和亂,如下圖這些錯誤示范所示:

          上面這幾幅圖雖然是一些錯誤的配色示范,但是很多對色彩不敏感的孩子可能也會覺得:「誒,其實也還行啊」,其實主要是因為有構圖的基礎在那里硬撐著,底子在那里,所以色彩即使配的不夠好糊弄一下也還行。

          拿化妝舉個例子,為什么那些本身樣貌底子就好的人,即使亂穿衣或亂化妝你也覺得看起來還行,一旦她好好的打扮畫個妝,那簡直就是神仙顏值了,可底子不好的人呢?可能你就算再會穿衣打扮,你也只能變成看起來還行,到達不了神仙顏值的地步。

          所以我再強調一遍,配色之前先構好圖,把底子打好,這很重要。

          總結起來就是,做設計之前先確定主題,然后搭框架搞定排版樣式,接下來再考慮配色,再然后氛圍渲染,最后一步優化細節,over。

          我的其他配色法寶

          下面這些知識點都是我平時總結出來的一些配色小心得,是我屢試不爽的一些方法,分享給大家。

          總結來說,我的配色技巧主要有以下幾種:聯想法、提取法、目的導向法則。

          1. 聯想法

          所謂聯想法就是,類似于頭腦風暴那樣,當拿到設計需求或確定設計主題后,我會提取一些關鍵詞,根據關鍵詞去聯想很多相關的可能,然后再去篩選一些結果為我所用。

          比如下面這張照片,原本照片的顏色是很簡單單一的。

          但因為我給他確定的主題是「野花的回憶」,所以我就會去聯想:「野花都是什么樣的顏色?」「回憶又是什么樣的色調比較合適?」,后來我就確定了野花主要以比較艷麗的色彩居多,比如玫紅色、亮黃色、白色等等,至于回憶嘛,可能就是有年代感了,所以大的基調是暗色調的。

          于是下面這幅海報的色彩搭配就出來了。

          其他用聯想法配色的還有很多,比如下面這一組。

          原照片:

          做成海報后:

          不過這里需要說明的是,聯想法要求你會聯想,所以大家平時最好是多留意身邊的事物,多觀察大自然什么的,還有適當去了解一下色彩心理學,你會明白每一種色彩都是可以代表不同的感情和事物的。

          通過長時間的鍛煉自己對于色彩的敏銳度,可以幫助你快速的配出自己想要的色彩。

          2. 提取法

          所謂提取法,就是當我們拿到某一個產品或模特需要圍繞著它們做設計,我們就可以直接從它們身上吸取顏色,作為主色或點綴色都可以,這樣搭配顏色的好處就是:省時省事不容易出錯,而且還有呼應主題和畫龍點睛的效果。

          比如下面這張照片,原本照片的顏色就是綠色和淡粉紫色。

          那我最后做出來的海報配色也是這些顏色咯,只是文字部分單獨用了白色而已。

          哦對了,一般白色和黑色這兩種無彩色都是最適合用來作為標題或文字內容部分的顏色的,也是最不容易出錯的,同時聯想法和提取法其實是可以互相搭配使用的,不沖突。

          但是,有時候我們如果希望畫面可以更活潑一點,一般做那種比較卡哇伊風向的設計,標題也會用彩色,而不是黑白無彩色,至于標題用什么彩色,也是可以用聯想法和提取法啦,如下圖所示:

          3. 目的導向法則

          前面的聯想法和提取法的配色方法是教大家如何選取顏色,但具體到哪里該用什么顏色,該用什么明度什么色相的顏色,則就取決于你的設計目的是什么了,所以我將它稱之為目的導向法則。

          比如,之前我給大家提到過,有的設計是走藝術路線(以傳遞情緒為主,重在情緒上的表達),而不是常人理解的一般的商業設計路線(以傳遞信息為主,重在信息產傳達準確),前者適用于一切與藝術有關的設計或設計師個人的自由創作,后者適用于所有以賣貨為目的的商業活動設計。

          這2種類型的設計目的是不一樣的,面向的受眾群體也不一樣,所以在色彩選擇上就會有差異。

          舉個例子,當我們提到某某平臺又做活動了打折了,他還做了一個賣場促銷頁面,你去看看,絕對基本是以紅色、橙色等暖色系為主色,并且頁面氛圍做的非常熱鬧,就跟你去逛商場,映入眼簾的就是各種sale、大減價標牌,并且還有人拿著喇叭大喊:「進來看看進來瞧瞧啊!最后一天大減價買了不吃虧買了不上當??!」的即視感。

          并且,頁面里一些特別希望消費者能注意到的信息,它一定會突出處理,不僅字號要夠大,而且在色彩上也會突出。

          拿我的書《這么設計能熱賣》作為產品圖做個示范,我做了一個促銷海報,如下圖所示:

          但是,如果你去看一些比較性冷淡或大牌畫風的店鋪或官網看看,它完全就是一副我根本就不care你買不買的調調,倒不是因為他不想做生意,而是他的調性就那樣,比較自我或端著。

          好比人家的定位就是孤傲的,或則是你高攀不起的大小姐和公子哥類的,買ta東西的人本來也就是這種類型的,或者希望別人覺得自己就是這種類型的,畢竟要彰顯自己的身價和品味,不能掉價撒。

          所以,你看ta基本不會給你看大大的字號,也不會用一些很花里胡哨的顏色在標題上,而是以黑白灰這些無彩色居多,更不會特地用一些突出的顏色去醒目的區分一些字眼,總之頁面看起來不會有太濃的促銷氛圍

          雖然我的書籍封面設計本身其實就不是性冷淡和大牌的風格,但我依舊做個示范給大家看看,如下圖所示:

          而介于這之間的,也就是那些時尚類型的,或時尚里帶點促銷的,或放得下身段走點接地氣路線的牌子,則是會在保持好看時尚的基礎上,依舊會適當的用大點的字號或顯眼的顏色去突出一些重要的信息,但色彩不會用的太花哨,如下圖所示:

          而像上面這種比大牌感親切一點又比大賣場時尚一點這種介于之間的情況則是絕大多數的,畢竟小眾的是少數,成為大牌是少數,雖然現在是大賣場但是不想走大牌路線路線的是少數,不想賺錢的商家也幾乎沒有,于是最終都淪為了不高不低的大多數。

          總結來說,目的導向法則可以分為2種情況:

          如果你想低調一點內斂一點,你在配色上就保守一點,盡量少一點顏色比如三種顏色以內,或者是用同色系或柔和點的顏色等。

          就像一個性格很溫和或者很內向的人一樣,沒有攻擊性,安安靜靜的。

          拿我之前做的一幅照片海報為例。

          原先我是考慮讓這幅海報看起來有視覺沖擊力一點,但是我又不想畫面太過于張揚,畢竟我那天穿的衣身衣服色彩是比較柔和的橘粉色,所以我用了對比色而沒有用同色系,同時控制畫面里的顏色不超過3種,并且這幅海報里色彩之間的明度是差不多的,如下圖所示:

          但如果我用同色系不同明度和純度來配色,出來的感覺就是下面這樣的,你會感覺畫面更淑女安靜一點,沒有什么攻擊性:

          可是如果你想更加高調張揚一點,那么你在配色上就可以多用一些顏色,比如三種以上顏色,或則是用對比色或互補色而不是同色系配色,或則是純度高一點明度高一點的顏色,然后不同明度純度的顏色互相碰撞。

          就像一個脾氣火爆性格張揚的人,他們不愿意淹沒在人群里,而是要做人群中最醒目的那一個。

          我還是那上面那張海報改個顏色給大家看看,結果如下圖所示:

          如果我想繼續突出大標題文案,那么我還可以將標題的無彩色白色換成亮黃色,畫面里的顏色更多了,沖擊更大了,甚至你會覺得有點花哨:

          ok,上面這幾張圖,大家對比一下就會知道這其中的差異了。

          所以記住啊,配色不是亂來的,它一定是有章可循的,也是要依據你的目的來配的。

          當然,可能有人會說:「有時客戶給的主題實在是太晦澀難懂了,我實在是聯想不出來啊」,或者給到你的產品本身的配色就丑的不行了,如果你直接吸取顏色那做出來的設計肯定也是丑爆了,那么,這時候就要看你是不是有一顆靈活的腦袋能夠隨機應變咯!~

          如果聯想不出來說明你百度總可以吧,然后自己要多看多積累你的腦袋里才有貨的。

          如果原產品本身配色就丑那你就分析它丑在哪里加以改進不就行了嘛?比如它是因為純度太高了很艷俗,那么用低一些純度的同色系是不是就可以了?比如如果它是因為本身的色彩太多了很花哨,那么我們只選取一兩種顏色用用是不是就可以了?

          再比如還有人說,給我的產品根本就沒有顏色,純白、純黑、純灰色,那我該怎么吸顏色?。?

          天哪!~這種類型最好搞定了,因為無彩色就是萬能色,無彩色無論是搭配無彩色或者其他任意有彩色都可以的,這就又回到我前面提到的目的法則了,不懂的可以回頭再仔細看看~

          寫在最后

          平時也經常會有人問我到底該看什么書來提高配色能力,其實我想說只要你掌握了我前面提到的基本的色彩構成原理這些基礎知識,剩下的其實都不需要你繼續去看其他的色彩書籍了。

          因為看其他書籍無非就是要擴充你的知識面罷了,它只是其中一種增加知識儲備的途徑而已,但現實是很多人寫的書一看就讓人犯困,而且晦澀難懂,你買了也是浪費錢,倒不如通過看設計網站、看時尚雜志、看電影、多觀察大自然等有意思的途徑去培養自己對于色彩的敏銳度,然后看看我的干貨文章勤加練習,多實踐多思考來的有用。

          尤其是大自然的色彩,那真的是一個超級大的配色寶藏啊,你隨便看看那些花花草草、藍天白云、日出日落、海底和大地,哪個配色不是美的讓人驚嘆?就連那些惡心的毛毛蟲都有一身好看的不行的顏色。

          我們做的很多設計,不管是什么行業的設計有關顏色的,電影也好,三維也好,平面的也好,其實基本都是來源于大自然的。

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

          優設輕訪談!拿到需求無從下手?來看這7位設計大咖的私藏搜索技巧

          資深UI設計者


          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          信息時代,每個人都需要具備基本的「搜索」技能,尤其是設計師,你有沒有靈感枯竭不知所措的時候呢?今天我們召集了7位優秀設計師,對他們的設計靈感來源進行揭秘,希望這一期的輕訪談能夠讓你輕松Get設計大佬的搜索技巧!


          優設輕訪談第八期,我們的話題是——不信息時代,能與我們分享一下你的搜索技巧么?平時的素材積累是如何進行的?

          Dribbble 人氣最高:Mike

          Dribbble:https://dribbble.com/creativemints

          實際上,現在尋找靈感或資源變得非常容易。去Pinterest,你會獲取到任何你能想到的靈感!查看stock網站,獲取所有你需要的資源!

          △ AGE / Online courses

          盡管如此,我仍然建議從外部世界獲得靈感——請幾天假,去一個新的城鎮或國家旅行,逛逛博物館,你會發現真實生活會成為你最重要的靈感來源。

          產品視覺設計總監:Gleb Kuznetsov?

          Dribbble: https://dribbble.com/glebich

          是的,你是對的,搜索技巧對產品設計師來說是必不可少的。我在一家公司做了很長時間的分析師和研究部門工作,在那里我負責用戶體驗,這些經歷幫助我理解如何搜索有意義的數據和信息,并使用它來定義一個產品的關鍵指標。

          但是搜索不僅僅是關于用戶分析和信息,也是關于設計語言——理解什么是可能的。最好的設計只有當你跨越了可能和不可能之間的界限時才會出現。這種平衡基本上是一種新的設計語言或產品的品牌。

          我使用Pinterest進行圖像搜索。這個網站幫助我創建情緒板,并找到一些更具體更具象的東西,Dribbble的作品幫助我研究UI布局。然而,我不會使用Dribbble來作為我的色彩搭配靈感庫。

          對于顏色,我使用自己的靈感素材庫,在我的職業生涯中,我花了大量的時間從互聯網上搜集素材,并進行創作和整理。我也有自己的平面設計素材庫,我創建并管理這些素材庫大約有10年了。我幾乎每天都在捕捉的設計靈感素材。問題不僅在于你如何搜索,還在于你如何將這個搜索結果應用到你的工作中。

          △ Water waves simulation for 3d icon

          那如何應用呢?例如,當我看到好的設計時,我將視覺圖像結構分離開來——有時我在情緒板中添加新圖像僅僅是因為我喜歡形狀,有時是因為我喜歡顏色,有時是因為圖形效果等。在將該引用添加到庫之前,設計人員需要了解在何處可以使用以及如何使用。對于設計師來說,搜索絕對是一項必不可少的技能,我通過創建情緒板促進了我的搜索。

          頂尖設計團隊:Ramotion

          我們相信靈感無處不在,當然也會取決于我們進行的項目類型。

          我們在互聯網上會搜索很多,比如Behance和Dribbble。然而,我們周圍也有很多靈感。

          △ Cellebrite Pictograms

          例如,如果進行的是一個品牌項目,那么我們周圍的自然環境就是我們獲得靈感之所在。顏色、動效、形狀和所有這些的組合使一切都在一個愉快的和諧場景中工作,這就是我們努力傳遞的。

          對于UI/UX項目、網站和App設計,我們也是這樣做的,但我們主要目的是理解用戶的最終目標和每個行動背后的動機。我們不僅在數字世界中研究類似的解決方案,在現實世界中也會尋找類似的解決方案。

          頂尖設計團隊 FΛNTΛSY 總監:Minh-Pham-?

          Dribbble:https://dribbble.com/phamduyminh

          我不在本地存儲靈感資源,因為想要方便瀏覽必須對其進行分類,而這對于本地存儲來說比較困難,所以我非常依賴于在線資源,它們有很好的搜索引擎,所以,為什么不呢?

          基于不同的目的,我更喜歡從多種來源獲得靈感:

          • Dribbble:是最好的互動、動效和插畫資源網站。它是快速獲得靈感的好地方,尤其是針對大項目中的某一個小部分。
          • Behance:主要是為項目展示,所以如果你想要找一個地方尋找大的概念、設計系統、演示,那這絕對是最理想的。
          • Pinterest:是一個豐富得多的資源,在這里你可以從中找到任何靈感。因此,當我需要尋找高層次的概時我會來這兒念(例如情緒板)。關于Pinterest,我最喜歡的是它能夠顯示我正在尋找的相關圖片。它真的幫助我驅動我的思維,形成概念,事半功倍。

          服務設計機構:Zajno Crew

          說到尋找靈感,我認為有兩種人:使用Dribbble的人和使用Behance的人。Dribbble更像快餐,在這里你可以迅速的飽腹,Behance更像一家高檔餐廳,你可以在那里度過整個晚上。

          我個人喜歡吃快餐。我喜歡每天早上上班前查看Dribbble,當我發現好東西的時候,我就把它存起來以后用。

          △ Promo Website Animation for Pocket Multilingual Assistant

          如果你正在尋找真正的案例,而不僅僅是概念稿,你可以在Awwwards上找到一些主流的東西,也可以在這里找到一些更奇怪的東西。

          哦,還有Pinterest,它的優勢是推薦你可能喜歡的東西。我經常用它來做情緒板和尋找參考素材。

          如果是插畫資料,沒有比Dribbble和Behance更好的地方了。只要滾動鼠標,所有的好東西和你喜歡的藝術家都會一步添加到你喜歡的作品中,簡單!

          △ Tempers Flare

          Pinterest有利于發現新的想法、主題、不尋常的元素和靈感。每天瀏覽這些平臺也會讓你培養出一雙訓練有素的眼睛,這對提高你自己作品的質量和風格至關重要?!?

          Dribbble 人氣插畫師:Febin Raj

          Dribbble: https://dribbble.com/febinraj

          我每天都想更新!我認為這是件大事。因為這個世界瞬息萬變。

          △ Evening From Kerala

          通常,我的主要搜索源是Behance和Dribbble,同時我從其他來源獲取了更多的數據,比如文章,博客。

          Behance 人氣設計師:李宜軒

          Behance: www.behance.net/yihsuanli

          信息時代,每個人都必備一個「搜索」技能,尤其是設計師,很多人在接單后,可能會第一時間在網絡中或者日常的資料擴中搜索素材、參考、靈感等。

          我還記得剛開始接觸設計時因為沒有太多經驗,常常因為資料整理太久,壓縮了執行時間,最后反而虎頭蛇尾的完成作品。雖然創作作品時資料搜集、調查很重要,但其實整體過程有更有效率的方法。其實收集資料也是需要練習的,通過經驗累積,可以漸漸增加效率與快速找到最精準的訊息,避免漫無目的搜尋。

          △ ZENWATER

          Work hard 不如 Work smart, 有了較有系統的資料搜尋方式后,可以將時間留給創作和嘗試。隨著經驗累積,我開始養成了一些小技巧幫助自己更有效率的搜集資料,大家可以酌量參考:

          1. 先用樹狀圖整理出關鍵字

          在開始找資料前我會先把設計關鍵字整理出來,先從Google或百度等網站去搜尋相關的話題或圖片,以此方式讓思考可以更突破。例如,我要做一張音樂會的海報,開始前,我會先寫下關鍵字,例如:樂器、鋼琴、音樂、琴鍵、流動、彈奏….,接著利用這些關鍵字進行中英文查詢,隨著找到越來越多資料,可以從其中找到更多可能性的延伸。這個階段搜尋目的是從抽象方向出發,避免找到與別人相似的元素。一個一個關鍵字搜尋后,就可以把其中好的圖片整理再一起,收斂成更明確的設計方向。

          2. 擅用IG的#hashtag功能

          除了使用搜尋網站尋找資料,我覺得IG(instagram )也是一個不錯的選擇。我會用IG 的hushtag去找大家對于某一個單字不同的想像,例如找#music,在其中除了可以找到音樂相關的畫面,有時候也可以找到不同場域里的音樂元素。除了找靈感外,我也會利用hushtag搜集的設計作品,例如找#logo#graphicdesign時,可以看到大家正在進行中的作品,或是還未整理好放上Behance的作品。

          △ One Team One Goal / IBM Taiwan Sport Day

          3. 以pinterest分類整理資料庫

          我平常就有整理pinterest的習慣,建立資料庫的習慣除了為了特定專案外,我也會以設計種類分類作品,例如以CI、packaging、poster…分類。除此之外,以風格分類的資料庫也是必要的,例如:東方風格、美式、日本風格、歐式….。這些平常就累積好的資料庫能夠讓我搜尋作品資料時,有一個快速的開始。 Pinterest會依據風格推薦更多的作品給使用者,因此當平常有了足夠的累積,尋找資料就會有效率很多,能夠快速找到很多需要的作品風格。

          4. Behance搜集不同風格的設計師

          Follow特定設計師的IG或是Behance也是我搜集資料的一個方法。我會搜集一群在每個領域最具代表性的設計師。在找不到靈感時,我會不斷瀏覽他們的作品集,試著從他們角度出發,思考如果是他們遇見這個題目,他們可能怎么發展。除此之外,他們也是一個完整的風格庫,每個作品都是該領域的標竿,當客戶有特定風格的需求時,能夠快速給自己一個明確的目標,期許自己能夠達到他們作品的高度。


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


          大陸19屆畢業展海報實力平平,港澳臺能不能扳回一局?

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          前天看完大陸畢業展海報合集,不少小伙伴大呼看得不夠過癮。為了滿足大家炙熱的求知欲與上進心,美丫姐又花足工夫找來了今年港澳臺、日本、歐美等地畢業展海報。

          依舊干貨十足,依舊吐槽猛烈,希望優秀如你,能夠看得開心。

          港澳臺地區-眼前一亮系列

          首先我們來看看讓人印象最為深刻的優秀作品。

          1. 嶺東科技大學視覺傳達設計系

          渴望自由的金魚

          魚缸中的生活再怎么無憂無慮,也攔不住金魚一躍而出的渴望,就像噴薄欲出的創意,就像按捺不住跑出校園的畢業生。

          2. 臺灣科技大學畢業展

          架著一個歪斜的棚子,支撐著我們的二十二

          猛然撞上了即將踏入社會的迷茫與不安,臺科大的莘莘學子鼓起勇氣,向老師詢問著最后一個問題「老師您看這展廳,供電是不是不太夠?」

          3. 臺南應用科技大學多媒體動畫系

          伏流

          有時候你以為自己發現了一股清泉,其實全是大佬手里玩剩下的,人外有人,天外有天。

          4. 國立臺灣藝術大學設計學院

          喜歡做,肝愿受

          其實大家剛畢業頭幾年也是這么想的,幾年之后肝還好,頭很冷。

          5. 國立臺南大學視覺藝術與設計學系

          后浪

          長江后浪推前浪,后浪還有后后浪。大家都是被時代的洪流裹挾著前進,顯然這屆畢業生還沒畢業,已經被學弟學妹們震得神志不清了。

          6. 國立臺中科技大學商業設計系

          超人請回答

          整個童年,大人都忙著策劃一個玩笑,讓孩子天真的相信世界上真的有超人,等到成年之后他們再哈哈大笑「哈哈哈她真的信有超人」,偶有不愿從童真中醒來的人繼續尋找,你們等著,遲早給你們找來真的超人。

          7. 朝陽視覺傳達設計系

          青浪

          用各式紋理堆疊表現出了「浪潮」的韻味,既能聯想到青出于藍勝于藍,又有長江后浪推前浪的語境,畫面動感,銳意十足,就是不知道早就畢業的學長們會怎么看。

          8. 朝陽科技大學工業設計系

          那個967呢?

          找了很久只找到「967=很想你」的說法,但想來不至于借畢業海報,發出「憑什么就我四年沒有戀愛」的吶喊,越不知道就讓人越想知道,竟有一絲等待戈多的意味。

          9. 佛光大學產品與媒體設計學系

          非想非非想

          到底是佛光普照大學畢業的學生,還沒出校門,就已經參透了甲方的真諦,非想,問他想要什么,說不出來;非非想,卻總能提出一大堆意見。

          10. 國立臺中教育大學文創系

          泛流意識

          總說要把意識匯聚成一道洪流,變成一道鐵流,細想也沒什么不對,畢竟鋼鐵、石頭、血紅細胞里都含有鐵元素。

          11. 義守大學創意商品設計學系

          靈光乍現

          靈光就像這一坨奇妙的東西,摸不著更說不清,出現的時候總讓人欣喜若狂,定睛一看,可真不是個東西。

          12. 明志科技大學工業設計系

          明志科技大學旗下有兩大門派,一派工業設計,一個視覺傳達,兩大派的關系想必是劍拔弩張,一派冷靜沉穩,舍我其誰。

          13. 明志科技大學視覺傳達設計系

          眼波

          一派浮夸前衛,閃瞎人眼。

          14. 臺南應用科技大學美術系

          畫語者

          老獵人除了酷愛炫耀獵物,更愛炫耀不離身的老獵槍,情人眼里出西施,用心愛的工具們鋪滿整張海報,還能有誰比他們更愛這個行業。

          15. 昆山科技大學視覺傳達設計系

          形象組無能

          「海報做成這樣,都怪老師舉棋不定」,多少年后才突然醒悟,原來老師的猶豫不決,是為讓我享受最后一次任性的機會。

          16. 環球科技大學視覺傳達設計系

          輪迴

          「誰TM把燈打開了?」。不,是天又亮了。多少優秀的作品背后,都是無數個日日夜夜的輪回

          17. 世新大學數位多媒體設計學系

          今宵霓爛

          在陳列室打碟,在畢業展上蹦迪,如果連想都不敢想,那你憑什么認為你能改變這世界?

          港澳臺地區-成績優秀系列

          其次是第二梯隊,雖然不算突出,但也算優秀作品。

          1. 嶺東科技大學數位媒體設計系

          淘色風波

          齷齪的語意,來自成人齷齪的內心,讓家長面紅耳赤的「淘色風波」,不過只是畢業生們翹課逛展打游戲。

          2. 國立臺北科技大學工業設計系

          新一代設計展

          廢掉的第一稿千萬別撕,不然最后出街時就是這個鬼樣子。

          3. 國立臺中科技大學創意商品設計系

          被……的那五年

          科大的畢業展為什么延期了五年?估計是地圖畫得太爛,大家花了五年才找到舉辦的地址。

          4. 國立云林科技大學視覺傳達設計系

          發聲關系

          「喔」「啊」「曰」,奇了,大家都是紙打印出來的作品,憑什么就你們家海報有聲音?

          5. 東南科技大學數位媒體設計系

          生長輪

          樹木的年輪記錄著時光,每當有大事發聲,從年輪中就能看出一二,你看今年新的圈圈它又白又圓。就像學生們畢業一樣,腳踏實地、悄無聲息。

          6. 國立清華大學藝術與設計學系

          升溫計畫

          溫室效應?冰川融化?這些都遠遠不夠,沉默四年平淡如水,如果一生一次的畢業大展再不燥起來,那可就真的畢業了。

          7. 國立云林科技大學數位媒體設計系

          外出取材中

          悶在家里一時爽,一直悶著一直爽?活像躺在盒子里的量產玩具,該出去走走,看下絢麗多彩的世界了。

          8. 嶺東科技大學創意產品設計系

          三角關系

          創意、媒介、受眾,所謂傳媒,正是一場相愛相殺的三角游戲。

          9. 南華大學視覺藝術與設計學系

          零睡時間

          你以為躺在床上就是不思進???不,我是在夢里收集創意,一時的休憩,是為了更好的前進。

          10. 國立云林科技大學工業設計系

          問HOW

          寒窗十數載,大人都說不懂就問,步入社會才知道大家都只能強撐,明明面對奇葩需求,想要大聲反問一句「HOW?」看看癟掉的錢包,只能脫口而出,說一個「好」。

          11. 銘傳大學數位媒體設計學系

          蹦起來

          設計水平還沒那么高的時候,一定記得猥瑣發育不要太跳。不然,甲方連頭都給你錘爆。

          港澳臺地區-迷惑不解系列

          最后是第三梯隊,先不論好壞,總之看得人迷惑得很。

          1. 亞洲大學數位媒體設計學系

          復燃

          想讓葬愛家族設計風潮死灰復燃,甚至風靡世界也不是問題,只需簡單一步,把地球表面刷成 QQ 空間那么黑。

          2. 高雄師范大學美術系

          扔出去的,頭也不回

          扔出去的飛機稿就別再撿回來了,即使馬糞風干后看著像塊巧克力,但只要你一舔就會發現,呸,果然還是那堆馬糞。

          3. 義守大學傳播與設計原住民專班

          是生活

          懷疑是在暗示黃色比生活更吸引人,但手上又沒啥證據。

          4. 中國科技大學視覺傳達設計系

          一體兩面

          思維定勢是一件很可怕的事情,比如甲方經常讓把大象換個面,覺得不是正面就是反面,可換來換去還是不滿意,就沒想過,甲方要的是橫切面。

          5. 義守大學電影與電視學系

          藝眼瞬間

          好設計讓人瞠目結舌,覺得語言乏力,丑的設計也能讓人瞬間語塞,根本說不出丑在哪里。

          6. 大葉大學工業設計系

          DNA

          看完臺灣大葉大學官網上的師生風采,就能明白這確實是一所連空氣都飄著直男審美的理工科大學。

          也就不難理解為什么連設計系學生們的畢業海報都會有這么大一股子消毒水味。

          7. 大葉大學視覺傳達設計學系

          記得呼吸

          比起上一張工業設計系海報的冷靜,視覺傳達系海報走向了另一個極端,線條凌亂,張牙舞爪,若不用文字提醒「記得呼吸」,不少觀眾會因為過于震撼憋死在原地。

          8. 澳門科技大學

          跨越

          連著領導的修改意見以及刪除線,一齊打印出來的終級作品。

          「香港的呢?」抱歉,一張都沒找到。

          日本

          日本,設計強國近鄰日本。今年畢業展海報也是頗有看頭,他山之石可以攻玉。

          1. 多摩美術大學

          能順利畢業的,都是怪物。

          2. 武蔵野美術大學

          感受撲面而來的鄉土氣息。

          3. 東京藝術大學

          這就是設計師通宵后倒下的身影。

          4. 東京造型大學

          綜合各位老師意見之后的海報作品。

          5. 東京五藝術大學聯合展

          「我用圖畫工具都比你畫得好!」「好好好你行你來?!?

          6. 倉敷藝術科學大學

          「快從樓頂下來,這次真的不改了!」「你們簽字畫押」。

          7. 京都精華大學

          學習四年,設計使我面目扭曲。

          8. 京都造型藝術大學

          套用學長給的模板,但忘了改日期。

          9. 金澤藝術工業大學

          金澤大學深造多年,最拿手的就是往產品上噴金漆。

          10. 岡山縣立大學

          讓我看看,誰還沒交畢設作品。

          11.日本桑澤設計研究所

          我們的展區在山頂上,請大家參展時做好御寒準備。

          12. 名古屋藝術大學

          為了讓畫面更豐富,我放了 267 頂帳篷。

          13. 奈良藝術短期大學

          畢業考試第一題,畫出任課老師的臉。

          14. 文化學院大學

          反正到時候大家都是要哭的。

          歐美地區

          歐美地區畢業展海報內容更加現代,但因為文化差異較大,消化起來相對比較困難,這里就不一一吐槽了,大家自由學習。

          1. 路易斯安納州藝術與設計學院

          2. 倫敦都會大學

          3. 美國Art Center

          4. 英屬哥倫比亞大學

          5. 美國馬里蘭藝術學院

          6. 英國皇家藝術學院

          想不到你這幫濃眉大眼的英國人,也玩「愛滴魔力轉圈圈」。

          好了,以上就是今天的全部內容,誰要是還覺得不過癮,只能老老實實等明年新生畢業了。

          總體說來,亞洲地區文化的多樣化性,還是完勝歐美,這點非常值得欣慰,但是回頭看看大陸畢業展海報,又千篇一律到讓人完全開心不起來??傊€是那句老話,革命尚未成功,同志,仍須努力啊。

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

          參與多個項目后,我總結了這份可能是網上最全的小程序設計規范

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          最近設計群里經常有人問起小程序設計規范的問題,雖然官方有提供樣式庫的下載,但是停留在 16 年版,不是的。而設計經驗這部分網絡上也沒有比較全面的分享,這促使我停下手上的計劃,加快輸出本篇文章。正好近期剛結束幾個小程序項目,總結下經驗,并結合微信小程序的官方設計指南,一起分享給大家,希望幫助大家更快速地上手。

          隨著 2018 年小程序的迅猛發展,小程序現已被各大企業廣泛采用,「觸手可及、用完即走」的用戶體驗備受青睞,隨之小程序設計也成為設計師的必備技能,那在進行小程序界面設計時,應該如何快速做設計?過程中又要注意哪些問題呢?

          對于已經開發了 App 的產品,在進行小程序設計時需遵守小程序的規范,同時要保持小程序界面設計與 App 的風格統一性。

          小程序設計區域

          小程序的「所有頁面」右上角位置,都固定放置了小程序的菜單,在設計界面時需預留出該區域空間。

          Nav Bar設計

          1. 小程序菜單固定樣式

          微信提供了深淺兩種配色樣式,以便更好地融合到各種風格的頁面中,需注意保持小程序菜單清晰的辨識度。

          線上案例:

          2. 交互注意事項

          如果要在小程序菜單附近放置交互元素,要考慮是否有交互沖突,應盡量避免誤觸的可能。

          建議開發者設計的自有導航樣式與微信官方小程序菜單樣式保持一定差異,以便區分。

          如上圖,小紅書的自有導航樣式個人不推崇,理由如下:

          • 樣式與官方菜單樣式未區分開,容易產生疑惑;
          • Nav Bar 欄兩端對稱在頂部,視覺上顯得過于呆板。

          微信讀書既有微信線條外框的 DNA,又區別于官方樣式,是不錯的綜合。以上僅限個人觀點,還需用戶數據來客觀驗證。

          3. 搜索框常見的幾種表現形式

          Tool Bar設計

          1. 小程序設計規范

          頂部標簽分頁欄顏色可自定義,一般會沿用 App 的設計風格,以保證兩個平臺的視覺統一性。

          2. 常見的幾種表現形式

          Tab Bar設計

          1. 小程序設計規范

          微信有提供小程序的底部標簽樣式,建議標簽數量在 2-4 個適宜。

          也可根據產品需要選擇或者去掉底部標簽欄功能。

          2. 常見的幾種表現形式

          啟動頁圖標

          啟動頁除品牌 Logo 外,其他元素都由微信統一提供,且不能更改,設計師僅需提供 2 倍和 3 倍尺寸的 Logo 即可。

          加載樣式

          1. 小程序設計規范

          全局加載是小程序名稱左側的加載圖標。模態的加載樣式將覆蓋整個頁面,由于無法明確告知具體加載的位置或內容,可能會引起用戶的焦慮感,建議謹慎使用。

          2. 常用的加載樣式

          需告知用戶具體加載的位置形狀,減輕用戶焦慮情緒。

          對于沒有開發App來說,可依據官方推出的《微信小程序設計指南》來設計,以確??焖僭O計出符合規范的小程序。

          小程序設計應遵循友好、、一致的設計原則,每個頁面都應有明確的重點,清晰明確地告知用戶身在何處,又可以往何處去,確保用戶在頁面中游刃有余地穿梭而不迷路。

          平臺設計網站推薦

          最后,推薦幾個常用的平臺設計網站。

          1. BAT各平臺小程序設計規范網站

          微信小程序設計指南:https://developers.weixin.qq.com/miniprogram/design/

          支付寶小程序設計規范:https://docs.alipay.com/mini/design

          百度-智能小程序設計規范:
          https://smartprogram.baidu.com/docs/design/overview/introduction/

          2. 其他常用的設計規范網站

          蘋果-人機界面指南:https://developer.apple.com/design/human-interface-guidelines/

          詳細介紹了 iOS 設計規范,同時還提供了 UI 設計資源下載。

          安卓-MD設計指南:https://material.io/design/

          螞蟻設計:https://design.alipay.com/#ds

          提供移動和 Web 端的設計組件,還有設計案例和心得的文章供學習。

          微信樣式庫:https://weui.io/

          提供微信內的網頁和小程序設計規范。


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

          讓設計更有說服力的20條經典原則:帕累托原則

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          簡介說明

          1. 理論表述

          對于許多事件,大約 80% 的影響來自 20% 的原因。

          2. 理論背景

          1896 年,意大利經濟學家帕累托出版了《經濟政治學課程》(Cours d’economie Politique),其中描述了他所觀察到的一些現象,比如意大利 80% 的土地掌握在 20% 的人手中;比如花園里 20% 的豌豆莢產出了 80% 的豌豆。

          上世紀 40 年代,美國一位管理顧問 Joseph M Juran 觀察到一個在商業以及生活中普遍存在的現象:在某一過程中,80% 的影響來自于 20% 的投入。他將這一現象以帕累托為名,稱為「帕累托原則」。

          80/20 雖然只是一個相當不的數字,在很多具體情況之下,這個數字會有細微的波動,但這個數字背后所蘊含的思想或是規律卻是不變的:更集中的投入將產出大于預期的結果。

          設計案例

          1. 將時間投入到用戶常用的頁面

          一般來說,一個 APP 大多擁有幾十上百個頁面,但是這些頁面并不是用戶都能用到的,有時候大多數用戶只會常用那么幾個頁面,所以將有限的時間和精力投入到這些頁面將給你帶來更大的收益。

          案例1:網易云音樂的 UI 迭代

          最近網易云音樂和蝦米音樂都迎來了大版本更新,UI 也幾乎重新設計了一遍,但我們所看到的重設計,只局限在那些關鍵的頁面上,一些次要的頁面基本沒改。比如網易云音樂,首頁這種重中之重的頁面不僅風格、排版大改,連產品邏輯都改了(比如快速入口由四個變為五個,改變了私人 FM 的位置等),但是等級頁這種無關緊要的頁面,除了頭部的全局性改動外,其他地方一點沒變。

          2. 奧卡姆剃刀的另一種詮釋

          那我換個角度想,如果我們的應用已經存在了這么多需要花費時間和精力的頁面,現在產品經理希望增加另一項需求量小但確實存在的功能,我們應該怎么辦?奧卡姆剃刀指出「如無必要,勿增實體」,這是我們對此欲增加的功能的終極評判標準。

          要知道,頁面中每增加一個元素,對于用戶體驗的影響是巨大的,這意味用戶著需要花費額外的時間去理解新增加的元素是什么;在所有元素中尋找特定的一項又多了一些備選;瀏覽頁面時的視覺噪聲又多了一些。

          所以到底要不要增加這個功能,關鍵在于能否很好地控制上述的用戶體驗成本,以及后續的迭代成本。從帕累托原則的語境來看,小眾但是確實存在的需求大概率不足以產生能夠克服用戶體驗損失的收益,哪怕我們投入了一定的精力去做,日常依然無法給它百分之二十以上的關注去修改,去完善,去迭代,所以這個功能也大概率不需要增加。

          3. 長尾模型與帕累托原則的對抗

          說起帕累托原則就不得不提到長尾模型,長尾模型的分布曲線與帕累托長得很像,但是結論卻完全相反,長尾模型提醒我們無法忽略那條長長的尾巴的影響,雖然它收益低,但架不住數量多,比例高。所以我們可以看到「尾巴」所占據的面積幾乎和「大頭」相當。

          04 年長尾模型被提出來的時候,很多人認為長尾模型是對帕累托原則的顛覆,諸多例子都側面佐證了長尾模型的正確性,比如 Google 目前約有一半的生意來自小網站,比如亞馬遜圖書的總盈利中少數暢銷書占一半,絕大多數的冷門書占另一半。

          聽起來好像很有道理,長尾模型好似在控訴著開發者不去關注那些小眾而眾多的瑣碎需求。事實真的如此嗎?

          長尾模型本身隱藏了兩點不可或缺的前置條件,一是尾巴真的要足夠長(小眾需求真的有這么多),二是這么長的尾巴能被用戶發現。無論哪一點,都建立在海量的用戶資源之上,所以中小型 APP 大多望塵莫及。能夠有余力去關注長尾模型的大多是用戶量達到一定規模的產品,比如之前例子中所舉的 Google、亞馬遜,國內的微信、QQ、淘寶、支付寶、京東,這些產品的用戶量足夠多,用戶類型足夠廣,尾巴足夠長,哪怕再隱蔽的功能入口也能擁有不錯的曝光度(總會有用戶發現它),所以才能發揮長尾模型的作用。

          所以在用戶量達到 QQ、淘寶的級別之前,長尾模型看看就好,帕累托依然是主要的指導原則。

          注意事項

          注意點1:不得不做的需求

          雖然我們要將精力放在重要的事情上,但有些功能和標識即使對于用戶意義不大,和產品的增長也沒有實際聯系,但我們也依舊需要花費大量精力投入。最常見的就屬于法律規定和平臺規則相關的需求了。

          比如 18 年的大事件,歐盟推行《一般數據保護條例》俗稱「GDPR」,所有國際版的應用都需要針對這個條例對注冊流程做出大改,比如這篇文章介紹的:《GDPR合規下的 App 產品設計——啟動頁面和賬號注冊》。

          注意點2:最重要的「少數人」

          滿足大多數用戶的需求是一個必要條件,但不代表在任何情況下少數人就是可以被忽略的群體。對于工具化的應用而言,真正為應用帶來收入和傳播的,恰恰是占比較低的付費用戶,可能連 20% 都不到。

          在這類應用開發的周期中,前期完成了滿足大多數用戶的基礎功能,之后更多的精力會被分配在滿足少數付費用戶的需求上。產品的方向和目標都可能隨著不同的時期發生變化,帕累托原則是一個決策工具,但決策方向是需要經過我們充分思考以后得到的,切勿盲目地服從一個指標。

          總結

          讓設計更有說服力的20條經典原則:馮·雷斯托夫效應、蔡格尼克記憶效應

          資深UI設計者

          馮·雷斯托夫效應 Von Restorff Effect

          1. 簡介說明

          理論表述

          當存在多個相似的物體時,與眾不同的那個更容易被記住。

          理論背景

          馮·雷斯托夫效應(Von Restorff Effect),也稱為隔離效應(Isolation Effect)。1933 年,德國精神病學家、兒科醫生 Hedwig Von Restorff 在研究中發現,對被測試者提供一系列相似的項,而只有一項顯得特別、孤立、與眾不同的時候,這一項往往更容易被記住。

          在此之后,對馮·雷斯托夫效應的研究也有進一步的進展,比如從生理學上,大腦對特異點有著更加明顯的 ERP(事件相關電位),這或許可以解釋特異點更容易回憶的原因;再比如馮·雷斯托夫效應與年齡有著密不可分的聯系,老年人對特異點的記憶就沒那么深刻。

          不管如何,我們還是在頻繁地應用著馮·雷斯托夫效應,并能夠看到它在視覺設計中卓著的效果。

          2. 設計案例

          馮·雷斯托夫效應可以應用的場景分成兩種:環境差異和經驗差異。環境差異是指在空間尺度上做出的差異(同一平面內),而經驗差異是指在時間尺度上做出的差異(不同時間點的同一平面),我們來詳細聊一聊這兩個尺度。

          環境差異──獲取視覺焦點

          也有的文章中會表達為「背景差異」或「情景差異」,這不重要,我們只需要知道這個差異產生的原因:即在相似的周圍環境中出現差異。參考百度百科我們來進行一個簡單易懂的小實驗。

          案例1:環境差異小實驗

          請試圖去記住上面那幾串字符串。好吧,我放棄了,但如果努力一下,我們就會發現最容易記住的是與周圍環境最不一樣的那個。第一行是數字「5」,第二行是星號,第三行是紅色的字母「F」。

          這就是環境差異所帶來的識別度與記憶度的提升,也是我們經常能在 UI 設計中所看到的一種有效吸引用戶點擊的手段。

          案例2:起點、大眾點評

          比如起點希望用戶在個人頁時去點擊「版本測試」按鈕,比如大眾點評希望強化「訂單」按鈕的視覺特征以便用戶能夠更快速地找到,所以在列表中這兩者都會長得不太一樣。這種區別于環境中的其余功能按鈕,為了吸引或暗示用戶點擊的按鈕有一個專門的名字,叫做「Call-to-Action 按鈕」(CTA 按鈕/行為召喚按鈕)。一般來說,CTA 按鈕大多會利用馮·雷斯托夫效應的環境差異來達到 Call to action 的目的。

          經驗差異──強化時間特征

          與用戶過往的經驗或記憶做出差異,叫做經驗差異。這種差異可以放大時間點的特征,使用戶對差異所在的時間點記憶更深。

          案例3:google doodles

          我們都知道 google 會在一些比較特殊的日子改變 logo 的設計,給 logo 加上一些非常有趣的涂鴉,與平時的 logo 做出差異,就是為了利用經驗差異使用戶在記憶中強化時間特征,更好地記住這個時間點。

          記住時間點有什么好處呢?比如 Google 可能是為了傳播世界上那么多有意義的節日,也帶給公司一種具備著人文關懷的氣質。再比如淘寶、京東和 Steam,在「雙11」、「618」、「圣誕特賣」一定會改變主頁的設計,就是為了讓用戶記住這幾個被創造出來的節日,好讓大家每年這個時候都心甘情愿地剁手。

          3. 注意事項

          注意點1:所有都不一樣 = 所有都一樣

          頁面中的特異點終歸只能屬于少數,如果整個頁面所有元素都想做得不一樣,都想突出,那不僅沒辦法突出任何一項,頁面的整體視覺都將崩潰。

          反面案例1:新手常常會陷入什么都想突出,但什么都不能突出的境地

          注意點2:把差異放在該放的地方

          當用戶被特異的那一個點吸引的時候,對其他的注意力就將下降,這是馮·雷斯托夫效應天然的副作用。我們能做的就是把特異點放在最關鍵的地方,而不是次要的地方,這樣副作用就不會太過影響體驗。

          反面案例2:閑魚、虎課的退出登錄按鈕

          前幾年我們經常能看到這樣的退出登錄按鈕,使用高飽和紅色的背景,成為了這一頁最亮的那個按鈕。之前我們基于「警示用戶謹慎按下」的理由,將退出登錄按鈕做成最具警示意義的紅色,但是你看,一旦我們這么做了,這個按鈕就成了頁面中最不一樣的那個,強勢地拿下「Call to action」的大旗,時時刻刻都在散發著快來按我的氣息,這顯然與我們「不希望用戶隨意退出登錄」的意愿相違背。所以,我們現在去看微信、QQ 這些巨頭應用,都已經把退出登錄按鈕的差異做到最小,甚至沒有差異,就是基于上述的考量。

          4. 小結
          • 利用環境差異讓元素快速獲得視覺焦點;
          • 利用經驗差異使用戶記住特殊的時間點;
          • 一頁中不能做太多差異化設計,得做到關鍵的元素上。

          蔡格尼克記憶效應

          1. 簡介說明

          理論表述

          人們對未完成任務的記憶比已完成的更深刻。

          理論背景

          Bluma Wulfovna Zeigarnik,前蘇聯心理學家和精神病理學家。她的導師首先注意到了餐廳服務員能夠很好地記住未付賬單,但是卻無法記住已付賬單的更多細節,針對這種現象,她進行了更加深入的研究。在研究中,她發現了人存在一種天生的,做事有始有終的驅動力,這種驅動力使得人們對還沒有完成的任務念念不忘,而對已經做完的任務印象不深。

          蔡格尼克效應被用于證明格式塔現象不僅在感知中普遍存在,在認知中也是如此。勒溫的場論給出了一種解釋:一項任務被啟動之后人會形成一種處于緊張狀態的場,這會增強對所有與該任務相關信息的認知;任務完成后緊張的狀態就會得到緩解。

          注:勒溫的場論(Lewin’s Field Theory)是格式塔心理學的一條分支,該理論受現代物理學場論的影響頗深,認為人在認知過程中大腦會形成一種場,這個場影響著人的感官信息的處理。

          2. 設計案例

          對未顯示完全的信息設置「懸念」

          在文字較多的組件中我們時常能看到這樣的一個符號出現:「…」,這個符號用于表示文字信息未顯示完全,點開可以看到完整的信息。

          案例1:新草、bilibili

          就是這個小小的符號,時刻提醒著我們當前所顯示的信息并不完整,吸引著我們點開它繼續看下去,旁邊還伴隨著「全部」、「展開」等詞都是為了強化這一特征。

          當然,不止如此,Web 端也會出現文章顯示不完全的情況。

          案例2:知乎、簡書 web 版

          通過這種方式,激發用戶繼續往后看,產生把文章完整看結束的驅動力。

          提醒用戶任務還未完成

          如果一個任務存在多個步驟,那么在任務結束之前應該用某種形式(比如進度條)提醒用戶任務還沒完成,這能夠激發用戶完成任務的欲望。

          案例3:多鄰國

          在選擇和測試過程中,頂部都會出現一條進度條清晰地表達著目前任務還沒完成,進行到了哪一步。在這樣的提示之下,用戶會有更大的動力去完成整個任務流程。

          有效的任務激勵

          越來越多的應用(尤其是技能學習類應用)開始對學習進程進行更細致的任務分解,然后利用蔡格尼克效應的影響對用戶的學習進程進行激勵。

          案例4:Drops

          在任務進行中始終展示任務的完成進度,任務完成之后會有對應的完成提示,并且可以獲得勛章/成就之類的小物件兒。也包括很多番茄類應用、習慣養成類應用,都會有類似的設計,比如 Eggzy、Forest、美妙激勵等等,都是通過這種方式激勵用戶完成自己的目標的。我們可以從中看到蔡格尼克記憶效應發揮著不可或缺的作用,正是我們追求有始有終的驅動力,在進度條的提醒下才能一步步完成目標任務。

          3. 注意事項

          注意點1:任務已完成同樣需要提醒

          另一方面,已完成的任務同樣需要給予用戶相應的提示,不然用戶會感到壓力,會困惑自己到底有沒有做完這件事,這樣緊張的情緒將會一直存在,而緊張過后就是不安和不信任。

          反面案例1:起點任務結束沒有反饋

          起點的新手任務是我最近遇到的一件特糟心的事兒。我明明已經完成了「添加一部作品到書架」的操作卻沒有任何完成的提示,甚至我不知道自己究竟有沒有完成。明明做完了,卻依然顯示著「去完成」,是還有隱藏條件沒做到?還是我加的那本書不算?還是必須要兩個任務一起做完才算完成?還是我沒氪金不讓我完成?還是純粹的 bug?我不知道,用戶不知道,或許只有產品團隊的人才知道。

          所以,如果已完成的任務沒有給予用戶合理的提示或者反饋,這樣的體驗是很差的。

          注意點2:避免過分強迫

          過長的進度條會給人形成壓迫,進度極其緩慢的任務,或者長時間完不成一項任務會讓用戶產生挫敗感,對完成整個任務來說尤為不利。

          反面案例2:百詞斬讓人絕望的進度條

          192/6270,相信這個進度不僅僅是讓我,讓所有看到的人都感到窒息和絕望。我并不是在為我的拖延癥找借口。我想表達的是,這種超長的進度條和超緩慢的任務進度,每天 50 個單詞也就是進度條每天推進 0.8%,不足 1%,對用戶形成的壓力是巨大的,過長的任務周期也會讓用戶快速失去信心。

          4. 小結
          • 利用「未完成」的可視化意象對用戶形成激勵;
          • 已完成的任務同樣需要提示;
          • 拆分任務進度,避免形成過分強迫。

          騰訊頂尖設計團隊總結的 2019 – 2020 設計趨勢:圖形篇

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          為了和大家分享關于設計趨勢的見解,ISUX 研究了 2019 年至 2020 年的設計趨勢。沒有必要去遵循年度設計趨勢報告,但是否意識到這一趨勢,對設計師來講卻非常重要。首先,我們總結了平面設計的總體趨勢,同時也研究了從 Zepeto app 和 Memoji 開始的,最近擴展出來的 IP 形象設計和角色設計趨勢。

          在本文中,我們想分享 ISUX 設計趨勢報告的第一部分「圖形設計趨勢」。在這一部分里,我們展示了當下各種品牌和動態圖形的案例,總結了 12 個值得注意的平面設計趨勢。

          強大和可變的排版

          排版一直是設計的重要元素,也是傳達品牌強烈信息的手段。從去年開始,粗大的無襯線字體和強有力的排版被應用到許多品牌設計當中,這使得它成為平面設計趨勢的一部分。此外,也有越來越多的品牌采用動態和反映了 3D 趨勢的三維字體版式設計。

          1. 動力學排版海報

          △ @Andrei Robu

          這張動態排版海報不是簡單地放置圖形和文字,而是將移動的 3D 文字放在固定的圖形上,傳達新的視覺印象。這些圖形主要通過 SNS 以短循環視頻的形式共享。

          2. Uber 品牌識別

          △ @Wolffolins

          Uber 開發了一種無襯線字體用于品牌 logo 的再設計,并將其貫穿于整個品牌系統。采用了這些品牌字體的動態海報,更為有力地傳達出 Uber 的品牌信息。

          3. Squarespace 品牌識別

          △ @Dia studio

          Dia studio 常將動態文字應?于品牌項?,「Squarespace」是其代表作品之一。

          4. FAD 視覺圖形

          △ @Practica Studio

          以 3D 形態傳遞活動信息的版面設計,就像禮品包裝一樣。這種循環的 GIF 圖也作為品牌主圖形被運用。

          5. 韓國女性耐克運動廣告

          △ @Wieden&Kennedy Tokyo

          韓國藝人支持女性主觀活動的耐克運動廣告,也采用了大膽的哥特式字體。這些由 Guteform 設計工作室設計的字體有基本的延展形式,同時有一個系統能延展成更為寬大的形式以適配媒體的比例。這種動態化的強烈的排版傳遞了活動信息,和其他設計元素的互動,最大限度地發揮了圖形效果。

          鮮明的顏色和漸變

          隨著 Instagram 用彩色漸變作為品牌色,漸變趨勢已經持續好幾年。最近品牌,UI 和包裝的圖形設計都采用明亮而強烈的對比色,這種趨勢不僅應用于設計,也應用于攝影。強烈的色彩組合,夢幻的色調和彩色漸變有望應用于 2019 年的整體設計。

          1. APP 圖標設計

          △ 越來越多的手機 APP 圖標使用漸變色

          最近,許多移動應用程序在其圖標設計上應用了彩色漸變。

          2. 歐洲體育 – 2018 平昌冬奧會品牌識別

          △ @DixonBaxi

          歐洲體育臺 2018 年平昌冬奧會的轉播也將強對比和漸變色運用于多數場景中,包括標志、圖形和攝影。熒光圖形和深?背景的對比,尤為深刻地凸顯了冬季運動的感覺。

          3. 籃球永遠品牌識別

          △ @Notreal

          NBA 新聞廣播公司品牌重塑項目所使用的,諸如彩色漸變和大膽排版的設計方法,也反映了的趨勢。他們創作了一個系統,通過各種顏色,字體和布局的應用,可以產生各種圖形輸出。

          4. 明日之子品牌識別

          △ @Plus X

          騰訊視頻和哇唧唧哇聯合出品的選秀節目明日之子,用多種漸變色圓形表達不同選手的才華。隨著節目的進行,圖形主題也會隨選手的變化而變化。

          不對稱布局

          與過去基于固定網格系統的布局相比,最近越來越趨于使用僅顯示圖像一部分的非對稱布局。雖然好像只顯示整個圖像的一部分,設計師卻可以在大系統中無限延展每個圖形。你可以認為平衡被打破了,設計師卻可以更加自由地應用圖形元素,呈現更強烈的視覺印象,還可以有很酷的圖形組成。

          1. 平面海報設計

          △ @Vasjen Katro

          設計了各種各樣圖形的 Vasjen Katro,不斷嘗試的形狀,顏色和布局也反映了的趨勢,特別是不對稱和開放式布局。

          2. Easy Peasy 品牌識別

          △ @CFC

          Easy Peasy 是韓國著名化妝品公司 Amore 推出的獨立化妝品品牌,以品牌關鍵詞輕松、活躍、有趣和大膽為基礎,嘗試給用戶更加簡單和親切的感覺。品牌用看似自由的手繪波浪線貫穿于整個圖形設計,打造不對稱之美,展現了自由和親近的形象。

          不斷演化的識別度

          移動圖標已成為趨勢很多年了,現在應用交互元素的品牌案例也很多。比起強而有力,靈活而簡單,能隨內容做出響應和更改的交互圖標儼然已成為一種新的趨勢。

          1. 國際光影藝術節品牌識別

          △ @George&Harrison

          這是交互圖標的其中一個案例,用簡單的方形作為基礎,延展出各種各樣的形狀和圖案。這些基本元素保持了簡單和最大化的交互式圖像效果。

          2. SM 娛樂品牌識別

          △ @CFC

          韓國最大娛樂公司之?,SM 娛樂開發了一種新的品牌標識來反映其不斷擴展的業務。它將基本圓形改變成了不同形狀與小號和中號產生關聯。靈活的符號和各種顏色的圓形圖案是 SM 娛樂視覺識別的核心。

          3. 第 59 屆塞薩洛尼基國際電影節品牌識別

          △ @Beetroot Design

          這是電影節一個有趣的識別案例,用卷軸纏繞的圖像代替尋常的電影節標志。它不是固定的,而是復雜紊亂的,以復雜的方式排列各種不同的顏?和圖形,表達了電影節的目的──通過電影傳達多種多樣的故事和情感。

          4. 第 6 屆廣州三年展品牌識別

          △ @Another Design

          傳遞展覽核心信息,反復復制到三維空間的基本矩形,顯示了展覽的特征。在整個展廳中,你可以看到它以多種變動的形態被應用,同時也以不同的形狀被運用到各式各樣的場景中。

          3D 中的高端紋理

          3D 趨勢如此流行,以至于在平面設計趨勢中也不得不討論它。當下有很多的 3D 圖像嘗試用復雜的紋理給大眾展示生動逼真和新鮮感十足的印象。通過在三維幾何形態中,添加逼真的紋理,創造在現實中不可能存在的圖形,人們正在定義一種新的現實主義。

          1. 3D 插畫

          △ @George Stoyanov

          George Stoyanov 通過組合各種幾何形態來表達形狀之美。這種視覺嘗試很有意思,因為它很難在現實中制作。

          2. Adobe Think Tank 視覺圖形

          △ @Omar aqil design

          這張圖像由不同形狀,紋理和顏色的幾何物體設計而成,表達了 Adobe Think Tank 包含各種主題論壇的品牌特征。

          3. 現代「超級消費者」品牌視頻

          △ @Universal everything

          將各種各樣的材料和顏色運用到人類行走的形狀當中,傳遞出一種非現實和新鮮感十足的視覺印象。

          4. 耐克PG3「舒適體驗」廣告

          △ @GRIF

          用柔軟的毛皮材料營造耐克的主要感覺──舒適感,非現實的圖形里有著生動的質感,讓人耳目一新。

          流體和液體形狀

          使用有機圖形并不是一種新的潮流,但我們發現今年也有大量的圖形使用水和油等液體來表達效果。它有時被用作品牌的主圖形,你可以在 3D 短動態圖形中明顯地感受到這種傾向。這種具有強烈色彩和漸變的有機形狀,傳達出一種精致而夢幻的感覺。

          1. 有機形態的 3D 視頻

          △ @cmttat

          有機形態通常以 3D 形式被應用,并且廣泛應用于 SNS 共享的短視頻作品中。今年尤其有很多透明質感的案例,這些透明材質運用各種顏色,使色彩搭配產生變化,營造出神秘的氣氛。

          2. 孔雀學會 2018 品牌識別

          △ @Irradie

          將明亮多彩的漸變色應用于有機形態,這些圖像表達了巴黎電子音樂節的特征。

          定制插畫和角色設計

          各式各樣的平面插畫曾經退出過潮流,但現在已經成為一種強烈的設計趨勢。很多品牌都通過聘請知名插畫家的方式,用平面插畫給大眾新的印象。去年以來,除了 2D,3D 角色插畫也成為一種趨勢被應用到越來越多的品牌設計當中。

          1. Uber 品牌插畫

          △ @Leo Natsume

          運用于尤伯杯品牌新形象的插畫,是其簡潔有序品牌系統中有趣的一部分。

          2. Spotify「音樂與你同在」插畫

          △ @Circus

          這是 Spotify 運用了 2D 插畫的品牌視頻。手繪質感,色彩簡單,人形的四肢都很大是最近的插畫趨勢。

          3. Belif 品牌插圖

          △ @Superfiction

          這是基于三維角色的 2D 圖案設計示例,運用于包裝設計和品牌視頻。

          等距

          等距設計是一種將二維圖形繪制成三維的方法,最近已成為一種趨勢,在圖形和動畫視頻中被廣泛應用。許多設計師通過運用這種技術,在一個框架中顯示整個圖形,創造有趣和獨特的氛圍,呈現出一種全新的視覺印象。和去年一樣,等距設計在今年似乎也會越來越流行。

          1. 等距插畫

          △ @Mohamed Samir

          經常使用等距技術和彩色漸變的插畫家 Mohamed Samir 設計了一系列富有趣味性的海報。

          2. 等距視頻

          △ @Matthieu BRACCINI、@Panic Studio

          將大物體變成微小模型的等距設計方法能給人留下印象,最近可以看到很多運用了這種方法后,屏幕變得更加特別和有趣的案例。

          混合媒介

          結合不同媒介的各種圖形,創建有趣的效果是過去常見的一種方式。最近,結合大膽色彩,逼真照片和 3D 圖像給大眾新鮮感受的案例也很多。含有扁平化元素的真實圖片和視頻是 2019 的主要趨勢之一。

          1. 3D視頻+2D圖形

          △ @Sergio Fuego、@giantantstagram

          當 2D 和 3D 圖像組合在一起,立體效果可以更加獨特和突出。這是使用了此方法的優秀視頻案例。

          2. 真人實拍視頻+2D插畫

          △ @+CRUZ

          匡威活動視頻是一個很好地混合了拍攝視頻和 2D 圖形的案例。

          3. 真人實拍視頻+發光涂鴉動畫

          △ @blottermedia、@jamiethraves

          在真人視頻中添加發光的涂鴉動畫,可以使視頻更具動態性和趣味性。當下,SNS 平臺上越來越多舞者和歌手的視頻都使用這種效果。

          4. 運動 3D 的 2D 插畫視頻

          △ @phellaz、@blublustudios

          有很多作品很難知道它是 2D 還是 3D。用 3D 表達物體運動,而不是簡單地使用 2D 圖形,這種視頻能傳達一種新的視覺感受。

          短而無縫的動畫

          當通過 SNS 共享圖形圖像變得非常普遍時,短小和重復的動態圖形也變得很易見。logo、2D 插畫、3D 圖像和各種各樣的圖形都以短循環動畫的形式共享。

          1. 2D 短動畫

          △ @motionmarkus

          這些短視頻通過在簡單的扁平插畫里重復使用短動作,傳達了一種獨特而有趣的形象。

          2. 3D 短視頻

          △ @arbenl1berateme

          由于 3D 是主要趨勢,小而重復的 3D 圖像也值得注意。添加 3D 真實紋理和效果,可以帶來獨特的視覺感受。

          AR/VR

          AR 和 VR 技術的發展,對平面和多媒體的設計趨勢產生了很大的影響。這些新技術使人們對品牌有更加立體的體驗。

          1. Le Graphisme Augmente 圖形海報

          △ @Laura Normand

          盡管是印刷海報,它也允許人們通過印刷材料使得 3D、AR 技術獲得交互式體驗。印刷海報只包含簡單的幾何圖形和極小的信息,但當你通過手機查看時,將獲得更多的信息和看到立體的形狀。

          2. Apple Music x Memoji 廣告

          △ @Apple

          Apple 使用基于 AR 技術的 memoji 來推廣 Apple 音樂。著名藝術家如 Ariana Grande 推出了他們的歌曲,通過這支廣告,Apple 一起宣傳了 Apple Music 和 memoji。

          3. Nike:上海 Never Done 運動店鋪網站

          △ @AKQA

          上海耐克通過 AR 技術實現 360° 網上零售的項目,可以讓消費者根據運動的出汗量來進行購買和體驗服務。

          4. 奧迪 Quattro Coaster 廣告

          △ @POL

          這是奧迪利用 AR 技術的項目,它能讓消費者將汽車從銀幕上帶到自己的位置,從而積極體驗開車的感覺。

          5. 2018 年英雄聯盟全球總決賽開幕式

          △ @League of Legends

          2018 年英雄聯盟的開幕舞臺利用 AR 技術,使演唱 POP/Stars 的真人歌手和游戲里 K/DA 角色一起同臺演出。這些被實時跟蹤的角色,在實際舞臺上帶來了真實的表演效果。

          新復古

          新復古,用現代感覺詮釋復古,已成為一種新趨勢。新復古是一個結合了「新」和「復古」的詞,是對過去懷舊的現代詮釋,不僅是設計,在時尚、建筑、流行文化等各領域都是一種新趨勢。

          1. 復古風格視頻

          △ @dennybusyet  @thekidzzzzz

          流行于 80 年代和 90 年代的電子游戲,和好萊塢電影的復古圖像與視頻,被重新詮釋后,再一次流行起來。

          2. Fritz Coffee Company 公司品牌識別

          △ @Jo In Hyuk

          韓國著名咖啡品牌,Firtz Coffee 創造了的,具有復古 logo 和圖形的品牌標識。

          結語

          趨勢不會朝一個方向發展,它可以擴展成各種各樣的方式,就像我們看到的反映了趨勢的 3D,AR/VR 技術也包含了復古風格一樣。我們希望這些不同的趨勢能以新的方式被應用,從而創造出新穎而有趣的設計。

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

          讓設計更有說服力的20條經典原則:多爾蒂門檻

          資深UI設計者

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          簡介說明

          1. 原理表述

          系統需要在 400ms 內對使用者的操作做出響應,這樣才能夠讓使用者保持專注,并提高生產效率。

          2. 實驗背景

          上世紀 70 年代后期,計算機研究人員依然認為計算機可以花費兩秒的時間對使用者的操作做出反饋,因為他們認為人們大概正好需要兩秒時間來決定下一步的操作,所以 2s(2000ms)一度成為了當年計算機響應時間的標準值。直到 1979 年計算機的算力開始大幅提升,也有了足夠的能力在 2000ms 內做出響應,這時 IBM 的研究員 Walter Doherty 進行了一系列研究來評估算力的增長對生產力的影響。

          研究結果表明,計算機的響應速度直接影響了使用者做出下一個決定所要花費的時間(這個時間被稱為用戶響應時間),換句話說,計算機相應的時間越長,用戶就要花費越多的時間來思考和決定下一步的操作。

          上面這張表格充分說明了這一觀點,橫縱坐標分別為用戶響應時間和系統響應時間,我們可以看到系統響應時間如果從之前的 2000ms 降低到 300ms ,使用者作出下一步指令所需要的時間就能夠縮短 5s 以上。Doherty 認為人們會將工作需要的一系列操作步驟存儲在短時記憶之內,如果系統響應時間太長,就會打斷人們的短時記憶,換句話說,思路都不連貫了。

          不僅如此,Doherty 還認為響應速度低于 400ms 的系統或者程序,會讓人上癮。放在當下的環境來看,這當然只是一句比較夸張的話,但是結論是需要我們重視的,程序的響應時間,務必在 400ms 之內。

          設計案例

          1. 響應時間的多爾蒂閾值

          要說「多爾蒂門檻」帶給我們的啟示,上一節最后一句已經表達得足夠清楚:系統或程序的響應時間小于 400ms 。為了讓讀者有更加直觀得感受,我們先來一組小動畫感受一下高響應延遲有多讓人抓狂,快速響應又多么讓人舒服:

          應用案例 1:模擬延遲效果

          注:請務必挨個觀察,不要看整體,看單個的效果。

          從動畫中可以感受到,50ms、200ms 還算可以讓人接受,當響應時間達到 600ms 時已經讓人有些不耐煩,而達到 1000ms 時會讓人不自覺多點幾下,2000ms 時我手機已經被我砸了。

          2. 另一個因素不能忽視

          在如今的計算機算力之下,響應時間輕輕松松便能夠達到多爾蒂門檻的閾值,甚至能夠遠比 400ms 更小,但是這就夠了嗎?「多爾蒂門檻」說到底只是給出了響應時間的上限,400ms 的響應時間或許在多爾蒂那個時代確實能夠大幅提升操作員的操作效率從而產出更大的經濟效益(比如銀行系統),但是現在互聯網已經越發成熟,不少公司的用戶體驗研究者都已經意識到,系統響應時間已然不是影響用戶響應時間的唯一因素了,另一個因素是過渡動畫的持續時間。

          就像谷歌在 Material Design 中明確規定了過渡動畫的 Speed 這一項,這是為什么呢?用戶體驗是一門關于情感和邏輯的學問,而不僅僅是一個統計數字就能解釋的,讓程序對某一操作的反饋時間(包括響應+動畫)符合用戶對該操作的預期才是讓用戶「上癮」的關鍵。

          應用案例 2:iOS 中的動畫

          所以,哪怕我們的手機、電腦已經可以做到在 100ms 之內做出響應,快到完全有能力在用戶反應不過來的情況下給出反饋和結果,但是這樣是不夠的,我們依然需要「合適時長的」動畫作為計算機反饋和大腦反應之間的潤滑劑,而不至于讓程序使用起來太「干澀」,也不至于讓大腦一直處于應激反應的階段而感到疲勞。

          3. 有時不可避免高延遲

          在真實世界中我們使用應用時會發現,有時候響應速度沒辦法做到如此迅捷快速,比如 APP 啟動時;還有時候即便系統可以響應,網絡卻不行。網絡并不能在用戶操作的一瞬間就把所有需要的資源都下載好,用戶必須等待幾秒的時間,那么這時候就需要考慮如何減少用戶等待的焦灼感,優化等待的體驗。

          比如有趣的加載動畫、閃屏頁等,都算是解決辦法。

          應用案例 3:Netflix 的啟動動畫以及新草的加載動畫

          注意事項

          動畫的持續時間應當在適當的區間中取到最短,而不能太突然或太緩慢。

          反面案例 1:過快或過慢的動畫

          在現實的上線 APP 中,也會有故意把動畫做得很慢的例子,這比較影響操作的流暢性。

          反面案例 2:Eggzy

          左右滑動的時候動畫效果在實際體驗中非常慢,對于想要進行連續滑動操作的用戶(即便這樣的使用場景不多),已經慢得無法忍受,有一種「不跟手」的感覺,這么慢的動畫已經很輕易就能讓用戶感受到自己在等它了。

          仔細瀏覽 Material Design 中給出的案例便可以發現,動畫的持續時間大致可以參照以下幾條規律去嘗試:

          • 動畫元素越小、動畫幅度越小,持續時間就越短。
          • 復雜的動畫比簡單的動畫持續時間更長。
          • 一個頁面出現的動畫總是比消失的稍稍長一點(相差大致50ms)。

          總結







          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合