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

          首頁

          3D與UI結合的設計探索

          純純

          關于 Big Sur 的新圖標的討論很多,很多都在激烈爭論。人們對蘋果公司沒有將完全扁平設計引入 Mac 感到松了一口氣,但分歧并未停止。有些人認為這引領一種新的圖標表現方式,而有些人則認為這是丑到了天際。



          但蘋果的設計就是這樣,不管你你喜不喜歡,過一段時間他總會流行起來。就像iPhone11剛面世時,背面的攝像頭組被無數人吐槽一樣,而現在這個設計已經成了高端機的標板。


          大家還能想起來UI扁平化設計已經流行了多少年了嗎?

          從2013年6月11日蘋果發布iOS7算起,現在已經將近8年了,這8年時間扁平化像颶風一般席卷了整個UI設計圈,一夜間幾乎所有的APP UI都被拍扁了。




          其中以Instagram的換標作為扁平盛行時代的里程碑



          但扁平化設計的確已經一統江湖太久了,人們似乎已經有點厭倦了。其實設計風格就是這樣,并沒有絕對的好與不好,只要審美不疲勞,就可以繼續流行下去,至于流行多久我們經常會用一個詞去形容---耐看度。

          扁平化帶給我們的是畫面的輕盈和設計的高效率,但是缺點也是明顯的,場景表現過于單一的問題,設計感體現較為有限,于是很多設計師都在嘗試用新的設計風格替代或者進化現在的扁平化設計風格,今天我們就來探討一下新擬物背景下3D與平面的結合設計,能在UI中擦出什么樣的火花。


          2014年我的作品-Cache 

          https://www.zcool.com.cn/work/ZMjY1OTEwMA==.html


          現在這樣的風格會被我們稱之為重度擬物風格,他不好看了?技術落后了嗎?當然不是!只是目前不流行了!

          他的特點是強調光影對比與物理質感,色彩都會比較偏“暗”,而且伴隨設計的往往是難和慢!刻畫一個細節需要很久,在強調設計效率組件化的今天,這種費時又難學的設計方法必然不會成為主流。


          當前的UI流行趨勢是強調高飽和的色彩搭配(在沒有光影細節之下也只有色彩可以玩了),這種風格明顯也不符合趨勢,被“淘汰”也就難免了。


          從設計角度上解析,圖標主要是由四方面構成:構圖+光影+色彩+紋理

          而擬物風格圖標在這四方面更加強調構圖、光影和紋理,而色彩則是更多去搭配紋理質感,所以你看到多數擬物風格圖標在質感上很棒,但是色彩卻沒有那么豐富。




          說到新的擬物風格,這只是一個概念,也有稱之為輕擬物,輕偏平,這里并沒有通用的稱呼和預設的設計方法,一切的UI設計風格都是為產品本身服務,如果新的設計風格能讓產品整體體驗得到“提升”,哪怕這種提升只是成功獲取到了用戶的注意力,那這個設計就是有價值的。



          所以當下如果你的產品中想要吸引目光就要有點與眾不同的東西,要么是獨門的功能,要么就是吸晴的設計。
          顯然扁平的彩色圖標現在已經達不到這個效果了,而以前的擬物又顯得有點過時,在這種時代背景下,新的風格必然就會被碰撞出來。


          于是乎我們就會看到以下的一些大廠“創新”,你不止能看到輕擬物設計,還能看到“實物”設計......

          不得不說,各位設計師們還真是拼了...


          “哪怕這種提升只是成功獲取到了用戶的注意力,那這個設計就是有價值的?!睕]毛病!各位加油!


          當然蘋果BigSur帶給我們的圖標設計創新更加有趨勢意義,這種3D+平面的設計組合方法更加能給我們一些設計啟迪和思考,并且這種3D圖標與之前的擬物風格有著明顯的視覺區別

          我用3D重構了一個計算器icon,以此為例來進行分解,如下:

          與2D設計方法設計圖標一致,都是先勾畫圖形(建模),然后填色、加材質和燈光,但不同的是在3D環境下,這一切都比2D環境下簡單了,而且視覺效果更佳,整體畫面感更佳立體,質感更加飽滿,并且根據渲染器的參數調節和材質質感的不同,即使是在同一模型下,也能制造出很多種不同的視覺體驗。



          圖標背板的選擇上,由于選擇了3D作為主體表現,3D背板過于搶視線,圖標為了突出主體而非背景,建議使用2D平面背板與3D前景圖標進行結合。

          3D設計圖標的確有一些天然的優勢,特別是在質感和光感的表達準確度上,是絕對超過2D的。
          但是2D圖標在一些風格的設計也是很難替代的,比如線性圖標和漸變風格圖標。




          3D設計的確可以提升UI整體的視覺氛圍,并且現在在一些APP中已經可以看到小范圍3D案例了(比如支付寶),但是多是以插畫的形式出現,其實與產品UI還是有一定距離的。

          未來3D設計一定會是UI中大展身手,但是目前的常見的3D設計軟件實在是太龐大了,我與許多3D行業的同行聊天的時候,大家普遍的認知是現在的3D軟件(包括C4D)的實際最佳場景依然是動畫設計,UI的中的3D屬于非常輕量級的,用現在主流的3D設計軟件做UI應用案例,有點用巡航導彈打蚊子的感覺,而且這個蚊子還是距離一米以內。這有點像當年的PS來做UI,雖然可以完成但是效率不高,學習曲線也高,于是Sketch和Figma這樣的產品順理成章的取代了PS在UI界的地位。


          當然趨勢不可避免,效率也會提升,且方法總是有的,降低門檻,提升效率一直是我們的追求!

          原文地址:站酷
          作者:殘酷de樂章

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          超全!B端通用界面設計法則全方位科普!

          周周


          很多產品經理和設計師在設計 B 端產品界面的時候不知道該怎么辦,今天筆者給大家匯總了一些 B 端典型界面及其設計原則,幫助大家從容應對界面設計,不再不知所措。

          Dashboard

          Dashboard 頁通常作為產品的首頁出現,產品內各種重要的數據和信息都會展現在 Dashboard 上。用戶可以通過點擊 Dashboard 上的卡片或卡片上某條數據,快速鏈接到詳情,這大大縮短了用戶獲取信息的路徑。產品團隊也可以通過 Dashboard 頁,向用戶傳遞產品迭代、運營活動等內容。

          1. 設計原則

          模塊獨立

          Dashboard 是由承載不同內容的卡片組成的,每塊卡片的內容都要獨立,不該交叉。

          有效統計

          Dashboard 上所呈現的數據最重要的就是該數據是否為用戶真實所需,如果統計數據不對用戶產生任何價值,那還不如不統計,否則會干擾用戶。

          短路徑導航

          了解用戶需要使用 Dashboard 的核心目標,為用戶通過 Dashboard 達到數據詳情頁提供最短的路徑導航

          2. 工作臺

          使用場景

          將用戶需要待辦的事項、事項處理的進度等都完整的展示出來,方便用戶隨時查看,提升用戶的工作效率。

          核心功能

          核心統計數據、待辦任務、快捷入口、通知公告等。

          設計建議

          • 展示與使用角色日常工作相關模塊,并且將重要模塊放在首屏。
          • 總模塊數量盡量控制在 59 個。
          • 不同的角色需求不同,應提供基于角色的差異化視圖。

          超全!B端通用界面設計法則全方位科普!

          3. 新手引導

          使用場景

          當新用戶第一次使用產品時,為了減少用戶的困難和快速完成用戶的任務,新手引導頁可以將核心操作鏈路展現給用戶。

          核心功能

          產品介紹、核心功能使用手冊、相關內容指引。

          設計建議

          • 引導步驟盡量控制在 35 步。
          • 引導語盡量簡短并闡明要義。
          • 可以添加視頻學習窗口,幫助用戶快速上手。

          超全!B端通用界面設計法則全方位科普!

          4. 監控頁

          使用場景

          監控頁是數據可視化頁面中的一種,它通過一系列對數據高度概括的圖表來展現系統的核心指標。指標監控頁的使用者通常是管理者(即決策者),他們需要看到系統整體的運行狀態,監控全局數據,從而調整自己的決策。

          核心功能

          關鍵指標統計。

          設計建議

          • 展示決策者關注的核心指標,并將重要模塊靠前展示。
          • 使用合理的圖表展現數據。
          • 圖表配色要符合數據的特性,例如警示用黃色。
          • 允許用戶可以下鉆查看詳情。

          超全!B端通用界面設計法則全方位科普!

          5. 分析頁

          使用場景

          分析頁也是數據可視化頁面中的一種,它通過對系統多維度的詳細分析來展示系統的情況,從而使使用者可以發現問題,并盡早找出解決辦法。監控頁重在總覽,而分析頁重在明細,因此,分析頁的使用者通常是執行者。

          核心功能

          關鍵指標明細分析。

          設計建議

          • 展示執行者關注的明細指標,并將重要模塊靠前展示。
          • 使用合理的圖表展現數據。
          • 明細數據模塊不宜過多,59 個為宜。

          超全!B端通用界面設計法則全方位科普!

          表格頁

          表格頁可以處理大量的數據條目,同時可以導航至對應數據的詳情頁。在表格頁中,用戶可以查詢自己所需要的數據條目,以及對比數據條目、新增數據條目、刪除數據條目等。

          1. 設計原則

          模塊清晰

          表格頁通常由查詢區、按鈕區、表格區、分頁器等模塊組成,要保證模塊間層次合理與清晰。

          數據格式

          表格頁中最大的模塊為表格區,該區域由列組成,列由數據構成,列中的數據格式展現要符合業務及用戶的需求,例如“星期三”不能表現成“星期 3”。

          數據對齊

          對齊方式合理的數據,有利于用戶定位數據、分析數據。通常數據對齊方式為數值右對齊,文本左對齊,特殊情況居中對齊。

          2. 使用場景

          全表格頁是最常見的產品界面,全表格頁主要由篩選條件、按鈕區、表格區、分頁器組成。表格區是表格頁中的主角,當界面數據只需要一張表呈現的時候,使用全表格頁。

          核心功能

          多字段篩選、操作區、表格區、分頁器。

          設計建議

          • 將重要的字段和用戶使用頻率較高的字段放置在表格靠前的位置。
          • 表格中重要的字段和數據保證讓用戶可以看完整。
          • 表格中的時間、狀態、操作欄等,以及其他業務規定的字段,需保持完整展示。
          • 表格上方的篩選條件一次性展示不宜過多,建議 3-8 個左右。

          超全!B端通用界面設計法則全方位科普!

          3. 左樹右表頁

          使用場景

          左樹右表頁的界面布局基本與全表格頁差不多,只不過其多了一顆左側的樹來幫助用戶導航。

          核心功能

          導航樹、多字段篩選、操作區、表格區、分頁器。

          設計建議

          • 導航樹上的文字盡量展示完整,便于用戶定位信息。
          • 導航樹的層級不可太深,控制在 4 層以內。

          超全!B端通用界面設計法則全方位科普!

          4. 上下表格頁

          使用場景

          上下表格頁是表格嵌套表格幻化過來的,通常上表格為主表,下表格為子表,子表展示了主表中某條數據的詳情。

          核心功能

          多字段篩選、操作區、表格區、分頁器。

          設計建議

          • 主表數據對應的子表數據需要符合邏輯且展現清晰。
          • 若主表和子表均數據量大,則需要都加入篩選條件。

          超全!B端通用界面設計法則全方位科普!

          4. 左右表格頁

          使用場景

          左右表格頁與上下表格頁有異曲同工之妙,左右表格頁通常左表為主表,右表為子表。

          核心功能

          多字段篩選、操作區、表格區、分頁器。

          設計建議

          • 由于表格左右布局,表格列不宜過多,盡量不出現滾動條。
          • 左右表格區分要明顯,保證信息正確歸屬。

          超全!B端通用界面設計法則全方位科普!

          6. 折疊表格頁

          使用場景

          折疊表格頁的出現通常是頁面上表格的信息需要分組,每一張表格展現一類信息。

          核心功能

          分組、操作區、表格區、分頁器。

          設計建議

          • 建議加上分組的標題及描述信息。
          • 每個表格為一個模塊,建議模塊可全部展開與全部折疊。

          超全!B端通用界面設計法則全方位科普!

          表單頁

          表單頁是用于信息添加和錄入的頁面類型,用戶根據系統的要求將必填字段信息填寫完成,從而提交給系統,由系統接收并輸出信息。

          1. 設計原則

          控件合理

          通過選擇合理的數據錄入控件,及通過合理的信息組織形式,幫助用戶可以快速完成數據錄入的任務。

          明確好用

          表單頁面中,每個表單項都要做到自身體驗的明確與好用,例如針對一些有通用值的表單項建議設置默認值,針對必填項要明確標明,針對表單項標題、錯誤提示要明確傳達含義。

          清晰反饋

          表單錄入完后,允許用戶進行返回、取消、清空、保存等操作,并且操作后提供明確的反饋,例如保存成功、保存失敗等。

          2. 基礎表單頁

          使用場景

          表單項較少,表單信息直接平展即可,表單錄入任務簡單且快速。

          核心功能

          表單項、填寫說明、操作按鈕區。

          設計建議

          • 表單項盡量單行縱向排列,引導用戶縱向閱讀。
          • 在界面空間有限時,表單項可多個組合在一行中,進行多列排列,建議不超過 3 列。
          • 表單項對齊方式一致,保證用戶視線流舒適,高效完成數據錄入。
          • 表單整體要保持在用戶合理操作范圍,居左或居中。

          超全!B端通用界面設計法則全方位科普!

          3. 高級表單頁

          使用場景

          高級表單頁通常需要用戶填寫大量的信息,這樣大型而復雜的數據錄入任務需要被拆解為多個部分進行。

          核心功能

          分組/卡片分組、表單項、操作按鈕區。

          設計建議

          • 任務的分組需要有層層遞進關系,而不是無序的分組。
          • 如果任務分組過多,最好不要超過 5 組,在 25 組之間較為合適,可以采用錨點定位的方式來幫助用戶定位信息。

          超全!B端通用界面設計法則全方位科普!

          4. 分步驟表單頁

          使用場景

          當表單填寫有相應的步驟順序時,采用分步驟表單較為合適。

          核心功能

          步驟條、表單項、操作按鈕區。

          設計建議

          • 若步驟間有很明確的順序關系,需在相關位置進行明確的提示。
          • 若有些步驟為非必填,建議也做出合理的展現。
          • 步驟不宜過多,在 25 項為宜。

          超全!B端通用界面設計法則全方位科普!

          5. 帶樹表單頁

          使用場景

          當表單塊歸屬不同的分類時,需要使用帶樹表單頁去處理。

          核心功能

          導航樹、表單項、操作按鈕區。

          設計建議

          • 分類超過 10 項,且分類標題內容較長時,建議使用樹導航。
          • 分類帶有層級時,建議使用樹導航。

          超全!B端通用界面設計法則全方位科普!

          詳情頁

          詳情頁的作用是向用戶展示一個對象的完整信息,它的主要作用是幫助用戶信息瀏覽,同時允許對詳情頁整體的數據或某部分數據發起編輯等操作。

          1. 設計原則

          層次分明

          針對信息較少的詳情,平鋪展示即可;針對信息量大的詳情,需進行合理組織,保證層級分明。

          結構相近

          針對詳情信息的模塊化組織,要求盡量模塊的結構相似,減少復雜性,降低用戶的理解成本。

          2. 基礎詳情頁

          使用場景

          基礎詳情頁信息量較少,信息復雜度低,直接平鋪展示即可。

          核心功能

          詳情信息。

          設計建議

          • 建議呈現在一張卡片中,直接通過標題進行區分。
          • 字段與內容要明顯區分,不可糊在一起。

          超全!B端通用界面設計法則全方位科普!

          3. 高級詳情頁

          使用場景

          高級詳情頁需要展示的內容量較大,且復雜度高,需要拆分為多組來幫助用戶瀏覽信息。

          核心功能

          卡片、分組、詳情信息。

          設計建議

          • 分組維度要合理,保證一個維度講一件事情。
          • 若分組模塊大于 5 項,建議使用錨點定位。

          超全!B端通用界面設計法則全方位科普!

          4. 可編輯詳情頁

          使用場景

          詳情頁中有部分字段由于業務需要,會進行修改。

          核心功能

          詳情信息、可編輯信息。

          設計建議

          • 可編輯字段通常有兩種情況,一種為常顯編輯,一種為點擊編輯。用戶對常顯編輯字段操作時,頁面需要對是否編輯過做出適當反饋。
          • 可編輯樣式盡量統一,減輕用戶認知負擔。

          超全!B端通用界面設計法則全方位科普!

          我們如果能做到對 B 端通用型界面了然于胸,那么在面對用戶需求時才能從容應對,舉一反三。不斷總結和抽象,是我們應對各種需求的不二法寶。




          文章來源:優設網    作者:知果日記


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          2022追波設計流行趨勢

          周周

          為了保證這篇文章的質量,追波年度的每個作品都超過550贊。在此原則下挑選了828件作品,作品總的大小為2.2G


          相比于《2020年追波設計流行趨勢》多出了328件作品。


          總結

          從挑選出的828件作品中,排名前十的作品中9件為B端設計,另一件作品也是B端產品C端化的產物。其中:

          B端界面設計占比476/828,57.4%;

          C端界面設計占比180/828,21.7%;

          視頻動效作品占比223/828,26.9%;


          明眼人都能看出其中的比重關系,B端設計再次大火,為什么是再次?因為B端設計之前火過,只不過沒有趕上一個好的時代,在C端設計風光的十年里而忽略了其存在。隨著C端市場飽和與數字化的浪潮下,實體經濟、ToB 、ToG的產業再次迎來了它的曙光。視頻動效的作品占比也已超過C端界面設計,相信今年視頻動效作品占比還會再次提升。



          追波年度最佳作品

          追波年度最佳作品來自大家最熟悉的UI8團隊中的Tran Mau Tri Tam ?,作者來自越南西貢,最佳作品截止目前355K瀏覽量,2933個贊。


          為什么看似平平無奇的作品卻能獲得追波年度最佳作品呢?既不是C端也不是純B端的作品,更像一個網頁與平面的結合體。如果去掉搜索圖標、分類圖標和按鈕,你可以理解它就是一個平面作品,一個字體加幾何形體構建的作品,為了豐富畫面的層次,讓畫面更加的活潑采用了多彩加幾何色塊,讓標題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標題文字中脫穎而出,這種使用線條突出重要信息的設計也是今年追波設計流行趨勢之一。


          MetroUI是Windows8的界面設計語言,在2010年至2013年間曾經風靡一時,那也是移動互聯網的發展元年,現在國家推行實體經濟、數字化帶動To B 、To G 的發展元年,通過幾何色塊(MetroUI)實現B端產品與C端設計風格的傳承與銜接,你會發現歷史總是驚人的相似。最后背景結合今年最流行的微軟風,毛玻璃的多彩高斯模糊漸變風,年度作品當之無愧。


          最后來看下按鈕的設計,正常的按鈕要么文字加色塊,要么左圖標加右文字,它設計成左文本加右圖標,更加注重信息的可讀性和易讀性,也體現B端設計重功能和交互體驗,視覺點到為止的設計理念。


          下面我們來欣賞年度最佳作品里面的流行趨勢吧。


          易讀性(停頓感)

          字體三原則:可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設計文章,肯定設計文章的內容可讀性更好。易識性是用在字體設計上,不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設計師都息息相關,因為我們都需要編排文本。當我們小時候寫作文時,不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感,更加適合用戶閱讀。


          通過給用戶制作停頓感來增加用戶的易讀性??梢栽谙嚓P聯文本后面添加圖片、表情、圖標來更好的理解文本內容,豐富文本內涵。比如情侶間表達愛意時會輸入文本,“我愛你”、“我Love你”、“我ai你”、“我??你”,哪個更加會有情感共鳴呢?不言而喻,相信你心中已經有答案了。



          曲線

          在標題文字上添加曲線來突出重要文案是2021追波最流行的趨勢之一,第一個設計目的就是突顯文字,其次就是想表現鉛筆真實書寫的感覺。之前很多帶有簽名的設計中,簽字的文本都是手寫體的感覺,手寫體對比電腦的機械字體會帶有一種人文氣息,也會讓兩者之間產生一種對比、矛盾。


          除了突顯文本外,曲線還有視覺引導的作用。通過視覺引導讓用戶按照設計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試,通過真實用戶眼睛瀏覽界面顯示對應的熱點圖。



          多彩高斯漸變風

          多彩高斯漸變風是從色彩的角度來傳達和豐富畫面的,多彩高斯漸變風其實是從制造矛盾到平衡矛盾的過程,多彩漸變多為冷暖對比來制造畫面的沖突,需要控制冷暖畫面的大小來實現平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。


          多彩高斯漸變還可以結合輕擬物、幾何圖形、三維等新的組合方式去創新,給用戶呈現一種更加新穎的視覺表現形式。最后我們還是要回歸到內容上,為了更好的傳達信息需要去設計與內容相匹配的視覺風格。




          B端界面設計


          側邊欄Sidebar

          B端設計的火爆帶動了B端相關模塊設計,更多的人也愿意嘗試B端相關模塊設計,側邊欄作為產品架構中重要的導航系統,好的側邊欄設計能為用戶帶來更好的效率。主流側邊欄都做了展開、收起、拖拽等交互效果,也是受限于PC屏幕為展示更多數據而騰空間。側邊欄主要承擔的功能有導航、分類、自定義篩選、共享、新增等。追波的B端產品設計已經不再是假大空概念設計,而是一套實用美觀可落地的設計。



          儀表盤設計

          儀表盤設計是一個很好的隱喻,想象一下開摩托車或汽車主駕駛前面的屏幕,汽車儀表有燃油表、車速表、里程表、水溫表、轉速表、故障指示燈等。B端類產品后臺界面的儀表盤設計也需要展示一些重要的數據和各種狀態,大體分為側標欄、導航欄、待辦任務、個人信息、報表數據、消息中心、快捷入口等。當然最重要的就是報表數據,團隊收益、任務進度、轉化比例、新增、存量、團隊工作時長等都是老板或領導關心的內容。每個公司業務不同、每個人員權限不同,自定義的儀表盤也各有差異。重要的是突顯數據和業務狀態,需要分層級系統性去思考和設計。



          流程設計

          復雜的事情簡單化,簡單的事情標準化,標準的事情流程化,流程的事情自動化。流程設計是每一個企業核心功能和業務,可自定義的管理流程系統搭建也是B端產品設計的難點,需要對業務高度抽象,讓每一個業務人員可自定義的流程才是好的流程設計。



          B端C化

          B端C化是B端產品設計的視覺表現力慢慢往C端產品設計的視覺靠齊,國內B端產品界面設計視覺水平還有很大的提高空間。除了視覺上的提升外,由于業務的發展,B端產品也開始移動化、智能化,國內主流還是通過小程序、H5來現實B端產品C端化。



          輕代碼化

          輕代碼化是一種低代碼賦能無代碼的方式,彌補無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時,又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發即可如搭積木般快速、靈活地創造屬于你的個性化管理系統,輕松實現多元業務場景的數字化管理。


          輕代碼化將功能進行打包,升級成全局可以用的配置,技術人員配置好后,業務人員在應用編輯時直接選擇使用模版,綁定對應的變量即可使用。




          界面設計技巧


          人文氣息

          為什么人加色塊的組合方式能流行起來?還是B端行業流行帶動的。B端講的更多的是企業對企業。企業對企業除了講行業解決方案外,還需要傳達公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現公司的企業文化。對于一家全球化的公司不同膚色的人物組合在一起,這種人文氣息和價值觀已經就不言而喻了。


          當然企業也需要進行營銷,抓人眼球。幾千年來的遺傳證明了,人的大腦對食物、性、動的東西、人臉和眼睛、危險的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。


          這種風格更適合大公司,國內的一些手機廠商OPPO、VIVO等也會通過手機+背景+人物來體現科技與人文的結合,而對于中小型公司產品差異化和行業解決方案展現應該還是重中之重。



          毛玻璃效果

          毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的順應當下UI扁平化的設計趨勢。蘋果Mac OS Big Sur系統的圖標、界面中運用了大量毛玻璃和半透明元素,界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術-C4D創建彩色玻璃的4個技法”,完全能滿足UI設計師。當然還有一個好消息就是Mac用戶可以享有OC一年免費的使用權,具體安裝購買方法可以上“某寶”就可以輕松搞定,真香。




          輕擬物

          輕擬物這幾年一直流行,在UI設計中趨于穩定的位置。從寫實到扁平再到輕擬物,其實是設計師們一路不斷探索的結果。本質就是光影對形體產生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光(環境光)五個部分的處理。寫實三維的圖標等設計更適用于簡潔的畫面中,扁平等設計更適用于復雜一點的界面中,比如B端產品界面中的功能圖標。輕擬物可使用的范圍更廣,效果更佳。Sketch、Figma軟件對于漸變、高光、投影、高斯模糊處理已經非常簡單且出彩。




          簡潔設計

          簡潔設計遵從了密斯·凡德羅的“少即是多”的設計原則,在B端產品界面中更加需要簡潔設計,我們最熟悉的Sketch軟件界面已經是相當的簡潔了?;氐浆F實當需求功能不斷增加,產品界面的編排如何取舍,如何保證界面的簡潔是設計師需要深度思考的問題?如何與上級溝通?該功能是否可做可不做?是否需要埋點用數據說話?如果只是一味競品有我們就需要有,功能不斷累加只會讓界面越來越重。



          幾何圖形

          幾何圖形和幾何插畫有異曲同工之妙,幾何圖形多為產品界面和宣傳內容的抽象,產品界面的幾何圖形多為占位符形式,加上色彩和幾何色塊讓其成為一個整體。B端產品視覺設計C端化的進程中,幾何圖形、幾何色彩不失為最好的突破口,相信今年追波B端產品的視覺設計一定會更上一個臺階。



          幾何圖形另一個場景化的地方就是品牌,作為一名UI設計師一定會經歷從圖標到幾何圖形到品牌設計的過程,品牌設計的技巧基本還是以幾何圖形為主,至于品牌的內涵需要更深層次的解讀。掌握主流品牌設計的技巧對產品定位、品牌宣傳打下扎實的基礎。



          暗黑設計

          暗黑模式的設計是解決在微弱環境下內容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設備時長增大,如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞,提高在夜間使用的可讀性。


          在設計暗黑主題時,不能為了突顯視覺上的逼格,而去使用高飽和度鮮艷的色彩來突顯界面的品質感。而應該把舒適度、可讀性作為設計的衡量指標。Material Design給出了暗黑主題的設計準則,即正文和背景之間的對比度應至少為15.8:1。按照此標準設計,可讀性都還不錯。這里介紹一個插件“Stark”(Figma、Sketch、XD、Chrome插件)用來測試界面的對比度。



          模塊化(組件化)

          為什么叫模塊化,而不叫組件化,組件化更多的利用原子系統從原子、分子、組織、模版、頁面來快速的搭建界面,但在B端產品設計中基礎組件和業務組件的搭建是以提高工作效率為前提,是否有從0到1搭建B端產品組件的經歷是設計師一生中最寶貴的經驗之一,它能提高設計師的系統化思維、邏輯思維和抽象思維能力


          產品模塊化設計就是將產品分成幾個部分,也就是幾個模塊,每一部分都是具有獨立功能,具有一致的連接接口和一致的輸入、輸出接口的單元,相同種類的模塊在產品族中可以重用和互換,相關模塊的排列組合就可以形成最終的產品。通過模塊的組合配置,就可以創建不同需求的產品,滿足客戶的定制需求 。




          插畫

          插畫作為設計的一大品類,不同的插畫師都有自己擅長的風格,本質是都有自己的個性,但是在產品設計中更多是需要共情、共性來講故事,表達產品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯網產品設計類的插畫風格。設計的本質是舊元素的重新組合,插畫不會過時,而是需要結合當下和產品找到最匹配的設計風格。



          幾何插畫

          幾何插畫算是插畫簡化的一種表現形式,人和物的形態不再寫實,而是抽象成幾何圖形拼湊的感覺,同時保留人物形態的神韻。加上幾何色塊與人物交互形態的表現,傳達出簡潔、科技的現代感。難點還是在人物形態的表現上,平時多練習練習速寫還是很有必要的。



          線面插畫

          線面插畫最近一兩年非常流行,準確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成,用塊面表現人物形態時某些結構會表現不出來,這時候用線條簡單勾勒后,結構就會清晰明了。其次當線面插畫運用在界面上時,可以打破界面純文字或組件化的機械和沉悶感。線面插畫的風格提升畫面熱鬧感的同時,還能保持界面的干凈整潔。




          動效


          微交互

          界面微交互動效會讓用戶的體驗更加精致到位。想要打造優秀的產品設計,微交互和動效設計是繞不開的,UI界面設計通過微交互反饋告知用戶當前正在發生的事情,所處的狀態。細微的動效更能調動用戶情緒,取悅用戶。C端產品微交互和動效已經很成熟了,一部分功勞來自iOS系統原生自帶的效果。B端產品的微交互和動效更多還是在學習海外產品,還需要給前端工程師灌輸微交互和動效的設計價值,共同打造產品體驗細節。



          Mg動畫

          Mg動畫需要很好的節奏感、韻律,每一個場景動畫都需要其中的元素進行連接變化,讓轉場動畫更加自然,MG人物動畫通過點線面的動效變化讓畫面更加有趣、自然,通過粒子效果讓特定場景無限循環會讓人更加印象深刻。




          三維


          三維圖標

          MacOS Big Sur系統圖標的更新帶動了三維圖標的流行,三維圖標的應該場景還是需要有較大留白空間的界面,因為三維圖標太小后就看不到更多細節。三維圖標感覺又回到了擬物化和扁平化哪個更好的問題上?設計師應該保持開放多元的視角。設計本身也在不斷的演化融合,存在即合理。合適最重要,它們都會有適合自己的場景和設計價值。



          輕三維

          為什么輕三維在界面設計中占有一席之位?一個是設計師不斷追求差異化的產物。另一個是更好的表現內容,并與用戶產生共鳴。輕三維的基礎模型都是來自手機界面中的各種元素,比如組件、開關、按鈕、占位符、圖表、幾何圖形、圖標、進度條等,這些都是用戶日常使用系統軟件常見的元素,通過簡單的幾何形體建?!驘艄狻硬馁|—渲染—PS調色。難度系數不大但效果很出彩。第一個出彩點是模型帶有厚度的倒角,結合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點就是材質自由添加,特別是當下流行的毛玻璃效果,玻璃材質渲染效果更佳。第三個出彩點就是可以加局部燈光,局部的漸變色或環境光更佳出彩。



          P4D(PS+C4D)

          P4D是PS加C4D的設計表現技法,也是視覺設計的最后一個環節,通過PS對C4D的渲染圖片進行調色,利用PS的調色技巧可以很好的解決C4D打燈光的瑕疵,還可以利用PS強大的合成功能,將渲染圖片與圖片素材進行合成,來表現畫面的視覺度,當然三維軟件比較難實現的水、粒子、煙花等效果,也可以通過PS的后期合成來實現,這也是P4D的強大之處。



          卡通IP

          卡通IP設計最近三四年技術的迭代已經慢慢的走上成熟,卡通IP也從傳統的純PS手繪技法,轉到C4D建?!巧壎ā狹D衣服制作—OC渲染—PS(靜態)/AE(動態)調色。


          卡通IP火的本質更適合做營銷,相比于品牌或Slogan,卡通IP具有親和力和畫面感。隨著各種手辦行業大熱,受互聯網大廠影響下,卡通IP已經是互聯網B輪以上公司的標配了。如果團隊中沒有這樣能力的人,也可以通過繪制好二維,一套三維可以選擇外包完成。


          對于UI設計師來說學習是有成本的,暫時并不是必備技能,如果喜歡完全可以學習,從設計差異化的角度來看三維視覺確實有一定的競爭力。



          三維動畫

          C4D三維場景動畫通過構建實物和場景模擬生活中的現實場景,會讓用戶體驗真實感,三維軟件制作動效的最大優勢是通過動力學和表達式來模擬真實感,未來在AR/VR領域會有更好的發展。相對于界面動效學習成本難度也相對較大。在三維動畫中C4D軟件對于域、動力學還是有一定的優勢。



          總結

          上一次寫追波流行趨勢還是兩年前了,通過兩年的沉淀對趨勢流行有了更深的認知。十年的互聯網行業風風火火,隨著最近的互聯網裁員潮大家也慢慢的進入到反思層,客觀的看待和理解這個真實的世界,曾經的流行趨勢也需要慢慢的沉淀下來。


          存在即合理,趨勢流行稍縱即逝,注定是不長久的,只有大浪淘沙歷史遺留下來的風格才能更長久。但我們也不能不去關注,因為哪有什么所謂的創新,只不過是舊元素的重新組合,并符合當下這個時代人的審美需求。香奈兒的“時尚易逝,風格永存”大概就是這個意思吧。


          6000多字的設計流行趨勢,希望能幫助設計師度過互聯網裁員的寒春。最后希望以后每年堅持輸出設計流行趨勢。為設計行業奉獻微薄之力。



          文章來源:站酷   作者:水手哥

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          圖標篇 | 圖標設計必備的基礎知識

          ui設計分享達人

          前言


          做好圖標設計是一個入門級UI設計師的必備技能之一,圖標是界面中非常重要的組成部分,在實際的工作中,即便是一些工作多年且有一定經驗的設計師,也很難保證自己設計的圖標有多么完美。不同位置的圖標在界面中所起到的作用不同、風格也不同、其設計思路更是有所區別,例如金剛區、分類、標簽欄、服務工具等。

          用圖標準確的表達出實際含義,僅僅學其「形」是不夠的,需要對圖標有較為全面、系統的認識,了解圖標的相關概念、正確的繪制方法及處理好一系列的細節,本篇文章將介紹圖標設計的具體方法及要點,幫你規避掉一些常見的問題,讓圖標設計有理有據。





          本期大綱


          一、圖標的定義

          二、常見的圖標風格

          三、性格與氣質

          四、設計規范與流程

          五、常見問題及注意事項

          六、圖標資源

          七、總結





          一、圖標的定義


          1 什么是圖標?

          圖標是一種具有高度概括性的圖形化標識,在界面中與文案相互支撐、搭配使用,隱晦或直白的表達內容的具體含義、屬性特征、形象氣質等豐富的視覺信息。

          從概念上來講,圖標可分為廣義、狹義兩種,廣義指的是現實世界中的圖形符號、且有明確指向的含義,而狹義的圖標指的設備界面中的符號,這些設備泛指承載互聯網產品的載體,如手機、電腦、iPad...等。在UI設計中主要具是針對狹義的概念。

          圖標設計是一門學問,在我們的認知中,通常將圖標理解為某個概念的抽象圖形,通過設計清晰易懂的圖形傳達出比文字更高效率的信息,同時提升界面的美觀程度。想要將圖標設計的更加出色,則需要頻繁練習、不斷試錯、持續探究并嘗試新的風格,所以很值得我們花費大量的時間去鉆研練習。


          2 圖標的基本特征

          一個界面是由文字、圖標、幾何圖形、圖片(音頻、視頻)組成,從UI設計師的角度,相對來說,其他三種元素大多運用到的是排版技巧,而圖標則是需要繪制、創作的元素,在沒有圖標的情況下,純文字也可以代替,可為什么貴還要費力費時的設計圖標呢?原因主要有兩點:

          首先,圖標作為一種圖形符號的存在,跟文字的復雜程度相比,在識別效率上有著先天的優勢,因文字需根據語種、長短的不同,所占用的界面空間資源就不同,在文字較多的情況下,大大減低了用戶瀏覽速度及信息傳達的效率,固圖標將文字信息進行了濃縮。好的圖標不僅易于識別、效率更高,且讓界面更加簡潔,所以我們常見的圖文結合界面,絕大多數都是圖標在上、文字在下,或者圖標在左、文字在右,這些設計足以說明圖標視覺傳達的優先級高于文字。

          其次,不同風格、樣式的圖標能讓界面看起來更美觀,提高用戶的視覺舒適度。設想一下,如果界面沒有任何圖標的點綴,即便用戶也能使用,但看多來多少都有些枯燥無味,全部用文字來理解內容還容易引起視覺疲勞。





          二、常見的圖標風格


          1 扁平風格

          扁平風格圖標主要是由形狀的描邊、填充進行各種組合搭配來表達不同的含義,并通過不同的色彩體現出不同的視覺效果,最常見配色有以下幾種:

          ◇ 單色:簡潔、清晰視覺效果,常見于基礎功能圖標。例如:B端功能入口,移動端個人中心、二/三級頁面的工具欄等,也有很多app的金剛區利用底色塊襯托反白的圖標。

          ◇ 雙色:是很常見的功能性圖標,至少由兩個以上的元素組成,在單色的基礎上加以色彩點綴,讓本身就不是很突出的元素不再單調,如果融入品牌色,能提升整個界面品牌調性,適用場景跟單色圖標相比則范圍更廣。

          ◇ 多色:至少由三種或以上的形狀、顏色組合而成,常用于金剛區、產品分類列表、定制化菜單等。

          ◇ 漸變:漸變色的圖標顯得較年輕化,可以是單元素的漸變或多元素的漸變組合,能映射出一種活潑、熱烈的氛圍。例如:視頻、直播等娛樂類型的APP,或車載UI等。

          ◇ 不透明度:調整圖標中某個元素的不透明度,可在不變換色系的情況下豐富配色細節,還能與底色融合的更加細膩,解決多色漸變視覺跳躍的問題。

          另外,在UI界面中,扁平化風格圖標使用最多的當屬線性、面性、線面結合這三種類型。


          1)線性

          線性圖標主要是通過線條描邊勾勒出來的圖形,在界面中的尺寸普遍偏小,其線條不能過于復雜,否則將會影響辨識度,看似不多的簡單線條搭配不同的色彩,則有很大的調整空間。


          2)面性

          面性圖標主要通過剪影的形式來制作抽象的形體,相比線性圖標則面積更大、視覺層級更高且更有體積感。通過不同色彩填充、切割手法塑造不同的設計感,以達到多種視覺表現的效果。


          3)線面結合

          線面結合的圖標既有線段或輪廓、又有填充的色塊,相比純線/面性單一樣式的圖標則細節更加豐富,如果把控到位,會有更好的視覺效果及信息傳達的效率,也不失趣味性。


          2 擬物化風格

          擬物風格的圖標主要通過細節和光影、根據現實世界中的物品塑形打造出圖形立體效果,非??简炘O計師的造型繪制、技法表現能力。這種風格的圖標有著極強的代入感,能讓用戶快速領會圖標所傳達出的意圖及氣質。

          因為擬物化圖標信息元素的高復雜度及突出的視覺效果非常搶眼,在頁面中頻繁出現會成為干擾其他信息的存在,游戲類應用中使用的非常普遍(不過多贅述)。在其他類型的應用中,大部分出現在營銷類型的界面,例如專題頁、成就榜、會員中心等。


          3 輕質感風格

          跟擬物化圖標相比,輕質感就不會有太多復雜的元素,主要通過各種色彩漸變、發光、投影等圖層樣式體現出非常柔和的立體感,整體風格偏年輕化,給人輕盈、簡潔及精致的感覺。在設計過程中,請使用干凈且和諧的配色,主要使用在界面較大區域的位置。


          4 磨砂玻璃風格

          不僅僅是頁面背景有毛玻璃風格,圖標的毛玻璃風格也很出彩,主要通過背景模糊、疊加、剪切圖層來實現(網上很多教程)。輕量漸變搭配毛玻璃的朦朧感,可以體現出圖標的質感與神秘感。

          除上述這幾種風格的圖標之外,還有例如2.5D、3D、像素風、新擬態...等,但在UI設計中并不常用,就不一一舉例說明了。





          三、性格與氣質


          1 性格走向(描邊/拐角)

          力量型:粗線條、直角拐點,給人一種力量、狂野的感覺,常用于體育、健身、機械類型的產品;

          可愛型:粗線條、圓角設計,看起來活潑可愛,給人舒適、飽滿的感覺,在兒童、教育類產品中很常見;

          嚴謹型:細線條、直角拐點,看起來工整、嚴謹,中規中矩,適合政府、法律類型的產品;

          精致型:細線條、圓潤的拐角,柔和、干凈、纖細且精致的感覺,很適合極簡風格的設計,在藝術、金融、珠寶等奢華類產品中比較常見。


          2 動態效果

          如果想要突出金剛區、工具列表中的某個功能入口,將圖標設計成動態效果,既能保持整體圖標風格的統一、又能單獨突出功能的重要性,起到強調的作用,用來吸引用戶的注意力,引導用戶操作,提升其點擊率。切記動效圖標不能過多,當什么都突出了等于什么都沒有突出。

          其次,在年輕化、娛樂類型的產品Tab欄中的圖標切換時,加入動態效果,可起到畫龍點睛的作用,還能通過動效表達出不同的情緒,降低切換時的枯燥感,好的Tab動效能傳達出整個產品的氣質。

          最后,如果有類似運營或短期內的活動,需要吸引用戶注意但又不適合固定在界面中的某個位置,這時可以設計一個動態圖標懸浮在設備某個位置(注意用戶體驗及交互原則),既不過多的占用頁面資源,還能同時顯示在多個界面,一舉多得。

          (動效圖標:@墨染ART 授權)





          四、設計規范與流程


          遵循圖標設計規范有利于設計師之間的合作及接下來的設計,以及產品整體圖標風格的統一性,起到約束的作用,即便在更換設計師的情況下,也不至于出現較大的問題。在制定合理的設計規范前需要先了解圖標到底有哪些規范,應從哪些方面入手,以便接下來的圖標設計順利進行。


          1 網格尺寸比例

          為了保持圖標元素的平衡,尺寸大小需要保持一致,通常我們會建立基礎網格尺寸進行圖標的繪制,常見的網格尺寸有16、24、36、48、64、128、512、1024,這些網格尺寸并非固定,也會根據設計中的特殊尺寸而變化。

          一個圖標系統包括網格尺寸和圖標元素兩部分,設定好網格尺寸后,就需要用keyline來約束圖標形狀的長、寬比例了。最終設計的圖標大小并不是跟隨網格尺寸,而是根據不同的形狀占比受制于圖標keyline,最終形成統一的視覺大小。

          從上圖中可以看出,相同尺寸的圖標在真實的視覺中相差很大,這就好比一個100像素的圓形、跟100像素的方形相比,站在邏輯角度,大小是相同的,但在視覺上,一定是方形顯得更大。所以我們常說的圖標大小相同,并非真實尺寸,而是視覺感受。


          2 圖標keyline

          為保持圖標視覺上的一致性和平衡感,需要先繪制keyline用來指導、規范圖標設計。keyline由圓形、正方形、長方形-橫、長方形-豎、三角形和對角線組成,網格的大小需保持4的倍數,便于不同尺寸的圖標都能適配,可使用24*24px的網格尺寸為基準,其他尺寸的圖標可通過增加倍數以此類推,如48*48px、72*72px......

          下圖是以24px尺寸的網格參考基準示例(出血為2px):


          3 確定圖標風格

          根據產品屬性及目標用戶并結合應用場景,找到最符合自身產品性格、氣質的圖標設計風格,例如健身應用屬力量、粗礦類型,圓角、曲線適合女性產品等,在前面的「性格與氣質」中有舉例說明。


          4 圖標繪制

          經過圖標風格的確定,圖標細節便是接下來繪制過程的核心部分,對線性圖標來說,注重的是線條的粗心,而面性圖標則注重各小圖形之間的距離,所以在繪制時,需要保持線條、間距的統一,方便后期的圖標更新迭代。


          1)線性描邊粗細

          我們以iOS@2x為基準(避免@1x的3px描邊變成1.5px,小數點),可適配最2px、3px、4px最常用的描邊粗細,4px視覺較重,用于優先級較高區域的功能性圖標,2px看起來會顯得更加精致,在設計中,還需根據產品的行業屬性及調性來確定描邊的粗細,并統一起來。


          2)面性正負形間距

          面性圖標需要確保每個單獨的形狀之間有足夠的間距,以24px大小的形狀為例,其間距不能小于1px,以此類推,雖然未規定上限,但間距也不宜太大,否則無法相互組合關聯,以實際視覺的舒適度為準。


          5 創意提取

          根據行業類型及風格進行創意設計,如線性統一斷點、融入品牌基因、單個元素傾斜、節日氛圍烘托、修飾元素等,為圖標塑造靈魂或傳遞更多信息而進行的二次創作。





          五、常見問題及注意事項


          1 識別性

          圖標存在的意義,主要是為了快速傳遞信息,不能讓其成了無用的裝飾品。隨著互聯網的普及、時間的積累,人們對一些線上圖標信息的隱喻已根深蒂固,早就形成了慣性思維,所以我們設計的圖標必須要符合用戶的認知,能讓用戶快速理解,即便出現個別特殊情況,也要用文字清楚的標注說明,否則一旦讓用戶產生疑惑,圖標就起了負面作用,在很大程度上影響使用體驗。符合認知的圖標能讓用戶下意識的理解且接近心理預期,減少學習成本,提升使用效率。


          2 簡潔美觀

          圖標是將現實世界中的事件/事務用抽象的圖形表現出來,如果過于追求完美而設計的太復雜,還不如直接上圖片來的快,所以不能過于展現真實物品的細節,最終設計出正確而不失真的圖標尤為重要,這樣既能用于傳遞信息,又便于用戶快速且清晰感知。


          3 視覺對齊

          為確保視覺平衡,異形元素在使用系統自動對齊后,會有一定的偏差,需手動微調進行視覺對齊。


          4 保持一致

          針對大型項目,要想整個家族的圖標更加和諧,保持相同的樣式及設計原則著實不易,尤其是在多人完成設計的情況下,事先有一個清晰的設計原則和規范是必不可少的。圖標都有著對應的視覺重量,例如描邊粗細、填充模式、繁簡程度等屬性,需要做的就是控制好這些關鍵因素,讓整體看起來視覺重量相同且能相互關聯組合到一起,保持所有圖標的一致性。


          5 最小間隙

          單個圖標的各元素之間要有呼吸感,需要適當的留白,如果描邊過大,整個條看起來感覺像糊成一團或臃腫不堪,如果存在類似問題,可通過減小描邊值或降低圖標的復雜程度來解決。


          6 使用2的倍數

          以偶數為單位的設計便于數據的計算(2的倍數),例如正負形間距、描邊值等,在iOS@2x設計下,@1x也不會出現小數點。在移動端設計中,最小的圖標為24px,可被2、3、4、6、8、12整除,也是可以被整除最多的數值,因此,可靈活的等比縮放。


          7 延展性

          即便做好了前面的一切,圖標設計工作也并未完成,需要做的是持續測試圖標的可用性,做好后續的完善與優化,沒有最好、只有更好,以確保上線后的效果和后續的迭代。





          六、圖標資源庫


          阿里巴巴矢量圖標庫:https://www.iconfont.cn/,90%以上常見的矢量圖標下載;


          飛書官方圖標庫:https://iconpark.oceanengine.com/official,海量資源可在線修改,調整描邊、填充、單/雙/多色、端點后下載SVG格式圖標。

          雖然上述圖標資源基本能滿足我們的日常設計所需,但僅僅只能是作為參考而已,一味的圖方便、投機取巧只會毀了自己的動手、創新能力。





          七、結語


          圖標設計是一個非常龐大的版塊,且有很多個分支,例如:金剛區、標簽欄、應用圖標...等,每個分支都有自己的一套設計法則,我們需要在不斷的學習與創新中獲得更多經驗。一篇文章不足以道出圖標設計的精髓,但可以在不斷沉淀、相互探討、持續的學習中一起進步。

          下篇「圖片」文章再見。

          原文地址:站酷
          作者:飛鷹Article

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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




          按鈕篇 | 做好設計細節,你需要了解這些!

          ui設計分享達人

          前言


          說起按鈕,很多做設計的小伙伴是熟悉的不能再熟悉了,它是我們在設計界面時最常用、最重要的組件之一,也是易被忽略的元素之一,所以在設計之前,做好對按鈕組件的認識、了解非常有必要。

          從我們有記憶認知開始,按鈕就時刻在和我們打交道,墻上的電燈開關、電視機的調節按鈕、遙控器的按鈕等等,這些物理按鈕不僅僅是當下UI按鈕組件的前身,且不會消失,依然會有很多非數字化的產品及機器設備在持續延用,不管如何演變,基本不會脫離實物參考。按鈕最吸引我們的莫過于通過簡單觸摸就能輕松滿足自己的行為需求,按鈕設計的直觀性及易用性會影響著人們完成一件事情的意愿及效率。

          在UI設計中,如何完美的避開問題、把按鈕設計的更好,是每個設計師需要深思的問題。按鈕設計的好壞,將直接關系著用戶引流、觸發行動、產品轉化率等至關重要的問題。另外,精致的按鈕也會讓整個頁面的視覺提升檔次。本篇文章將對按鈕作出解析,介紹在設計按鈕時需要著重考慮的因素及設計標準,并將理論付諸于實踐。





          分享目錄


          一、按鈕的作用

          二、按鈕的類型

          三、按鈕的狀態

          四、按鈕的大小及風格

          五、常見誤區及避坑指南

          六、總結





          一、按鈕的作用


          1. 什么是按鈕

          在UI設計中,按鈕是一個明確指示交互行為動作的組件,主要用于觸發某一個即時操作,很多時候,我們需要采取下一步行動或返回到上一步,都要通過按鈕(部分場景可用手勢交互)來完成。

          在視覺層面,按鈕的組成看起來很簡單,由一個底色塊/線框加上一組文案即可組成,但真正要將按鈕設計好,僅停留在視覺層面并不嚴謹,其大小、位置、色值、文案...等每一個細節的處理都關系著用戶的操作體驗,下面的這幾種情況大家肯定有碰到過:


          2 按鈕有什么用

          通常,我們在設計按鈕之前,需要詳細理解按鈕所存在的意義,哪里該加、哪里不該加、為什么要加,主要從以下幾點來體現按鈕的作用:


          2.1 功能性操作

          這種按鈕很常見,比如展開、收起、下拉、加減等,按鈕視覺較弱,重點強調該頁面的功能,突出主體信息,在操作之后會發生一些交互變化,這類按鈕主要起到功能形態的作用。

          2.2 明確引導下一步操作

          當用戶完成一個頁面的內容填充或信息確認,就會失去視覺焦點,而下一步按鈕就會聚焦視覺重心,通過文案告知用戶下一步該怎么做,常見的有保存、下一步、支付、確定...等。

          另外,用戶需要完成某個任務,但同一個任務流程的信息、種類較多,這時就會通過分步驟、分頁的方式,并在每個步驟的末尾增加一個能起到上下銜接作用的按鈕,明確引導用戶進入下一步操作,以此來提升用戶完成整個任務的成功率。

          2.3 培養行為習慣

          如果在操作某個按鈕之后得到了一定的利益,且能持續為用戶帶來價值,那么不妨將這個按鈕設計的更醒目,并在同等級但不同的地方保持視覺的統一,持續培養用戶點擊習慣,當用戶下次再看到類似這種按鈕時,慣性思維就會引導點擊。


          3 按鈕的組成

          在大部分的認知中,最常見的按鈕就是一個底色塊加上一句文案就完成了,殊不知一個好的按鈕需要經過很多細節的把控,才能發揮出按鈕的最大作用。例如文案的長短/邊距、容器的大小/圓角、填充色的主/次之分...等,下面我們來看看一個按鈕到底是由哪些屬性、元素組成。

          ◇ 圓角:傳達出按鈕的氣質,決定用戶的視覺感受,最常見的為小圓角,也有較為嚴謹、力量型的全直角、卡通可愛、年輕化風格的全圓角。

          ◇ 圖標:用于按鈕含義的圖形化抽象表達,例如加載中、編輯;

          ◇ 容器:整個按鈕的載體,容納文案、圖標等元素;

          ◇ 邊框:確定按鈕的邊界,常用于次級按鈕描邊;

          ◇ 文案:用文字表達按鈕的含義,精簡文案;

          ◇ 背景:表達按鈕的當前狀態,對按鈕合理的使用主體色能有效傳播品牌氣質;

          ◇ 投影:讓按鈕具有層次感,配合漸變背景能體現出微質感的效果。





          二、按鈕的類型


          1 功能類型

          按照功能屬性分類,可將按鈕類型分為流程控制和功能選項操作。

          流程控制:常見的傳統按鈕,如支付、下一步、確定、保存等,容器承載著圖標、圖標+文案、文案。

          功能選項:開關/加減控件、標簽欄/分類、狀態切換等,操作之后只針對當前頁面做出屬性的調整,不涉及流程的變化。


          2 視覺樣式(橫向)

          視覺樣式有所區別,在不同的頁面可能存在同等級的權重。

          常規按鈕:最常見的按鈕,當同一個頁面出現多個常規按鈕時,會有主次之分;

          虛線按鈕:常用于添加、上傳等操作;

          文本按鈕:僅用文字作為觸發點,部分會用主色、右側箭頭、下劃線等方式突出。


          3 層級分類(縱向)

          高權重:帶有填充色的主操作按鈕,當同一個頁面存在多個按鈕,只允許存在一個高權重(主操作)按鈕;

          中權重:帶邊框輪廓的概述按鈕,同一頁面可存在多個中權重的按鈕;

          低權重:純文本按鈕,以及淺色填充+淺色文字的按鈕,同一頁面可存在多個低權重按鈕。





          三、按鈕的狀態


          在設計按鈕時,為了體現按鈕不同的具體含義,以及后續設計、開發的統一性,明確按鈕交互樣式是設計過程中不可缺少的重要組成部分。設計師需要在不干擾界面視覺的前提下,對每個按鈕的樣式、狀態有清晰的定義,與其他元素、布局區分開來,以確保按鈕的可供性。常見的狀態主要有以下幾種:

          ◇ 待激活狀態:需要完成一定的操作、或有一個以上必要的前置條件后才允許交互;

          ◇ 正常狀態:按鈕的正常顯示狀態,可進行交互操作;

          ◇ 點擊狀態:觸碰效果,表示按鈕正在進行交互且未結束,會在正常狀態的基礎上增加一個純黑色不且透明度為10%的蒙層,交互完成后,即會引發此按鈕的真實作用;

          ◇ 加載狀態:產生交互后沒有立即執行、或系統需要一定的時間才能執行完成;

          ◇ 禁用狀態:系統默認暫不允許操作、或需要用戶離開此頁面去完成一定的前置條件才能使用。





          四、按鈕的大小及風格


          1 按鈕的尺寸

          在PC端設計按鈕時,因為鼠標的精準點擊,我們通常會將按鈕設計的小一些,同時也能讓整個界面看起來更加細膩,只要不影響操作,36px~48px范圍內的按鈕是比較常見的。但移動端的按鈕設計,我們要更多的考慮到物理尺寸,即手指(指尖)在操作時需占用的實際范圍。

          iOS的設計規范中,將按鈕的最小點擊區域規定為44pt,一旦小于這個數值,操作時就會出現精準度較低的情況,導致操作失誤或無效。

          在實際的iOS界面中,很多應用在設計按鈕時并未嚴格遵循最小44pt的這個標準,例如很多一、二級界面的次級功能入口,有些連30pt都不到,也并未對用戶造成多大的影響,可能是對應的功能權重、用戶點擊頻率都非常低的原因,還有一部分文字按鈕,其本身永遠都不可能達到最小的觸控標準(觸控熱區加大即可),所以關于按鈕的尺寸大小并非規定的很死板。

          費茨定律告訴我們「目標尺寸越大,移動至目標所花費的時間就越短」,所以,在滿足手指觸控范圍的同時,還要根據所對應功能的權重占比來適當調節按鈕的大小。不難理解,當某個元素的尺寸越大就越吸引眼球,就更容易被視覺捕捉到,也更容易被「點擊」,精準度被降低的同時,也減少了用戶的操作成本。

          我們以8像素柵格系統、iOS的2倍圖為例,較為常見的有:小型-64px、中型-80~88px、大型-98px、超大型-隨機這四種按鈕。


          2 按鈕的風格

          在UI設計中,幾乎每個頁面都存在按鈕,樣式、種類也有很多,但設計風格常見的也就幾種,例如扁平化、微質感、擬物化、新擬態(概念)...


          2.1 扁平化按鈕

          通常在容器中填充一個純色即可,沒有多余的視覺干擾,操作簡便,這種類型的按鈕一般在應用中用的最多。例如:工具型應用、B端應用等。

          2.2 微質感按鈕

          相比扁平化,填充漸變色再加上淺淺的投影,不僅能保持信息內容的簡潔、讓用戶產生更強的操作欲望,還能讓頁面具有品質感,更加耐看。例如:年輕化應用、娛樂類應用、兒童應用等。

          2.3 擬物化按鈕

          大多設計的很立體,3D質感、屬性樣式豐富多彩,參考現實世界中的事務或攝取應用場景中的某些元素,使其更加逼真,有較強的代入感。例如:游戲類應用、H5專題、運營banner等。

          2.4 新擬態按鈕

          2021年風靡一時,幾乎無人不知,但要想落地卻不太現實,實用性不強,也只能在飛機稿中出出風頭,隨著時間的流逝,逐漸銷聲匿跡,不知哪天會不會經改良后再次面世(當初扁平化問世,也是幾經波折,經多年改良才逐漸被大眾所接受)。目前只有少數工具類應用使用了新擬態,例如:計算器、AI設備控制、有道云筆記等。





          五、常見誤區及避坑指南


          1 主/次操作層級分明

          當同一個頁面出現多個按鈕時,只允許存在一個主操作按鈕,其他不做特別設定。當然,如果次要操作較多,也不益過多的出現次級按鈕,可根據權重降級處理,以小圖標或文字按鈕的方式呈現。


          2. 統一樣式

          主/次操作按鈕要統一樣式,用戶需操作時,盡可能的減少其思考及選擇時間,按鈕應該迎合用戶固有認知及慣性思維,節省時間成本,提高操作效率。


          3. 圓角值

          在大多數界面設計中,我們通常所見到按鈕還是小圓角和全圓角居多,也有部分按鈕完全直角,需要根據產品的行業屬性與氣質來選擇最合適的圓角類型。不管如何,盡量避免大圓角(卡片除外)按鈕,不方不圓、不倫不類的,顯的不夠成熟也不好看。


          3.1 小圓角

          小圓角按鈕的圓角值通??刂圃诟叨鹊?/5、1/6,兒童類型的應用也有1/4(較大)的,并非絕對值。如果習慣使用8像素網格,根據按鈕的尺寸大小,直接將圓角值固定在8px、16px、24px(較大)這幾個數值,能減少設計組件的數量,也利于開發做組件封裝后續調用。

          3.2 全圓角

          全圓角按鈕的圓角值固定為高度的1/2,或者在軟件的圓角設置中直接將數值拉到極限。

          3.3 直角

          不設圓角值,在PC端較為常見,也有部分較為嚴謹的移動端應用使用直角按鈕。


          4. 按鈕中的文字

          按鈕中的文字要便于用戶理解,不能過于陌生或繞口,用戶碰到不易理解的信息會產生困惑,甚至誤導用戶導致操作失誤從而造成損失。除此之外,文字還需要精簡,不能過多或折行且能合理的引導用戶完成操作。

          上圖的文案歧義就很明顯,自以為聰明的設計師想要挽留用戶,刻意將主次按鈕樣式對換,希望用戶操作不成功,那么用戶在需要取消訂單時就疑惑了,到底是點擊「確定」還是主操作按鈕「取消」才能取消成功呢?或許稍加思考,用戶也能反應過來,但無疑增加了選擇難度、思考時間及操作成本。



          5. 文字與按鈕比例

          按鈕中的文字太大或太小都會影響用戶對信息接收的效率,大小比例需要適中。文字太大會感覺很擁擠(跟大家衣服買小了感覺一樣),沒有呼吸感,要給文字四周留下足夠的空間,同時文字太小會顯得小氣,看起來也會比較吃力,不利于信息接收。


          6. 按鈕與其他組件的區分

          設計好按鈕組件之后,頁面中的其他組件或元素要與按鈕有很明顯的區別,避免讓用戶產生不必要的誤解。


          7. 彈窗主/次按鈕的位置

          在彈窗中,主按鈕是在左?還是在右?這是一個爭論不休的問題,那么不爭了,在移動端的彈窗設計中,主按鈕靠右就行了,不一定絕對正確,但絕對不是錯的。根據調查數據顯示,單手使用右手操作手機的用戶比左手操作手機的用戶量高,且用戶也有一定的意識,左側為上一步、右側為下一步,頂部左側為返回,右側為保存或確定。


          8. 無障礙設計

          可訪問性是按鈕設計最重要目標之一,不僅要樣式統一,還應符合用戶的認知,讓用戶能快速知曉這個元素能否點擊?點擊之后會發生什么?甚至有種似曾相識的感覺。如果將按鈕樣式設計的與用戶認知有較大的偏差,不易于用戶理解。


          9. 減少使用禁用按鈕

          在表單設計中,大部分都需要用戶完成一定任務之后才能正常操作下一步按鈕,在完成之前,需少用禁用按鈕,在前面有講到「待激活狀態」,即在按鈕中填充淺淺的主體色等待用戶完成任務激活。

          通常系統默認不允許操作或存在時間限制會用到填充為灰色的禁用按鈕,即便如此,也要盡量讓系統將其隱藏,萬不得已的情況下需要在按鈕附近說明情況,以免使用不當引起用戶的負面情緒。


          10. 投影的使用

          在給按鈕添加投影時,選擇灰色或純黑色加調整不同明度即可滿足基本效果,但如果想要更好的視覺體驗,可以基于按鈕本身的色值來調整,讓投影效果看起來更舒適,跟頁面更搭。另外,切勿過度使用投影,寧缺毋濫,若按鈕的投影太深,看起來粗糙臟亂,還不如不用,顏色較淺的按鈕盡量不使用投影,否則可能會影響按鈕的識別度,讓這個頁面看起來不夠清爽。





          六、總結


          對于設計師來說,按鈕作為設計組件之一,有很多細節容易被忽略,我們需要對每一個細小的元素進行深入思考,如論任何大小組件,都需要做到精益求精,才能給用戶帶來更好的使用體驗。

          原文地址:站酷
          作者:飛鷹Article
          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          2022年標志設計趨勢:標志的未來

          ui設計分享達人

          2021年,標志設計師朝著更大膽、更具創新性的設計邁出了一大步。與平面設計趨勢類似,品牌推廣大量采用軟循環動畫和鮮艷的配色方案。它還開辟了實驗排版,鼓勵創造性思維重新審視標志設計。

          2022年的標志設計趨勢很可能會延續這一大趨勢,我們希望看到上述美學在全球范圍內得到重塑。您會看到設計師同樣選擇極簡主義和卡通標志、3D 和平面標志、花卉和文字標志。我們認為2021年是創作自由的一年。然而,看起來在2022年,我們將看到它真正的肆無忌憚。

          1) 簡單的幾何圖形和基本形狀

          2) 高大的標志

          3) 飽和顏色和漸變

          4) 象征主義和極簡主義代替現實主義

          5) 涂鴉和草圖

          6) 粗體字標標志

          7) 無襯線標志

          8) 花藝和微妙的裝飾

          9) 黑白標志

          10) 3D與平面樣式

          簡單的幾何圖形和基本形狀

          在2022年,擁有基于復雜圖形的標志幾乎會很少見。此類標志通常難以記住,客戶可能會很難發現在品牌與其圖形表示之間的聯系。對于尋求加強存在感和提高品牌知名度的大企業來說,這可能是一個巨大的問題。因此,公司傾向于拒絕此類標志,而傾向于使用一些基本的東西。

          基本的幾何形狀是各種三角形、圓形、正方形、點和線,它們使標志設計成為簡單的圖像。作為優化,建議設計師使用充滿活力或獨特的配色方案?;蛘呦喾矗袚Q到黑白,將這種極簡效果發揮到極致。最后,還有負空間,這是另一種采用簡單幾何形狀并保持視覺趣味的好方法。

          高大的標志

          雖然2022年的大多數標志設計趨勢與我們兩年、三年或五年前曾經擁有的一切產生共鳴,但高大的標志就像一口新鮮空氣和創造力。反對過度使用的三角形、方形和圓形標志。正如我們從多個Behance項目中看到的那樣,它們的美學非常適合尋求領先的時尚公司、精品店、創意工作室和大品牌。

          高大的標志部分借鑒了裝飾藝術風格,它們特別喜歡優雅的垂直框架。高大的標志同樣具有波西米亞風美學和現代幾何元素。事實上,這種標志設計趨勢的根源并不那么重要。真正重要的是新的形狀讓設計師想出了新的標志創意,所以在這里我們希望他們以不同的方式處理字體和圖形元素。

          飽和顏色和漸變

          實踐表明,標志的顏色工作和色彩的選擇是一個非常個人化的故事,通常很難跟蹤全球趨勢或與特定顏色相關的任何標志趨勢。有人更喜歡黑白標志。有人會選擇現在特別流行的單色、裸色或大地色。然而,如果我們看看大品牌,我們將能夠在標志設計中使用生動、飽和的顏色來定義一個巨大的趨勢。

          對標志設計中顏色的興趣已經發展到這樣的程度,創作者不僅要增加飽和度,還要選擇純粹、生動的解決方案,同時盡可能地簡化標志。太多的細節和顏色會造成混亂的外觀,因此選擇其中一個至關重要——在極簡主義時代,選擇很明確。然而,我們不禁強調鮮艷的色彩很難處理——尤其是糖果色。它們可以使品牌標識看起來廉價甚至業余。因此,當您關注這一標志設計趨勢時,重要的是要取得平衡——否則您將面臨使用可疑標志的風險。

          象征主義和極簡主義代替現實主義

          有多種與簡化標志和極簡主義相關的標志趨勢——這可能是最能說明問題的。我們每個人都將標志創建為一件真正的藝術品。動物、花卉、神話和生物——在標志內,它們展示了精湛的技藝和對細節的迷人關注。誠然,這樣的標志確實看起來很引人注目,但從響應式設計的角度來看,它們失去了其他類型的標志。

          您可能還記得響應式標志,這個術語是在大約4年前引入的。這些是可以適應不同屏幕尺寸或其他媒體的標志。為此,設計人員可以刪除字標、簡化或隱藏標志。今天幾乎沒有人認為響應式標志是一種獨立的現象或趨勢。相反,響應性是標志的自然特征,象征主義和極簡主義的運動正好證明了這一點。

          涂鴉和草圖

          2022年,草圖和涂鴉將作為圖形設計趨勢回歸,因此它們作為單獨的標志設計趨勢出現。其復興的關鍵是人們對設計師個人品牌方法的興趣增加。顯然,沒有什么比以獨特風格繪制的快速草圖、卡通人物和形狀更好的了。

          因此,要為標志設計中的更多涂鴉以及企業品牌中草率的卡通標志和快速繪制的吉祥物做好準備。以快速和樸實的方式制作的手繪標志也受到歡迎,我們已經看到以這種方式書寫品牌名稱的項目和團隊。

          粗體字標標志

          如果我們考慮2021年的標志設計趨勢,粗體字標志將是最好的例子。于2020年底推出的實驗排版項目專注于不常見的幾何解決方案。難怪品牌和標志設計師不能忽視這種大規模的圖形設計創新——在這里,我們在標志設計方面有了一個全新的方向。

          許多跨國公司選擇字標標志。例如H&M、可口可樂、Zara、谷歌、Visa等品牌。然而,幾乎沒有人認真考慮使用實驗字體進行品牌重塑。這就是為什么此類文字商標標志主要在獨立工作室、小型企業、精品店、沙龍和個人創作者中傳播。也許,這些大膽標志的特征是其吸引力的另一個關鍵。您可以將它們視為那些知道要注意什么的鑒賞家的標志——或者那些想要感受品牌美學的人。

          無襯線標志

          雖然使用大膽的實驗排版并不是每個人的趨勢,但無襯線字體是每個人都知道和理解的。自從設計師拒絕花哨的腳本和襯線字體而支持無襯線字體以來,已經有一段時間了。但由于存在普遍趨勢,我們可以說它仍然是2021年的標志設計趨勢——順便說一下,這得到了我們上面寫的極簡主義和基本幾何形狀的流行的支持。

          拒絕花哨字體的動機非常簡單——使用無襯線字體要容易得多。使它們適應不同的屏幕和畫布尺寸并不復雜,因此它們更適合響應式標志。有趣的是,幾年前,我們觀察到了一個相反的過程:許多公司從無襯線字體切換到襯線字體,因為復古設計非常流行。今天,隨著復古狂熱慢慢釋放出來,健康的實用主義出現了,無襯線字體再次相關。

          花藝和微妙的裝飾

          我已經不知道設計師和產品創造者用極簡主義制作了一系列標志多少年了。與此同時,許多小企業繼續選擇和使用它們,所以這些標志不會退縮——就好像它們剛剛出現在市場上一樣。所以請放心,它們將與您共存數個季節,同時還會定期推出新款式,例如2022年風靡一時的Boho。

          也許,這種標志設計趨勢是最流行的。優雅的線條看起來令人著迷,因此使用它們的誘惑很大。2019年如此,2022年依舊如此。 事實上,這種微妙的視覺風格并不僅僅集中在花藝上。有很多日常用品:從家具到文具和衣服。重要的是這些標志模板是如何制作的!

          黑白標志

          隨著我們繼續從各個方面學習了解極簡主義,讓我們在這個市場中傳遞2022年的另一個自信趨勢:黑白標志。實際上,將黑白色調視為一種趨勢是很奇怪的,因為它是一種經典的解決方案,并且它的存在與時間和風格的變化無關。所以,我們需要讓您注意到對此類標志的興趣是日益增加的,其中最重要的例子是GoDaddy的重新設計之一。他們逐漸簡化了他們的標志,現在他們似乎到達了最后階段——帶有帶有無襯線字體和保留標志的黑白標志。

          黑白標志的最佳之處在于它們令人難以置信的風格靈活性,這使得它們在品牌設計師中流行起來。它們完美地適應了品牌的審美,因此可以將它們用于字體、裝飾元素和幾何形狀的各種實驗。極簡主義、創造性的排版、花卉、象征主義、原始幾何——一切都與黑白標志相得益彰。

          3D與平面樣式

          3D是2021年最有前途的圖形設計趨勢之一。隨著技術的發展,這種圖形變得如此龐大,以至于我們永遠無法預見。甚至可以在直觀的在Spline或 Procreate的最新更新中進行高質量3D對象的制作。圖像質量也得到了發展。

          然而,在標志設計中,情況頗有爭議。設計師將平面樣式的 logo 轉換為3D,反之亦然,力求使 logo 風格更加生動和簡潔——后者對于舊版本的3D和假3D尤為典型。出于同樣的原因,他們付出了很多努力來探索類似于3D的方向——等距藝術。它允許在視錯覺、鮮艷的色彩、漸變、陰影和形狀的幫助下獲得大量圖像??赡芩雌饋肀?D更適用于標志設計——但時間會證明公司和客戶會習慣什么。

          最后

          顯然,2022年和2021年的標志設計趨勢沒有明確的界限。大多數處于巔峰的趨勢已經伴隨我們很長一段時間了。

          但是,我們可以肯定地說,例如之前非常受歡迎的故障風格,不太可能成為本季標志設計的主角。在過去的幾年里已經有很多這樣的事情。動畫標志也是如此,這是2021年最有希望的標志趨勢之一。動畫本身繼續引起人們的興趣,這是展示品牌的一種成功技術——但不幸的是,它并沒有被證明是可行的。

          最后,3D的命運也沒有確定,我們還不能說3D或扁平風格的標志設計是否會成為一種趨勢。我們已經寫過,設計師的立場是模棱兩可的,一個方向和另一個方向都有品牌重塑。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:對啊設計君
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          儀表盤設計的 7 個階段

          資深UI設計者

          你知道儀表盤應該如何被設計,才能更符合用戶需求、滿足用戶的使用期待嗎?過于復雜的儀表盤設計可能是不可取的,在進行儀表盤設計前,你需要做好相應的規劃和設計策略。本篇文章里,作者總結了儀表盤設計的七個階段,一起來看一下。

          一個看起來很酷炫的儀表盤可能有很多功能但實際上,它通常只是一個閃亮的玩具,而不是一個有用的工具。這些儀表盤類似于多臂機器人,能隨機拖拽數據并將這些數據分門別類地整理在一起,讓你目瞪口呆。

          就像魔術師玩紙牌戲法一樣,它看起來令人印象深刻,但它的大腦和巧奪天工的手法一樣好。

          ([1] Widget:全稱Web widget是一種Web2.0 的衍生物,它好像是一個小型的應用程式,是一小塊可以在任意一個基于HTML的網頁上執行代碼構成的小部件。)

          玩這個儀表盤機器人一開始可能很有趣,但最終會讓客戶失望,因為它沒有達到用戶的期望值。為什么會發生這種情況呢?設計一個工具而不是一個很快就會被丟棄的玩具的訣竅是什么呢?

          一、構想儀表板:核心大腦 Conceiving the dashboard: the brain

          讓我們深入剖析儀表盤設計。

          儀表盤是由客戶、設計師和開發人員共同設計的,他們每個人通過合作做出一定的貢獻,并且所有的基礎功能在一開始就確定了(或者他們沒標明)。

          一個有思考能力的人是從胚胎發育而來的。腦細胞和神經細胞是最先形成的,隨后是身體的其他細胞,而這正是任何可行項目被創建的方式。

          第一個階段是最重要的。如果你在這個階段遺漏了什么,那么任何奇特的設計都無法挽救。因為在這一階段你正在為儀表盤的長期發展奠定基礎?!拔覟槭裁幢辉O計出來?誰需要我?”如果儀表盤會說話的,它一定會問這些問題。你能回答這些問題嗎?

          • 儀表盤將如何促進公司目標的達成?
          • 什么樣的結構、功能和視覺效果能讓儀表盤執行它的任務?
          • 哪種設計最適合你的目標受眾?

          這些問題的答案將構成你設計理念的基礎(現在你可以告訴你的儀表盤存在的意義了)。

          儀表盤設計的 7 個階段

          網頁Perls儀表盤設計

          1)儀表盤的“智能”是其實現目標的能力。

          有些人認為只有分析類儀表盤才需要智能性能,而可操作的儀表板只需要可讀性,實際上這個想法是錯的。比方說,你有一個用于激勵員工的操作類儀表盤,用戶的注意力應該放在比較結果,然而設計師會讓其在視覺效果上更加突出。

          2)儀表盤上沒有瑣碎的細節。儀表盤上需要展示足夠的信息使用戶來做決定。設計師的職責是幫助用戶,而不是通過一系列很酷的小微件來幫助用戶解決難題。任何不是出于這個目的設計的都會阻礙用戶使用。

          3)從項目的初始階段到最終階段,設計師必須關注公司的目標、儀表盤的目標,和用戶的目標。否則儀表盤將永遠無法運行。

          儀表盤設計的 7 個階段

          儀表盤設計:Clover

          二、數據及關鍵績效指標的選擇:這屬于血液循環系統 Data & KPI selection: the circulatory system

          儀表盤的數據就像是身體內的循環血液。我們必須了解它們來自哪里,它們在被用戶需要時是如何被處理的,以及它們該如何被可視化。

          理所當然地,設計師需要了解指標的目的,顯然,這將幫助他們選擇合適的微件,但不僅僅只有這些。

          舉個例子,一個客戶想在屏幕上看到許多不同的讀數。你(作為設計師)并不需要從屏幕上去除任何東西來清理儀表盤的展示空間;但你可以做的是突出最重要的東西,并在視覺上淡化次要的內容。

          然而,要做到這一點,你必須得知道哪個指標是最重要的且哪個是次要的。

          儀表盤設計的 7 個階段

          儀表盤設計:Bidding Car

          最重要的一系列指標有助于實現目標,且能幫助控制流程(或者產品),例如:

          • 它們展示實際的成功率;
          • 它們影響產品被感知的方式;
          • 它們激勵創建該儀表盤的團隊。

          指標的選擇還需要了解受眾。用戶應該看到哪個 KPI以及他們認為最容易理解的視覺表現形式?

          人們喜歡對應他們目標的一系列數字。

          儀表盤設計的 7 個階段

          儀表盤設計:Panch

          三、儀表盤的結構:這類似于骨頭 Dashboard structure: the skeleton

          想象一下,你進入一家酒店房間,看到一張床、一面桌椅、一個鏡子和一個衣柜,就算不打開壁櫥,你也能猜到里面有什么,吹風機、拖鞋、浴巾就放在你所認為的地方——有人已經保證了這些。

          一個好的儀表盤設計就如同那個房間:它是干凈、整潔且可被預知的。你可以立即看到所有必需品,并且直觀地知道剩下的東西會在哪里。設計師們有他們自己的工具來確保儀表盤設計的整潔性。

          1. 層級

          首先,你需要理清思路,在發揮創意之前,要對所有數據進行排序,將其分類,并充分理解優先級等等,確定用戶可以立即看見的關鍵指標數據。

          1)視覺層級必須反應信息層級。

          設計師可以通過微件的大小及位置來表現數據的層級權重。如果你的用戶是從左往右閱讀的,那么關鍵信息必須放在左上角,而相關性最弱的信息放在底部右下角。

          對數據重要性的排序方法取決于儀表盤的設計用途。重要的是根據信息的優先級構造信息并搭建邏輯鏈路。

          2)將信息面板視為一個故事,而不是一系列的數據點。

          2. 網格

          網格對于創建頁面的總體布局排序、協調和對齊元素非常有用。

          儀表盤設計的 7 個階段

          3. 信息模塊

          系統的模塊類似于一個住宅中的功能分區:臥室用來睡眠,餐廳用來吃飯之類,每個區域有其功能。你的舒適性取決于它們放置的位置有多方便。

          一個糟糕的布局不能靠翻新和布置家具來挽救,因此與之相類似的,信息模塊的布局需要被提前考慮。信息模塊幫助你展示內容的層次結構,且幫助你根據數據內容的重要性、相關性和邏輯連接對內容進行分組。每個模塊應該在給定過程中執行特定的目的。

          儀表盤設計的 7 個階段

          儀表盤設計的 7 個階段

          4. 連續性和接近性

          如果你在去往廚房的路上需要穿過一個有兩扇門的走廊,那么這是一個糟糕的室內布局。相互關聯的進程則會假定在邏輯上也具有相似性。如果一個模塊的進程需要來自另一個模塊的數據,那么數據的布局就需要有近似性。

          這一點必須事先考慮,這樣用戶就不需要在晦澀難懂的信息海里挖掘他們需要的信息。所有相關的信息應依據相似性,從最重要到最不重要性來進行分組和定位。

          5. 分離模塊

          沒有人需要一個與臥室相連的廚房。為了將兩個區塊分開,你需要留白或者負空間。你一定要在一開始就考慮到:將負空間視為視覺平衡所需要的設計元素組合

          儀表盤設計的 7 個階段

          儀表盤設計:Wingle

          四、功能:這就類似于身體的肌肉部分 Functions: the muscles

          功能和工具的數量取決于儀表盤的用途和其用戶的主要目標。為了自由地移動,人類需要兩條腿,狗需要四條腿,而蜘蛛需要八條腿。一個擁有太多功能的儀表盤就像一條有著六條腿的狗一樣優秀,但這有點讓人毛骨悚然。

          不要在控制面板上放太多工具,只需要在最表層放置用戶必需品就好。太多的可用工具會讓用戶困惑且被嚇退,因為這會讓儀表盤看起來很復雜。個性化總是比定制要好。

          儀表盤設計的 7 個階段

          儀表盤設計:Band

          五、微件:重要的器官 Widgets: thevital organs

          如果屏幕上有超過 5~7 個的小微件,人們則會難以理解其內容。所以我們(設計師)的工作是讓相關數據可以被訪問但數量保持一定,不過多,這樣就能使用戶能在數秒中理解他們看到的內容。視覺可視化的工具包括:

          • 表格
          • 圖形
          • 圖表
          • 卡片
          • 指標
          • 地圖
          • 圖片
          • 分組
          • 過濾器
          • 列表
          • 資料結構

          儀表盤設計的 7 個階段

          儀表盤數據微件的選擇取決于你儀表盤的目的和你的受眾。請思考以下問題:

          • 哪一種微件最能展示特定的 KPI(關鍵績效指標)?
          • 用戶需要最先在儀表盤上看到什么?
          • 哪一種微件將會是用戶最容易理解的?
          • 什么可以幫助用戶更快地找到他們需要的東西?

          請選擇容易理解和可讀的微件。這里有一個讓人困惑的與最易理解的微件對比示例:?????????

          儀表盤設計的 7 個階段

          請考慮什么是主要的目標來吸引用戶的注意力。

          例如,如果你的首要任務是業績目標,則應使用數字;如果你需要比較數值,則應使用折線圖或者柱狀圖;如果是為了激勵團隊,則應使用具有亮點突出的排行榜。

          選擇一個不合適的部件或默認的小部件模板可能會混淆用戶或導致他們誤解數據。最好的解決方案總是分析和測試的結果。

          儀表盤設計的 7 個階段

          最好的小部件設計是簡約的并且易于閱讀的。

          例如,一個 3D 圖可能看起來令人印象深刻,但它占用了用戶太多的注意力,最終證明它會分散用戶的注意力。漸變、過度使用顏色和太多細節也同樣會造成困擾。

          六、視覺設計:通用技巧 Visual design: general tips

          我們已經構建了儀表盤的大腦和身體。最后需要構建的是儀表盤的皮膚——最表面的一層。這可以根據好的經典設計的基本原則來完成,但這里仍然有些細節需要具體說明。

          1. 簡約性

          一個儀表盤應該跟你喜歡的工作桌面一樣干凈:它只有必需的文件和工具,沒有任何干擾項。

          儀表盤設計的 7 個階段

          儀表盤設計:MEMO

          2. 配色板

          儀表盤的顏色選擇必須服務于一個目的:盡可能清晰地呈現信息。你的配色板越大,就越難清晰地展示信息。所以不要在儀表盤上使用過多顏色。盡可能用相同顏色的深淺色或者不同的色相。

          儀表盤設計的 7 個階段

          首選,你需要選擇一個基礎色,然后選擇一個輔助色。每個顏色都必須有特定的用途。一個顏色可以用來結合/組合元素,另一種顏色可以用來強調元素。顏色還經常用來展示一個元素是主動的還是被動的。避免使用可能具有負面含義的顏色。

          例如在下面的例子中,紅色看上去像展示一些不好且不受歡迎的數據:

          儀表盤設計的 7 個階段

          如果儀表盤提供可定制的顏色,請確保所有的可選顏色看上去都不錯。Aodbe Color CC 是一個用來選擇配色的優秀工具。

          3. 強調

          語義的強調之處應和視覺的強調之處一一對應。你可以使用顏色(對比、亮度)、形狀、大小、負空間等等來強調元素。

          4. 可讀性和數字格式

          這是確保視覺上清晰清楚的一切:干凈的布局,視覺層級,突出重點,對比鮮明的元素,適當的字體,且這些字體也必須具有對比性和易讀性。

          高精度的數字格式是難以讓人理解的。最好的辦法是將任何數字四舍五入,并減少較長的數字。

          七、適應性 Adaptability

          在實踐過程中,當桌面版本是用戶的優先選擇時,則應該優先構建網頁版,然后創建移動端的。如果你的目標受眾主要使用移動端版本,則應首先著眼于構建移動端的儀表盤。然后再創建桌面端的。

          儀表盤設計的 7 個階段

          儀表盤設計:Snap

          八、結論 In conclusion

          設計一個優先的儀表盤并不容易。我們將其創建過程類比作人類發展,因為它是記住重要東西和展示工作的連續階段的好方法。當你在開發你的儀表盤,請不斷地自我提問:是否一切各就其位、各司其職?是否有多余的部分嗎(需要去掉)?各部位協作時工作正常嗎?用戶會喜歡這樣的結果嗎?這(功能)會有用嗎?

          如你所見,視覺設計實際上是設計師最后需要擔心的事。如果你什么都沒有漏過,你的儀表盤將對你的用戶產生有價值的幫助,而不只是一個玩具。

          本文翻譯已獲得作者的正式授權(授權截圖如下)

          儀表盤設計的 7 個階段


          文章來源:人人都是產品經理   作者:TCC翻譯情報局


          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


           


          毛玻璃圖標的設計教程

          lanlanwork


          1. 一定要注意識別度

          其實我一直不敢使用毛玻璃效果的原因,就是害怕有識別度問題,其實網上現在有很多毛玻璃圖標:

          圖片

          做概念稿練習練習還好,如果真的落地肯定不行,太影響識別了。

          為了不影響識別,我們可以有兩個做法。

          其一:就是毛玻璃的透明度別太低,像騰訊視頻這種:

          圖片

          這樣不影響我們識別圖形的輪廓。

          其二,我們可以把圖標主圖形用顏色填充,毛玻璃的面積只是很小一部分,起到輔助作用即可,比如像喜馬拉雅這種:

          圖片

          這樣整體的識別度也不會太受影響。

          以上就是關于不影響識別的小方法。

           

          2. 技法

          毛玻璃圖標大部分一共分三層,填充層、玻璃層,模糊層(模糊層是嵌入到玻璃層的)。

          其中最重要的一個關鍵點就是,玻璃層其實是假的,并不是透明的,而是100%的填充色。

          舉個最簡單的例子,我們先畫一個深藍色的填充層:

          圖片

          然后加一個玻璃層,這個玻璃層不是透明的,而是100%填充色:

          圖片

          那有同學就會問了,毛玻璃效果怎么產生呢?其實就是把下面的深藍色圓復制一個進入到前面的玻璃層:

          圖片

          有人又會問,這也沒效果啊,對,因為復制進入玻璃層的圓形和后面的原型位置一摸一樣,如果不做改變,就看不出變化,所以我們先來模糊下:

          圖片

          區分的還是不夠開,我們再降低透明度:

          圖片

          這效果就立馬出來了。

          所以從技法層面來說,并不是很難,主要是要注意識別度和整體的設計感。(當然,這只是我個人制作的方法,可能別人也有其他的方式)。

           

          3. 底色

          前幾天在群里看到一位星友問,說為什么他做的效果是第二個,而不是第一個那種透透的毛玻璃感覺:

          圖片

          其實我在最開始做毛玻璃效果的時候和她遇到了一樣的問題,這個問題產生的原因就是因為底色,現在的底色是黑色,一個玻璃放在黑色上面,透出來的顏色肯定是深灰色,而不是淺白色(除非你這塊毛玻璃本來就是白色的)。

          我在之前的一次練習時,做一個黑金配的的毛玻璃效果,最開始就做成了這個樣子:

          圖片

          總感覺有點奇怪,其實就是因為在黑色背景上,玻璃層的顏色用了白色,感覺沒透過去,就感覺怪怪的,后來我把玻璃層的顏色變成深灰色:

          圖片

          這樣看起來就好多了。

          制作的原理和剛才說的是一樣的,先把大形畫完:

          圖片

          然后前面整一個玻璃層,選一個深灰色:

          圖片

          然后把下面的形狀復制一個剪切到玻璃層中:

          圖片

          現在看不出效果是因為玻璃層里面的圖形和后面的圖形位置是一摸一樣的,這時候我們把玻璃層的圖形模糊:

          圖片

          現在已經差不多區分出來了,如果想要更明顯的區分,可以把透明度再降低一點:

          圖片

          也還ok,當然,我覺得加不加透明度,還是看具體效果調整就可以了!

          再強調下,大家在做毛玻璃的時候一定要注意背景色哦,不然可能就會看起來很奇怪。

           

          總結

          好了,以上就是我個人對于毛玻璃效果的一點總結,我個人還是比較喜歡一組毛玻璃圖標是多色的,如果是一個顏色,比如這種:

          圖片

          相對來說沒那么耐看,如果是多色的:

          圖片

          就會耐看很多,希望給大家一點啟發,下期見,默默扔!

           

          原文地址:菜心設計鋪(公眾號)
          作者:菜心設計鋪
          轉載請注明:學UI網》好慘,我竟然被批評了,問我為什么不安排教程?我怕了

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          B端圖標如何設計和應用

          資深UI設計者


          1.1 圖標的主要類型


          理解圖標,首先關注的是圖標本身的類型,在整個 UI 體系中,圖標基本就分成3個大類:



          工具圖標:包含一定產品功能隱喻的簡化抽象圖形,代替文字節省界面空間,方便用戶理解

          裝飾圖標:主要目的是用來裝飾界面的視覺元素,樣式大于功能,常用于節日活動中

          啟動圖標:產品的啟動圖標,即用來在系統中打開該產品的圖形按鈕,基本以自身 LOGO 為主


          在 B 端項目中,應用最廣泛的必然是工具圖標,而裝飾、啟動圖標卻鮮有露面機會。但出現的少,不代表沒有,解釋工具圖標前,我們先優先講解下裝飾和啟動圖標在什么情況下會出現。


          其中,SAAS 類服務就有很多會重點強調品牌、情感化設計的案例,例如大家比較熟悉的阿里云和騰訊云。項目中就大量啟用 3D 化的裝飾圖標提升界面的質感。



          啟動圖標則會應用在一些比較大型的項目里,當項目出現了很多下級功能模塊或類似插件的體系時,就會采取使用應用圖標的方式作為入口。


          比如 Figma 也是一個 B 端工具,它的插件列表中就可以看見不同的啟動圖標。還有類似 Slack、Invision、Teambition 等產品,一個龐大的產品生態就必然會衍生出強化不同子產品身份的需求,就自然而然會用到啟動圖標了。



          最后,就是我們熟知的工具圖標了,前兩種圖標,在前期畫不好不要緊,畢竟這類規格的產品會有經驗更豐富的設計或總監坐鎮,新手當個切圖仔即可……


          但是工具圖標,重要性就不言而喻了,B 端項目對工具圖標的需求非常大,幾乎每個組件中都會包含圖標。



          雖然今天網上有非常豐富的圖標素材庫,但在形式各異的 B 端項目里依舊是供不應求的,各種行業特有的功能、實物、隱喻,只能設計師自己完成。


          B 端設計師在圖標設計領域的主要工作,就是確定圖標樣式、設計圖標、導出切圖。下面的分享我們也會主要圍繞工具圖標展開。


          1.2 B端工具圖標的風格


          工具圖標的應用主要包含兩個部分,線性圖標和面性圖標。



          這里再提圖標風格,不是把以前的知識點重新講一遍,而是要強調 B 端圖標的特殊性。和 C 端相比,B 端圖標的實用屬性更高,并不需要過多凸顯本身的視覺風格。


          所以,工具圖標中,使用大量漸變、插畫、投影的類型都要排除掉,它們對 99.9% 的項目都只會造成體驗的負影響,不要被網上的追波風飛機稿給帶偏。



          適合 B 端項目的工具圖標只要應用最基礎的線性和面形風格即可,一定要劃分出差異,應該只包含圓潤、纖細、尖銳這幾種。



          很多人好奇線性和面形圖標在 B 端設計中有什么使用上的差異呢?答案是沒有差異。


          線性和面形的使用,純粹看設計師在當前場景判斷哪個合適用哪個,只要保證對應圖標風格統一即可。


          不過如果遇到一些比較特殊的情況,比如要表現各類設備的復雜圖標,那用線性的做法還是相對合適和簡單一點。



          1.3 圖標的統一性規范


          對 B 端設計來講,獨立設計圖標的步驟是必不可少的,應該掌握的圖標規范還是必須要懂的。


          我們雖然沒有 C 端那么多風格和技法的拖累,但想畫好 B 端圖標卻多出了其它難點,那就是一個頁面中出現的圖標實在是太多了。



          這就引發了我們要講的第一個規范要點 —— “統一性”,所有同規格類型圖標具有一致性的特征,這些特征包含了:

          • 粗細一致:首先使用統一的描邊、線段粗細參數

          • 圓角一致:使用一致的圓角數值,不要一下尖角一下圓角

          • 透視一致:使用接近的透視角度,不要有的側視有的正視圖

          • 大小一致:視覺的大小保持一致,有均衡的大小感受


          如果不能保證統一性的基本要求,那么整個頁面看起來就會非常的廉價、業余。很多新手處理 B 端項目就是應用了多套素材庫圖標,它們的細節完全不一樣,統一性當然無從談起。


          而讓整套圖標保持統一性,是相當有難度的,其中最難的一點,就是如何讓一套圖標的大小均衡。雖然我們要對每套圖標確定一個固定的尺寸,但不代表圖標實際圖形的長寬數值是完全一致的。


          幾何圖形對視覺有一定的欺騙性,有不同的大小體驗,比如下方案例(魷魚游戲亂入?):



          所以,基于這樣的特性,每個圖標本身都包含了兩層屬性,圖標的占位尺寸和視覺尺寸。占位尺寸指它在界面中的實際占地大小,是透明白的,排版的時候以這個尺寸作為實際的邊緣來測量。



          而視覺尺寸,則是在占位尺寸下圖標圖形的實際大小,這個大小是帶給我們實際視覺感受的部分。一套圖標的不同圖形必然視覺尺寸是各不相同的,我們用占位尺寸包裹它們來方便我們進行統一的應用。



          所以,使用成熟的圖標素材必然會發現圖形周邊還會有透明的空白區域。當然,不同的素材,這個留白也是有區別的,下一個小節就會解釋。


          最后要聲明一點,一套項目中可以包含多個規格(2-5個)的工具圖標,比如導航用的圖標比普通工具圖標更復雜一點,設計師只要保證每種規格保持的統一性即可。


          1.4 圖標的柵格系統


          圖標越多,大小的控制越困難,所以專業的圖標庫繪制就必然會應用圖標的柵格系統進行輔助。


          在 Ant 的體系中,一個基于柵格的圖標實際包含3層,背景層、格線層、圖形層。



          背景層,即圖標展位尺寸,需要先確定出這個元素的大小,然后才是里面的繪制區域。通常,柵格系統會為邊緣預留 1-4 像素的內邊距(出血位),正所謂四周留一線,日后好相見。


          格線層,則是使用的柵格線段,也是最重要的部分。格線層通常由 4 個基本圖形構成,包含正方形、圓形、水平長方形、垂直長方形。


          這四個圖形的長寬大小不一,原因是為了對應幾何圖形視覺尺寸不同的特征。把它們并列排列,就可以發現它們的視覺大小非常接近。



          這些格線的作用,就是提前幫我們確定好視覺比例,幫助我們快速繪制相同圖形類型的圖標。



          但是,不是完美符合這四個圖形要求的圖標該怎么辦,總不能格線把所有輪廓都給你實現出來吧?


          格線的另一層作用,也就是最重要的作用,其實是一個用來做測量的工具,而不是輪廓依據。在幾何視覺差中,最基礎的大小原理是占用面積越大的圖形,尺寸感受越大。所以,長寬一致的正方形大于圓形,圓大于三角形。


          所以當我們繪制的非常規圖形,和類似格線進行對比時,長寬缺少的一側,就要由另一側增加數值來填補它的面積。


          比如下圖 Ant 官方的電腦圖標,它的寬是橫向矩形,但是中間區域面積較小,所以增加了高度進行平衡。



          再看一些其它的案例



          這一步沒有固定的參數使用技巧,設計師需要將完成的圖標置入到其它圖標旁邊進行調試,確保尺寸是合適的。

          格線只是一個圖標大小設置的參考工具,一切以最終效果為標準。





          理解完圖標的基本規范,就到圖標的使用邏輯了,解決一些常見的設置誤區。


          2.1 圖標應該做多大

          圖標該做多大的,這是目前被問到最多的問題。本來應該是非常簡單的一件事,但很多工作多年的設計師也搞不清楚。


          仔細捋了捋,罪魁禍首就是 AntDesign 這套規范中對圖標畫布的解釋了。



          要重點強調,Ant 設計圖標的意圖,和一般項目的是完全不同的。Ant 作為一套龐大的開源項目,它的圖標核心特征之一就是 —— 適應性


          這些圖標要被應用到各種不同的設備、顯示器、系統中,圖標尺寸會用多大,在幾倍圖環境顯示全都是不確定的。所以圖標一開始按越大的規格完成,后續實際應用中的縮放、匹配也就越容易,適應性越高。


          但是,在我們自己的項目中,這種做法是完全沒有必要的,1024 圖標的負面影響包含:

          • 像素數過多使得數值的制定難度大大提升,不管是元素尺寸還是描邊粗細

          • 矢量圖形源文件進行縮放很容易發生錯位,提前輪廓化會破壞源文件

          • 縮放圖標后描邊的數值往往會出現非整數和 0.5 的狀態,虛邊問題嚴重


          在常規項目里,一套項目是可以包含不同尺寸和規格的圖標的,而不是我們做一套相同風格的圖標在整個應用中無差別使用。


          這也意味著,每個圖標在產品中的使用場景通常只有一個尺寸,不需要去面臨縮放的情況。即使需要縮放,也只是這套圖標中的少數幾個需要,或者相對特殊的項目。


          所以,圖標尺寸設定,就是根據當前位置合適的尺寸來制定??梢允褂盟夭脑谝呀浽O計好的布局中嘗試多大的數值合適,然后創建同樣的數值即可(盡量以4的倍數為標準)。



          2.2 素材的正確使用方法


          我們知道圖標的素材非常豐富,不管是 Iconfont、IconPark 還是 Iconsearch 等網站,都提供了海量的素材。但是只要稍微專業點的項目,往往素材庫都滿足不了,部分規格的圖標還是需要我們自己重新繪制。


          所以說圖標素材就完全沒用了嗎?當然不是。


          圖標的正確用法是作為一種快速試錯的參照物,它可以幫助我們實現:

          • 參考圖標的具體尺寸在哪個數值最合理

          • 參考當前場景使用面性還是線性的風格更合理

          • 參考圖標的設計風格是圓還是尖銳更合理

          • 參考相關隱喻的圖形樣式哪種更合理


          在項目的界面設計階段,我們一向建議優先使用外部的素材,尤其是 IconPark 這種比較統一,還可以快速調節圖標樣式的工具網站。



          這個過程即使素材找不到和寓意一致的也沒關系,用相近的圖標替代就可以。等到頁面布局基本完成以后,最后再集中精力對需要繪制的圖標重畫一遍(甚至是在開發階段繪制)。


          通過別人的圖標來快速匹配尺寸、風格、樣式,會幫助我們節省非常多的時間,也有助于我們設計出更專業、美觀的圖標。


          另外,就是針對項目一些偏小尺寸的通用圖標,就可以比較放心的應用素材,例如翻頁的左右、更多、下拉、搜索等等。



          2.3 圖標的色彩和狀態


          圖標的尺寸、樣式都確定了,最后就是關于圖標的色彩和不同狀態的制定了。


          前面講過,B 端項目對圖標的裝飾屬性沒有那么迫切,所以正常情況下,太花哨的圖標是要盡量避免的。彩色、漸變色、投影,都不應該在這個情況下胡亂使用。


          常規的圖標只要使用中性色即可,而需要特別對待的圖標,色彩可以從主色或者輔助色中選取。比如需要高亮顯示的打勾或者打岔。


          當然,如果項目涉及到一些特殊的工具圖標,類似工廠、工業領域表達實體設備的擬物圖標,可以打破這個原則。但是,同樣避免這套擬物圖標的每個圖標用色不同,盡量只使用 3 種以內的顏色完成擬物的填色。



          同時色彩的使用還有一個重要的意義就是對圖標不同狀態的呈現,部分圖標會承擔按鈕的功能,包含默認、選中兩個基本狀態。


          普通權重的圖標,未選中狀態可以在默認色彩基礎上使用透明度來實現。



          高權重的圖標,則可以在選中的狀態替換色彩,或者更改圖標的類型,將原本的線性更改成面形并填充色彩制造反差。





          完成所有圖標的設計以后,最后一步就是切圖和導出了,這決定你的圖標能不能被正確運用到線上項目中。


          3.1 圖標的收納和命名


          在一套專業的 B 端項目中,已經設計好的圖標是設計規范的 “資產” 內容之一。圖標的文件不能散落在項目的各個界面里,而是在規范頁面中有統一的整理和收納。



          這種做法的流程是,先在軟件的規范庫中創建對應的圖標組件( Symbol / Compoent ),然后再在具體頁面中應用,方便后續的統一管理和修改。


          而在這個過程中,我們也需要對圖標有正確的命名方法,來確保團隊調用、檢索圖標的效率。通常,我的圖標命名規范如下:

          尺寸 / 類型 / 圖標名-狀態


          示例:

          48px/導航圖標/表盤頁-默認

          24px/一般圖標/搜索-默認


          “/” 號的引用主要是方便軟件中對組件層級進行劃分,而我調用圖標的規則勢必是先從尺寸開始,再選擇對應規格,最后類型和狀態。


          提前命名也是方便后續我們切圖和導出,但要提及一點,圖標的命名不要追求英文化,因為我們的詞匯量不可能實現正式的英文命名規則,只會寫一堆大家都看不懂的單詞。


          而開發在使用我們的圖標切圖時,也不會用我們之前取的命名,會根據自己的命名習慣重新命一遍,寫個讓他能看懂的名字遠比用亂七八糟的英文強。


          3.2 圖標的切圖格式


          接下來,就要解釋切圖的規則了。很多沒有經驗的設計師切圖就只是隨手加個切片,然后上傳藍湖發給開發自生自滅了,這是一個非常不合理的操作。


          再或者,強行使用 Fonticon 格式,而不管實際情況如何,造成最后實現效果完全不同步或實現不了。


          切圖是通過前端調用并在瀏覽器中進行顯示的圖形,而要被瀏覽器正常顯示,就有必要了解適合使用的切圖格式。


          圖片的格式包含位圖和矢量兩種,位圖是通過記錄像素色值的圖形格式,假設一張圖是 100*100 像素,那么記錄 1W 個像素點的色彩,所以無法支持無損縮放。而矢量則是通過記錄點線面的坐標繪制出顯示圖形的格式,可以支持自由縮放。


          理論上,矢量格式是最佳的圖標切圖格式,但是它的限制同樣有很多,例如:

          • 無法記錄漸變色

          • 導出輪廓容易有錯誤

          • 無法記錄擬物圖形

          • 無法記錄投影元素


          前面說過,普通項目中同一圖標是很少出現一會兒大一會兒小的需求,所以矢量最大的特征無損縮放,往往就不需要我們去考慮。矢量格式切圖的主要出發點是用來應對移動端顯示器 1x、2x、3x、4x 等不同倍率縮放的問題,而不是網頁端的基本使用。



          當一套項目中出現了矢量格式無法覆蓋的圖標時,那么即用矢量切圖,又用位圖,就會顯得非常的混亂。只有類似 LOGO 等圖形元素,才需要考慮 SVG 格式,而不是一看到圖標就上。


          所以,最適合切圖的格式就是位圖的 PNG 格式,一方面它是無損的,另一方面它支持透明背景,在切圖應用上可以完美和設計稿結合,而這是其它大多數位圖格式不具備的特征。


          當每次項目完成以后,并不需要通過藍湖來實現切圖的導出,如果切圖文件分散在各個項目頁面里,那么一定會有很多圖標被遺漏,尤其是圖標的不同狀態切圖。


          所以,最理想的切圖形式,就是將所有圖標完成整理和命名以后,一起框選,然后導出成 PNG 格式,再同步給程序員即可。






          以上就是關于 B 端圖標應用的所有知識點了。后續會將這些內容進行分拆,更新到原子核系列課程中去,會有更細節的案例說明。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:站酷 作者:酸梅干超人
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          如何選擇合適的圖標?來看這份圖標類型和風格匯總

          ui設計分享達人

          常見的分類是簡單的線性分類,缺少立體化的圖標分類思維。文章通過梳理來幫助大家對不同類型及風格的圖標有一個體系化的認知。


          大家好,我是Clippp。看到好的圖標我們會習慣性地截圖保存,但隨著收集的圖標越來越多,會發現對圖標的分類會變得越來越混亂…做設計時也不清楚到底該參考或運用哪種風格最合適。來看看如何解決這些問題!

          一、定義圖標類型

          對圖標進行分類時,普遍會遇到的問題是一個圖標有多種風格。例如下面這個水滴圖標,樣式很簡單,但可以劃分到多個類別中。

          面對這樣的問題,推薦使用系統性的結構來劃分圖標類別: 
          • 首先將圖標按尺寸大小分為兩類;

          • 繼續細分對應的面性、線性、線面結合、扁平、擬物化等類型;

          • 最后選擇標準、容器、漸變、3D、手繪、陰影等風格。

          利用這種結構層級,可以明確定義圖標類別。

          二、圖標尺寸

          圖標的大小取決于具體功能。例如帶有漸變和陰影的圖標看起來很酷,但把它縮小到16px,這些酷炫的效果都無法呈現出來。

          在對圖標歸類時,首先要考慮圖標用在什么位置需要多大尺寸。這里將圖標分為兩大類: 
          • 大尺寸圖標通常指標志性圖標,例如App啟動圖標或代表品牌形象; 
          • 小尺寸圖標用作UI控件,起到引導功能或裝飾目的。

          三、圖標類型

          確定圖標尺寸后,進一步細分圖標類型: 
          面性圖標 
          線性圖標 
          線面結合圖標 
          扁平化圖標 
          擬物化圖標 


          利用這種簡單的分類方式就能避免圖標發生重疊。另外擬物化這種細膩的風格不適用于小尺寸圖標中,所以在小圖標分類中沒有展示。

          四、圖標組成


          圖標尺寸越小,展示的細節越有限。相比于大圖標,小圖標的尺寸有一定局限性,圖標組成包括 標準和容器兩種。 


          大圖標利用尺寸上的優勢能展示更多內容,分為多種組成形式。

          五、小尺寸圖標樣式


          簡單的圖像可以更具包容性。圖標的尺寸越小,越考驗設計師傳達信息的能力。 

          1.面性圖標

          1.1標準面性圖標

          面性圖標易識別,適合應用在小尺寸圖標中。 
          關鍵點:
          確保圖標有清晰的邊緣,避免羽化; 
          圖標復雜程度隨著尺寸變小而靈活調整。 

          1.2帶有背景色的面性圖標

          彩色背景為簡約設計帶來了更多可能。通過這個技巧使面性圖標更友好,更具吸引力。 
          關鍵點:
          為背景選擇4-12種顏色。 
          考慮圖標是淺色還是深色,是否適用于所有背景色。 
          在彩色背景上使用白色圖標比黑色效果更好。 

          2.線性圖標

          2.1標準線性圖標

          線性圖標因為簡潔性和現代性而受到用戶的歡迎。隨著屏顯越來越清晰,我們可以更加大膽地使用線性圖標。 
          關鍵點:
          確保輪廓像素清晰。 
          越簡單越好。 
          追求更簡單的細節。 

          2.2雙色線性圖標

          設計小尺寸圖標時,必須放棄細節并強調簡單的形狀。但當使用一種顏色效果不太理想時,可以考慮添加一些顏色。 
          關鍵點:
          使用兩種搭配和諧的顏色。 
          考慮將一種顏色用于主要形狀,另一種顏色用于細節。 
          少即是多。 
          使用粗線條。 

          3.線面結合圖標

          線面結合擁有更多細節,提升用戶的愉悅感。 
          關鍵點:
          最好使用深色而不是純黑色描邊。 
          限制圖標的顏色種類。 
          避免過多細節。 

           4.扁平化圖標 

          扁平化圖標既簡單又巧妙,表達品牌形象的同時具有豐富的內涵。 
          關鍵點:
          避免在<20px的尺寸中使用此圖標樣式。 
          選擇2-3種顏色,可以一起使用。 
          一種顏色為主色,另一種顏色應為高光/細節色。 

          六、大尺寸圖標樣式

          大尺寸圖標在界面中使用較少,更多用于產品標識或品牌宣傳。 

           1.線性圖標 

          1.1標準線性圖標

          在設計任何圖標前,都可以先創建一個線性輪廓,確保形狀看起來足夠美觀后再添加顏色。 
          關鍵點:
          這類圖標最容易制作。 
          避免出現輪廓羽化。 
          線條粗細要一致。 
          不要害怕添加細節。 

          1.2漸變線性圖標

          添加一些漸變能讓原本單一的線性圖標賦予更多的個性。 
          關鍵點:
          在小尺寸圖標中添加漸變會降低圖標的可視性。 
          選擇漸變時,首先考慮鄰近色。 
          線條越粗,漸變越明顯。 
          線條細節越多,漸變越明顯。 

          1.3等距線性圖標

          2.5D圖標做起來會花費很多時間,但效果會很好。在設計汽車、房屋、家具等實體產品時,建議優先使用2.5D圖標。 
          關鍵點:
          同一組圖標要使用相同的等軸測網格。 
          2.5D等軸圖標很復雜,在較小的尺寸下會失去作用。 
          如果可以,讓所有圖標都朝向同一個方向。 

          1.4手繪線性圖標

          隨著設計趨勢向簡約化、扁平化發展,很多設計師喪失了手繪圖標的能力。實際上手繪圖標讓品牌更真實甚至更有趣。 
          關鍵點:
          手繪圖標掃描后,再用數字方式重新繪制,這樣可以保證線條粗細一致。 
          盡量讓所有的線條保持相同的顏色,這會使文件更小。 

          1.5斷線圖標

          標準的線性圖標看起來可能會很單調,而簡單靈活的斷線處理能為圖標增加更多個性。 
          關鍵點:
          斷線粗細應該相同。 
          圖標的中斷次數盡可能保持一致。 

          1.6雙色線性圖標

          關鍵點:
          確保兩種顏色具有相同的對比度,否則可能會導致用戶看不清其中一種顏色,因此無法識別完整的圖標。例如左下角的淺綠色對于視力弱的用戶來說就很不友好。 

          2.線面結合圖標

          線面結合圖標可以看作是添加顏色后的線性圖標。線面結合具有很強的輪廓,讓圖標能夠清晰可見。 
          2.1標準線面結合圖標

          關鍵點:
          使用有限的顏色和統一的線條風格,使圖標具有品牌性。 
          使用線條和點來添加更多細節。 
          避免使用純黑色描邊。 

          2.2帶有背景色的線面結合圖標

          關鍵點:
          描邊斷開時,圖標效果很更好。 
          避免在小尺寸時使用。 
          使用有限的調色板。 
          考慮使用較淺的描邊/背景色。 
          考慮在圖標下方添加一條水平線,使圖形具有相同的位置(中間的圖標示例) 

          2.3錯位線面結合圖標

          當填充色與描邊錯位時,顏色移到右邊圖標左上角留出高光,帶來一種清新的感覺。 
          關鍵點:
          考慮使用斷線描邊。 
          使用有限的調色板。 
          確保描邊和填充色簡單且一致。 

          2.4色塊圖標

          這種風格的圖標的特點在于并不依賴于顏色,僅將其用于裝飾。 
          關鍵點:
          選擇有限的調色板。 
          先關注輪廓再關注顏色,顏色僅用于裝飾。 
          避免形狀色和背景色過于相似,降低可見度。 

          2.4單色線面結合圖標

          關鍵點:
          避免使用暖色調尤其是紅色,會讓用戶感到壓抑。 
          首先確定合適的描邊顏色,再考慮填充色。 

           3.扁平化圖標 

          扁平化圖標通常沒有描邊,主要使用形狀和顏色來完成組合搭配。簡潔、友好和適當的細節,讓這類圖標非常具有吸引力。 
          3.1標準扁平化圖標

          關鍵點:
          使用柔和的調色板,避免明亮的顏色。 
          分清簡化和添加細節之間的界限。 

          3.2帶有容器的扁平化圖標

          嘗試讓圖形打破容器,帶來動態的感覺。 
          關鍵點:
          嘗試讓圖形從容器中凸出來,以增加深度。 
          因為在容器中,可以添加更多的細節而不用擔心圖形變得混亂。 
          嘗試使用正方形、橢圓形或與品牌相關的容器形狀。 

          3.3等距圖標

          關鍵點:
          保持所有圖標朝向同一方向。 
          選擇恰當的調色板能讓圖標看起來更一致。 
          避免小尺寸使用。 

          3.4半陰影扁平圖標

          半陰影圖標是在扁平圖標的基礎上添加半色調陰影,得到更具個性的圖標。 
          關鍵點:
          小尺寸圖標不起作用。 
          使用有限的調色板。 
          確保所有的圖標色調相似。 

          3.5長陰影扁平圖標

          當圖標位于容器中時,可以考慮添加長陰影,主要包括純色陰影和漸變陰影兩種類型。 
          關鍵點:
          使容器具有相同的顏色或類似的色調。 
          只在大尺寸圖標中使用。 
          將半陰影與長陰影組合使用效果更好。 

           4.擬物化圖標 

          擬物化圖標實際上已經包含了大部分的樣式,例如它們是立體的,有豐富的漸變和陰影。 

          這種風格的圖標看起來與現實生活中的圖標盡可能類似,讓用戶感到更舒適。 
          關鍵點:
          考慮添加底部陰影。 
          使光源來自同一方向。 
          確保圖標都朝向相同的方向。 
          目前絕大多數界面不在有這種風格的圖標,可以考慮使用3D建模來實現這種效果。 

          總結

          希望大家能對圖標的分類及設計有更全面深入的認識,從而構建一套完整的圖標思維體系。

          文章來源:站酷  作者:Clippp
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          日歷

          鏈接

          個人資料

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

          存檔

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