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

          首頁

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

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

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

          高大的標志

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

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

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

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

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

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

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

          儀表盤設計的 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??吹胶玫膱D標我們會習慣性地截圖保存,但隨著收集的圖標越來越多,會發現對圖標的分類會變得越來越混亂…做設計時也不清楚到底該參考或運用哪種風格最合適。來看看如何解決這些問題!

          一、定義圖標類型

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

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

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

          • 最后選擇標準、容器、漸變、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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          一個ICON設計過程的價值挖掘

          資深UI設計者

          每一個設計需求的背后都必然有其商業邏輯在里面,所以在拿到設計需求后,嘗試多去問幾個為什么。有什么樣的商業目標?為什么做這個功能?用戶是誰...當你琢磨清楚這些之后,并以此為出發點的設計方案,必然是有據可依、有說服力的,多角度的參與產品設計也更能體現設計師的價值、培養全局觀。


          商業目標是個大方向,有了目標就會產生解決方案(需求),當然方案可能不只是一種類型(可能是APP、網站、宣傳H5或宣傳海報等),設計師負責的去做的可能只是其中的一種。


          以我參與過的冬奧會某冰雪 APP TAB 欄的 ICON 風格設計為例:


          01

          業務溝通,商業目標分析,明確設計目標


          這個階段一定要多去溝通、溝通、再溝通,如果是產品公司,那么需要去和產品、研發、市場等多部門溝通;如果是外包項目,那么就需要和客戶多次溝通。退而求其次,也要和負責該項目的直屬領導多去溝通,以求更精準的了解商業目標,最終明確設計目標,從而為接下來的設計創意設計指明方向。



          該項目為二次設計外包項目,著手出圖之前,我和該項目負責人、項目小組成員多次深入的討論了甲方為了什么目的去做?從而確認了商業目標:“傳播冰雪文化,激發人們對冬季運動的興趣和熱情”。


          這是個大方向,接下來去考慮用什么形式承載,可能是常見的APP、網站、小程序...(這個形式還需要考慮下目標用戶的使用習慣)。以及更具體的有哪些內容分類、個性化主題設計、互動形式等。


          最終,該項目負責人決定采取安全策略(作為項目負責人,對投入產出比等全局性因素的考量是極其重要的),先做一款內容型APP,內容分類借鑒、提煉幾款APP的精華,暫不考慮獨創功能。


          雖然有時候結果未必和自己期待的一致,但積極去參與的過程是應該的。。



          知曉了商業目標和產品內容,接下來就有方向了。我將設計目標定為:將設計與“水凝化冰、冰積成雪”的物理現象相結合,體現冰雪主旨,烘托冬季競技氛圍。



          02

          創意分析,設計推演


          這個階段重點在于說服力,或許關系到客戶是否買單。由于是內容型產品,內容結構上和其它APP并無太大區別,那么客戶會不會想:你們是不是抄了一個軟件,改了改就發給我了。?;诖?,我在設計創意推演前,做了內容分類由來的分析。


          人類接受信息的三種方式:視覺、聽覺、觸覺,對用戶傳達冰雪文化采用這三種手段,規劃APP內容,視覺:圖文資訊、視覺畫面;聽覺:音視頻、直播;觸覺:榜單、互動等。



          借用“水凝化冰,冰積成雪”物理現象,結合基因創意法,對 ICON 進行設計推演,緊扣冰雪主旨。



          通過品牌LOGO取色法,提煉 ICON 配色。



          03

          設計執行


          到了這個階段,基本的設計思路應該是比較清晰了,剩下的細節打磨就可以自由發揮了。



          至此,一個ICON的設計已完成。該過程的最大價值在于:幫助項目理清了整個項目的核心價值、創意思路與設計提案思路,甚至可以由此推測到未來產品的功能規劃方向,當然最重要的是協助項目負責人成功拿下了項目。




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

          文章來源:站酷   作者:空白思維

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

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

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


          這6種類型的菜單圖標和用法

          資深UI設計者

          一個簡單的漢堡菜單就可以包括多種不同的樣式,可能有的樣式甚至沒有官方的名稱,但因為樣式的差異在功能上這些菜單也會出現差異性。

          我們可以通過分析這些樣式,來思考不同的樣式代表著怎樣的設計含義和設計目的,不能因為簡單常見而忽視了功能的內核。

          漢堡菜單

          這6種類型的菜單圖標和用法,這篇全總結了!

          關鍵詞:橫條、多個菜單選項

          這個圖標的樣式簡潔易懂,通常位于網頁和 App 的上下角,用來告知用戶這個按鈕之外還有更多內容可以探索。

          當產品有多個菜單選項時,考慮使用漢堡圖標來顯示,但盡可能避免在桌面視圖中使用。

          垂直三點式菜單

          這6種類型的菜單圖標和用法,這篇全總結了!

          關鍵詞:垂直、內嵌菜單

          通常位于屏幕或窗口的右上角或頂部,是用于打開帶有附加選項的圖標,打開的內容往往是一個較小的內嵌菜單而不是整個全新的頁面。

          水平三點式菜單

          這6種類型的菜單圖標和用法,這篇全總結了!

          關鍵詞:水平、內嵌菜單、web

          水平三點式菜單同樣常位于屏幕或窗口的右上角,用于打開菜單或顯示相關項的操作。

          因為圖標樣式是水平的,所以更容易在 web 上或者在表格等水平方向中使用。

          九宮格菜單

          這6種類型的菜單圖標和用法,這篇全總結了!

          關鍵詞:子分類、子功能

          九宮格菜單通常用于打開同一產品中包含不同子產品或子功能,可以在它們之間快速切換,此圖標常位于產品主頁的右上角。

          過濾式菜單

          這6種類型的菜單圖標和用法,這篇全總結了!

          關鍵詞:過濾、排序

          過濾式菜單由三行不同長度的線段水平疊放而成,是最廣泛使用的過濾符號??梢詫⑦^濾式菜單與“排序方式”選項結合使用,或者與全局過濾器結合使用。

          漢堡菜單變體

          這6種類型的菜單圖標和用法,這篇全總結了!

          關鍵詞:樣式特殊、時尚感更強

          作為漢堡圖標的替代品,與顯示列表菜單的目的相同嗎,但是這些樣式我們平常見的可能會比較少,更常用在充滿現代感、時尚感和藝術感的網站上。

          這6種類型的菜單圖標和用法,這篇全總結了!

          最后

          不同的樣式可能代表著截然不同的設計目的,常思考這些小而精的細節,是保證產品體驗提升的關鍵。

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

          文章來源:優設   作者:Clip設計夾

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

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

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



          版式設計沒思維?這樣做讓你事半功倍!

          周周


          再過幾天就又雙叒叕到「雙十一」了,身邊的許多朋友已經開始忙著囤優惠券,找鏈接了,而做為「設計“獅”」的我卻還在連夜趕著各大品牌和公司的「宣傳海報」,整天埋在做圖—改圖—再做圖的循環中,不知道各位設計大大們最近的生活是不是也跟我一樣呢。

          版式設計沒思維?這樣做讓你事半功倍!

          好了,在開始今天的干貨分享之前,我想先請大家一起來看幾張海報:

          版式設計沒思維?這樣做讓你事半功倍!

          看完之后,大家有沒發現這幾張海報有什么特點呢?

          沒錯,他們的共同之處就在于,雖有通篇的文字,但畫面依舊充滿著空間結構感、層次感,而輔助圖形的運用更是起到了點睛之筆的作用,給人眼前一亮的感覺。想必有的小伙伴肯定在思考,這是為什么呢?

          版式設計,對,就是「版式設計」。

          相信大家都曾有過,熬了一整晚,好不容易設計出幾個畫面的元素,結果看著一大堆的文字和圖片,心中頓時思緒萬千,腦海中卻一片茫然,折騰來折騰去,還是不知道該如何排版才好的經歷。

          版式設計沒思維?這樣做讓你事半功倍!

          在當今這個高速發展的時代,無論是紙質媒體還是新媒體,信息的傳播都離不開版式設計,一副好的版式設計作品,可以在有限的頁面內,以最快速、最直接、最有效的方式傳遞出核心的內容和信息,并讓讀者和受眾留下深刻而良好的印象。

          所以,今天我就給大家分享一些版式設計知識,希望可以帶給你些許靈感,幫助你早日做出爆款的設計作品~

          曾在一本版式設計書上看到其對板式設計是這樣定義的:“版式設計既版面編排,就是把特定的視覺信息要素,根據主題表達的要求在特定的版面上進行的一種編輯和安排?!?/span>

          即排版并不是指簡單的「東拼西湊」,而是需要經過合理化的對照排列整合,以此傳遞出高效的信息和特性差異的畫面。

          對比與突出

          對比又稱為「對照」,即把具有明顯差異和矛盾的視覺元素配置在一起,碰撞出特性差異的現象,從而使主題更加的突出,視覺效果更加跳躍。具體又分為大小對比、粗細對比、虛實對比、主次對比等。通過利用不同方向、大小、粗細的字體重新排列整合,以突顯出畫面的主次信息,正如下面的幾張海報。

          版式設計沒思維?這樣做讓你事半功倍!

          △ 圖一:大小對比

          版式設計沒思維?這樣做讓你事半功倍!

          △ 圖二:虛實對比

          版式設計沒思維?這樣做讓你事半功倍!

          △ 圖三:主次對比

          字體的協調與統一

          文字作為「語言符號」,無論在何種視覺媒體中都直接影響版式的視覺效果,在提高作品訴求力的同時也賦予了版面審美的價值觀。在選用字體時,我們應當依據設計風格來決定,不同風格的作品,選擇不同的字體形式。而協調則是指畫面內在的東西,元素、字體配合得適度和恰當。即說明他們內在相似的東西或狀態,以達到畫面相統一的風格。

          版式設計沒思維?這樣做讓你事半功倍!

          △ 圖四:風格統一

          版式設計沒思維?這樣做讓你事半功倍!

          △ 圖五:顏色統一

          版式設計沒思維?這樣做讓你事半功倍!

          △ 圖六:元素統一

          構成與比例分配

          版式設計有很多種的構成方式和方法,一切美的東西皆有規律,三分法、白銀比例、黃金比例就是其中的代表。

          三分法(1:2)即「井字構圖法」,是日常生活中最常見的一種構圖手法,通過將視覺重心或者最吸引人的東西靠近四條線的相交處,使「畫面和諧」的同時,也達到了「突顯主體」的目的。

          版式設計沒思維?這樣做讓你事半功倍!

          △ 圖七:三分法

          白銀比例(1:1.414),也是在排版設計中最為常見的比例,給人一種「安穩恬靜」,「愜意」的感覺。

          版式設計沒思維?這樣做讓你事半功倍!

          △ 圖八:白銀比例

          相對于其他比例而言,黃金比例(1:1.618)則顯得更加突出,正如它的名字,常常給人一種「恰到好處」、「自然」的感覺、無論是在LOGO設計中、還是排版設計、抑或是攝影中,靈活的運用黃金比例,都能夠帶來不錯的效果。

          版式設計沒思維?這樣做讓你事半功倍!

          △ 圖九:黃金比例

          怎么樣,看完之后,有沒有找到一些靈感呢


          文章來源:優設網    作者:藝海拾貝Design


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




          日歷

          鏈接

          個人資料

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

          存檔

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