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

          首頁

          如何做B端體驗標準化:以數據可視化場景為例

          seo達人

          圖片

          業務背景

          以我們 CCO 體驗設計團隊為例,主要服務阿里體系的消費者、商家、經濟體等業務領域。隨著業務不斷擴大、用戶角色多、體驗復雜、設計師人力有限、定制化需求不斷增加,設計面臨嚴峻挑戰。

          1、業務多:30多個產品應用

          2、角色多:覆蓋消費者、客服小二、服務管理、業務運營、中臺管理、客戶  6大類用戶群體。

          3、體驗復雜:設計師需兼顧用戶和客戶兩個視角。

          圖片

          從組織上,85% 設計師縱向支撐業務,15% 設計師橫向做標準化,反哺業務設計師。標準化實質解決的問題是保障基礎體驗一致性。

          圖片

           

          圖片

          標準化怎么做

          核心通過頁面梳理、抽象、分發、衡量,保障基礎體驗一致性。

          圖片

           

          圖片

          案例實戰

          以數據可視化場景為例,講述如何做標準化。

          1、業務現狀

          共有11個應用,涉及89個頁面。

          圖片

          2、問題

          體驗不一致:各個工作臺頁面架構、組件、樣式野蠻生長,缺少規范導致體驗不統一。

          低效:部分場景缺失,組件重復建設,大量定制;溝通協同內耗大,成本高。

          圖片

          3、策略

          體驗統一:框架、組件、樣式。

          提效:代碼化、工具、交付機制。

          4、體驗統一

          包括框架、組件、樣式。

          圖片

          框架

          (1) 現有頁面收集

          圖片

          (2) 用戶場景分析

          圖片

          (3) 頁面歸類

          結合用戶看數內容(例:概覽、分析、詳情)和交互形態(例:平鋪、下鉆),對頁面進行歸類。

          圖片

          (4) 確定典型布局

          通過統計高頻復用形態,確定典型布局。

          圖片

          組件

          (1) 頁面結構分析

          組件的收斂,需要先對頁面分析,確定模塊層內容。例:模塊包含頁頭、篩選、圖表、表格。

          圖片

          (2) 模塊層分類

          橫向收集全部業務,將模塊層分類。細分模塊擴展形態,放到對應的簍子里。

          圖片

          (3) 模塊專項治理

          接下來,需要對每一個模塊進行專項治理。比如圖表模塊,再拆再抽象成指標、圖表、單選、多選 4類場景。場景里再對主體和變體(也就是擴展形態)分類。

          圖片

          圖片

          樣式

          (1) 確定優化內容

          圍繞視覺凌亂,要做的便是完善設計語言。設計師需要結合自身技術底層,補充缺失規范。例如布局、色板、字體、動效。

          圖片

          (2) 確定組件范圍

          通過統計高頻復用組件,確定需要梳理的組件范圍。

          圖片

          (3) 布局

          圖例位置:線上有9種,通過從業務場景按閱讀順序劃分,最終收斂成2種。

          圖片

          組件高度:真實線上情況,只能看2個指標,高度規范缺失。

          圖片

          需要根據用戶分辨率調研,提煉典型分辨率。比如用戶是win系統,包含菜單欄、任務欄等默認高度,再減去本身頁面頁頭等默認高度,得到 3 檔。確定組件建議默認行高 240px。

          圖片

          軸標簽旋轉角度:現狀有順/逆時針兩種,通過分析標簽類型,結合閱讀順序、軸與標簽親密度,確定默認角度為順時針。

          圖片

          (4) 色板

          通過場景梳理,確定不同組件使用的色板類型及缺失色板。

          圖片

          補充語義色板:從業務里抽象2類場景,指標和柱/餅/環場景,定義顏色。例如帶正面語義,用綠色,比如升、已到崗、正常。帶負面語義,用紅色,比如降、曠工、失敗。

          圖片

          (5) 字體

          結合自身業務場景問題,從場景、版權、風格、識別、極值共5個維度選擇字體。

          圖片

          舉例場景一,縱向數據場景里,將市面上數據競品用到的字體都橫向鋪開嘗試,做排除法。比如din沒版權,蘋方非等寬字體,普惠102識別性弱。

          圖片

          舉例場景二,在核心數據呈現中,helvetica 品牌風格弱,普惠在1億以上極值過寬。

          圖片

          最終我們根據自身業務場景特征,用普惠和普惠102,運用在對應場景里。并同前端提煉規則。

          圖片

          (6) 動效

          首先,需要確定動效價值,明確動效需要解決的問題。這里圍繞舒適度、活力、層級、反饋來講。

          圖片

          通過動效場景鏈路分析,確定優化范圍。

          圖片

          加載動效:圍繞讓用戶認知過程更為自然。通過組件橫向梳理、抽象圖形、組合樣式的思路,輸出方案。比如這里共梳理17種組件類型,抽象成9類,包括點、線、面、餅、環、柱、文本、圖標、詞云,再進行組合產出方案。

          圖片

          出場動效:通過業務分析、提煉場景、優化效果。比如這里共提煉 3類場景,有通用、監控、輿情。圍繞過渡不自然、卡頓、缺少情感化表達來優化效果。

          圖片

          圖片

          瀏覽動效:通過提煉場景,來強化元素之間的層級與空間關系。比如單個組件、聯動、下鉆場景下,圍繞點擊感知弱、重點不突出、缺少懸停態來優化效果。

          圖片

          沉淀速度參數:將優化動效場景的速度參數,同前端約定規則沉淀組件庫。

          圖片

          5、提效

          包含代碼化提效、工具提效、機制提效。

          圖片

          整體思路

          從設計組內到技術產研的提效過程。

          提效面向用戶依次是:組件設計師、業務設計師、前端、產品。

          搭建目前還在進行中,這里主要從交付-工具-代碼化來分析。

          圖片

          交付內容

          1、業務設計師:sketch/figma物料 (樣式、組件、區塊、模板、規則 )

          2、業務設計師:kitchen工具(樣式、組件、區塊、模板)

          3、組件工程師:組件規范/組件官網

          圖片

          交付機制

          新需求:通過評估復用性、抽象、內審、沉淀物料。

          現有業務:通過頁面梳理歸類、抽象、內審、沉淀物料。

          圖片

          6、衡量

          從物理到行為層,包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標準化覆蓋的好壞。

          圖片

           

          圖片

          總結

          回歸課程,在B類業務里,服務多個產品、多用戶角色、體驗復雜的場景下,在定制化+標準化團隊陣型里,標準化實質解決的問題是保障60分基礎體驗一致性。

          圖片

          總結:B端體驗標準化包括物料的產出、交付以及衡量標準。

          產出:包括框架、組件、樣式的收斂來梳理、抽象頁面。

          交付:面向2類用戶群體,業務設計,需交付物料和工具。組件工程師,代碼化需提供組件規范,組件線上化需助力組件官網的建設。

          衡量:一致性評分包括樣式、組件、框架及組件交互。

          圖片

           

          原文地址:AlibabaDesign(公眾號)

          作者:CCO 設計

          轉載請注明:學UI網》如何做B端體驗標準化:以數據可視化場景為例

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

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

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

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

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



          5個超酷的標題設計技巧,So easy!

          seo達人

          01.加橢圓曲線

          圖片

          這個技巧最近可以在很多設計中看到,效果很時尚、很現代,過稿率超高,并且操作起來也非常簡單。 
          ? 在AI中輸入標題,選擇一比較簡單、現代的字體,當然,自己設計的也行。

          圖片

           

           

          ? 用橢圓工具畫一個橢圓線框,線的描邊不要太粗,然后使其與標題斜交叉。

          圖片

           

           

          ? 把橢圓與文字重疊部分的線刪除。

          圖片

          也可以把橢圓復制一層,描邊顏色填充成白色,然后把描邊模式改成“使描邊內側對齊”,做出橢圓把文字進行裁剪的效果,當然,也可以真的做裁剪。

          圖片

          圖片

           

           

          ? 畫一個四角星放在橢圓的路徑上,并使其左右兩邊與橢圓路徑隔開一點距離。
          圖片

          圖片

          ? 顏色可以根據自己的需求進行更改,做完了。

          圖片

           

           

          02.曲線疊加

          圖片

          這也是很簡單的一個技巧,適合用在電商詳情頁、微信長圖、折頁等設計中。 
          ? 在AI中輸入標題,最好再配一個英文標題作為裝飾。

          圖片

           

           

          ? 選擇畫筆工具在標題上“隨意”畫一條曲線,要注意整體的美觀性與平衡性,線條描邊不要太粗,以免對標題形成過大干擾。

          圖片

           

           

          ? 給線條填充一個比較鮮艷的顏色就完成了。

          圖片

           

          另外,還可以通過描邊面板中的選取效果功能,給該描邊路徑添加一些藝術效果,就能得到不同質感的曲線。

          圖片

           

           

          03.波紋效果

          圖片

           

          ? 在Ai中輸入一個標題,然后按快捷鍵:Ctrl+shift+O將其轉曲。

          圖片

           

           

          ? 用橢圓工具在標題正中央畫一個小圓,然后復制一個圓,等比拉大到類似下圖的位置。

          圖片

          ? 同時選中兩個圓框,并用混合工具依次點擊這兩個圓的描邊位置,再雙擊混合工具,把指定步數改成5,得到如下效果。

          圖片

          圖片

           

           

          ? 將圓形組擴展描邊,使描邊變成形狀,然后一起選中圓圈和文字,打開路徑查找器,選擇修邊效果。

          圖片

           

           

          ? 取消群組,單獨把圓圈部分群組,并把透明度降低。

          圖片

           

           

          ? 根據圓圈波紋的路徑,用鋼筆工具給文字往外增加類似下圖的小色塊,上、下、中間都要有。

          圖片

          圖片

           

          ? 刪除掉圓圈路徑,保留最中間的小圓圈,因為此處的小圓圈沒有與文字重疊,最后,再變換一下顏色就完成了。

          圖片

          圖片

           

           

          04.扭曲效果

          圖片

          這種扭曲效果有點像可口可樂的飄帶圖案,用作海報標題還不錯,做法同樣很簡單。 
           
          ?在Ai中輸入標題(字數在4-8之間效果比較好),然后將標題轉曲,并把文字分為最右兩組。

          圖片

          ? 選中第一組文字,在頂部菜單欄中選擇對象-封套扭曲-用網格建立,然后在彈出的參數面板中把網格行數和列數全部設置為1。

          圖片

          圖片

           

           

          ? 拖動網格框的四個角上的錨點和手柄,將文字扭曲成下圖效果。

          圖片

           

           

          ? 采用同樣的方式將第二組文字扭曲成如下效果。

          圖片

           

           

          ? 將文字復制到Ps中,并填充成白色,背景色設置成黑色。

          圖片

           

           

          ? 用畫筆工具在文字“轉”和“星”的轉角處涂一點灰色,再添加一點雜色,做完了。

          圖片

           

           

          05.火焰文字

          圖片

          火焰文字不是啥新鮮的效果,不過搭配上對比很強的漸變色,效果也是很酷的。 
           
          ? 在PS中新建一個畫板,將背景色填充成黑色,然后輸入一個標題,任意填充一個顏色,然后刪格化文字,并通過變換扭曲工具將標題扭曲成如下效果。

          圖片

           

          ? 按快捷鍵Ctrl+J將文字復制一層,并將上面的這一層鎖定,選中下面這一層,然后選擇涂抹工具,把強度值設置為70左右,沿著文字的上沿用涂抹工具向上呈曲線涂抹。(為了涂抹時每個文字不相互影響,可以以每個文字單獨建立一個圖層。)

          圖片

           

          ? 通過調整涂抹工具的畫筆大小重復涂抹,火苗的長度大概是文字高度的兩倍左右,盡量保證火焰的底端與文字的頂端是對齊的。

          圖片

           

          另外,整體火焰的形狀要盡量自然、飽滿,相連文字之間的火焰輪廓要形成互補關系,有瑕疵的地方可以用畫筆輔助涂抹一下,得到如下效果。

          圖片

           

           

          ? 將文字層和涂抹層分別填充上漸變色,注意文字的頂端與火焰的底端顏色要是相同的,使其有融為一體的感覺。

          圖片

           

           

          ? 將文字和涂抹圖層組合起來,并復制一層進行合并處理,執行高斯模糊效果,選擇一個合適的模糊數值,顏色填充為高飽和度的深藍色,塑造出發光效果,如果覺得不明顯是可以復制一層。

          圖片

           

          ? 文字下沿的發光可以適當減弱一點,由于火焰圖層的顏色受藍色發光影響比較大,可以把火焰圖層再復制一層,到這里火焰標題就做完了。

          圖片

           

          注:這個效果跟參考中的效果不大一樣,因為我覺得ps中的涂抹工具做出的效果更像火焰,如果想要參考中的效果可以用液化濾鏡中的向前變形工具或AI中的變形工具進行涂抹,也可以直接用鋼筆工具勾輪廓。

          圖片

          任何技巧都不是萬能的,用在合適的地方可以錦上添花,用在錯誤的地方就是災難,所以大家對自己的設計需求要有正確的評估,一切以得到好的效果為最終目的。

           

          原文地址:蔥爺(公眾號)

          作者:蔥爺

          轉載請注明:學UI網》5個超酷的標題設計技巧,So easy!

          這5大要素讓你快速搞定極簡設計風格

          純純

          少即是多。極簡主義的概念可以用這句足夠極簡的話進行總結。而且它不僅僅是一種設計理念,更是一種生活理念,甚至于是一種系統的思維方式,而不僅僅視作為一種「更干凈」的視覺風格。


          在設計當中,極簡主義是呈現內容的諸多藝術概念之一,應用范疇非常廣。極簡主義是使用盡可能少的素材和色彩,以有限的形態和元素,來呈現信息。


          在數字產品設計當中,極簡主義,是一個相當考驗技術的門類,如何從「簡單」跨越門檻,走到到「極簡」,其實并不容易。


          今天的文章,是一篇「相對極簡」的「極簡主義設計指南」,掌控好下面的 5 大要素,應該就能夠很好地拿捏這種風格。


          每一個要素下面都有一些頗為具有代表性的設計范例,這些作品的參考價值還是蠻高的 ~


          1、留白

          有沒有聽說過「白紙綜合癥」?當你在畫畫或者創作的時候,面對著空無一物的白紙,陷入焦慮的情緒的狀態,就是「白紙綜合癥」。


          這種狀態廣泛存在,這種病癥很多人都有,尤其是設計師。而當你在設計風格簡約的作品的時候,需要你學會擁抱白紙,面對留白,因為「留白」也是一種元素。


          相反,在極簡主義的設計當中,過多的視覺元素會讓整個設計顯得不堪重負,降低可用性和易讀性。


          留白的使用方法很多,但是最主要的方式,是讓留白以外的元素,僅保留必須的部分,把留白視作為一個必須的模塊,考慮如何保持可見的元素和留白之間的整體平衡。



          2、色彩

          留白當然不一定是白色,也可以是其他的顏色,你還可以搭配各種不一樣的配色方案和組合。


          色彩和留白的結合是很自然的選擇,兩者能夠更好地賦予設計以更強的情緒和個性化的視覺,制造整體氛圍。


          但是值得注意的是,除了留白使用一種顏色之外,其他元素的色彩也盡量不要用得太多太花。簡單的色彩搭配更容易營造出對比,在不復雜的配色體系下,制造出出色的視覺效果。


          盡量將主要配色控制在 1~2 種,對比色能夠營造出更強的戲劇感和視覺張力。



          3、圖片與插畫

          「一圖勝千言」是被說爛了的老話,但是這句話怎么說都是對的。單張圖片能夠承載的信息量是巨大的。不過一樣的,插畫在極簡主義設計當中的應用也是相當講究的。


          通常而言,你需要將插畫當作重要的視覺焦點來使用,讓它周圍有足夠多的留白,這樣能夠保持極簡設計應有的呼吸感。


          這個時候,經典的排版布局方式就可以發揮極大的作用,左右布局、上下布局、中心式布局等等等等,不用復雜的花樣,就可以制造出讓人驚喜的效果。


          當然,記得控制好元素和整體布局之間的空間比例。



          4、文本和版式

          當然,配色、圖片和留白都說了,剩下就是文本的部分了。文本在極簡主義設計當中的使用方式也有一些事項值得注意。


          文本排版在極簡主義設計當中的玩法當然也很多,實驗性的文本排版和布局設計是很多設計師提升極簡設計的視覺觀感的一種有效的方式,結合一些比較獨特的配色或者效果,都可以。但是無論哪種,在「想法」上要保持極簡——不要想在一個設計中承載過多的排版方式和元素,你最好著力表現一種「理念」,或者一種排版風格,呈現某一種的氣質,千萬不要摻雜太多的想法。


          此外,相對傳統的字體設計也同樣可行,適當地運用一些個性化的排版技巧,就可以了。



          5、圖形和圖案

          從包豪斯和瑞士現代主義設計開始,圖形元素就很好地同極簡主義設計結合到一起。


          你可以充分發揮你的創造力,使用獨特的圖案來提升極簡設計的視覺效果,也可以從其他已有的設計當中汲取靈感,提取元素,應用到你的構圖和元素當中。


          圖形與圖案其實可以玩的花樣很多,如果不是作為視覺主體的話,其實適當的裝飾即可。作為視覺焦點存在,強化形式感就好,不必要弄的太過于繁復。



          結語

          極簡主義設計并不復雜,重點在于你怎么簡化整體設計,如何將有限的元素打磨好,控制留白和主次,從而以較少的內容呈現出豐富的效果。當然,在把握的核心要義之后,多研究一下成功的案例,其實你也可以做很好。

          原文地址:站酷
          作者:大蔥設計

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

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

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

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

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




          玻璃態射是新擬物風格的“進化”?

          純純

          玻璃擬物風格誕生


          UI圈兒刮起了一股勢頭猛勁的新擬物風(Neumorphism),起因是烏克蘭設計師亞歷山大·普盧托 (Alexander Plyuto) 在 Dribble 平臺發布了一張應用了新擬物風格的UI作品,便引發了圈內的激烈討論,更一直占據著當時的熱點榜首。此風格出現后,也給流行的扁平化設計添加了新的展現形式。


          普盧托的《Skeuomorph Mobile Banking》,在Dribble獲得了3000多次喜歡


          也有一些非常著名的品牌公司在設計上結合了新擬物風格,像三星召開的Galaxy Unpacked活動、MKBHD的介紹視頻等,效果都很出彩。當趨勢熱潮退去,新擬物風格并沒有像一部分評論者堅持的那樣,“洗牌”式地接管整個設計圈。


          三星 Galaxy Unpacked 活動


          MKBHD在2020年的簡介中使用了這種風格


          如何定義Glassmorphism?


          復習結束回歸正題,我們看到現今又出現了一種新樣式—Glassmorphism,字面上由玻璃(glass)和擬物化(skeumorphism)組成,叫法頗多:玻璃擬態、玻璃擬物化設計、玻璃擬物風格,其實意思都對,它比新擬物風格更直觀清晰。那么,玻璃擬物風格最具有定義性的特征是什么呢?一起來看:


          -透明度,使用背景模糊的磨砂玻璃效果;

          -物體漂浮,畫面中有多個漂浮層級;

          -鮮艷的色彩,在磨砂玻璃后更突出整體效果;

          -淺色邊框,應用在半透明物體上襯托質感。



          玻璃擬物風格特征顯著,用戶也能快速確定界面的層次結構和深度。畫面中清晰顯著的則是最迫切想要表達的重點,非常好辨認。



          在Drrible的#Glassmorphism#下,大家已經紛紛提交自己的作品了,也讓辭典醬發現了一些它獨有的「魅力」:


          -顏色明艷、歡快,視覺上帶來一定的刺激性;


          Music Player Apps by Adhiari Subekti


          glassmorphism redesign by Frédéric Musso


          -icon虛實結合,營造出了一種「小而精」的質感;


          MEDIACRAFT ICONS  by Ayo Kid


          Glassmorphism Iconography by Hemanth Ravi


          -邊緣細框,模擬玻璃,帶來微妙的「高級感」。


          Procreate app icon redesign by Zhenia ievgen


          Coffee Shop App by Saud Ali


          Glassmorphism的由來


          說到由來,那么蘋果帶來的影響力毋庸置疑。蘋果早期的設計系統為擬物風格,從2013年推出的iOS 7開始,系統風格進行了全新嘗試,背景模糊也是從那時起進入大眾視線,雖然人們褒貶不一,但使用過的用戶還是很買賬的。



          與蘋果互為對手的微軟也推出了這種類似于毛玻璃質感的Vista系統,但距離真正的玻璃擬物還有一段路程要走。



          最新的macOS Big Sur 和 iOS 14系統都已經使用了偏向玻璃擬物化的半透明效果。



          通知欄的彈出變成了一件有趣的事,你可以清楚地看到新面板下的圖標是如何彈出和消失的。



          微軟的Fluent設計系統也很重視這種效果,他們稱此特殊元素稱為「亞克力」,并將其作為設計系統中不可分割的一部分。


          Microsoft Fluent設計系統


          Glassmorphism的實現


          -基本原則

          實現玻璃擬物效果需要注意的是,與任何基于卡片的布局一樣——物體離我們越近,它吸引的光就越多,也就意味著它會變更加透明,反之亦然。



          它依靠3個基礎元素來實現,分別是陰影、透明度和背景模糊。還可以使用一個或多個透明層,假設在一個顏色相對復雜的彩色背景中應用,那么至少加兩個半的透明層級,要展示的文字或圖標的可見性才會最大最突出。


          -透明度設置

          不要設置對象的透明度,而是調整填充透明度。下圖示例中,兩種不透明度的數值調整,得到了完全不同的視覺感受。



          -背景選擇

          背景在玻璃擬物效果中至關重要,太單調會導致完全不出效果。這可能就是Apple選擇彩色背景作為MacOS Big Sur默認壁紙的原因,背景圖片的色調差異大,玻璃擬物的效果越強烈。



          -細微邊框

          別小看了這1px的細微邊框,它模擬了玻璃的邊緣,將其單獨設置透明度,就能讓形狀從背景中脫穎而出。


          半透明邊框圖形(左)vs 無邊框圖像(右)


          -可訪問性

          建立一個良性的層次結構同樣重要,和新擬物類似,它們都不是Material Design被廣大用戶熟知與接受的呈現形式,裝飾味道會相對濃郁。所以設計師在應用前,最好能確?!睾透鲗蛹壴跊]有花哨背景加持下,一樣能被用戶以及視力障礙人群輕松識別理解。



          下圖就是一個很好的例子,卡片具有清晰的結構,即使完全去除玻璃背景。它也能正常使用。



          作為人類,我們很容易對各種趨勢感到厭倦,所以每隔一段時間就會迸發出新的靈感與創意。但作為設計師,我們需要探索所有可能創新產品的方式。在當下,玻璃擬物的應用的確會使產品看起來更好,對用戶更具吸引力。

           

          原文地址:站酷
          作者:UI辭典

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

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

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

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

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



          視覺校驗|互聯網B端設計不可缺失的一項技能

          純純


          01.  在工作中遇到的狀況

          設計師常常會遇到這樣的問題,在新產品發布之前,都會做一遍線上的UI視覺校驗,在這個過程中,前端開發工程師所寫的界面總會發生圖片變形,文字字號不對,元素與元素之間不對齊的事情發生。


          設計師給前端開發工程師標記了頁面中錯誤的地方,但是多數前端開發工程師一聽那么多頭都大了,在緊張的上線日期限制下更有甚者不予理睬直接上線,用戶吐槽設計不嚴謹,導致設計背鍋。


          就好比下面這個例子,為什么老板會覺得不好呢?其實是產品在用戶體驗的本能層次出現的不好的體驗。



          02.  好產品具備的特征

          互聯網產品可以利用產品五要素把產品劃分為5個層次。全球的認知心理學家(美)諾曼在《情感化設計》這本書中講產品本能水平的設計——本能層;行為水平的設計——行為層;反思水平的設計——反思層。


          互聯網產品可以用諾曼教授提出的感情感化設計的3個層次聯系起來,并把這些情感分為5個緯度進行考察,就可以得到下面這張知識網絡圖。


          從上面這張圖我們可以看出用戶評判一個產品好壞的標準還是來自產品的表現層、框架層、結構層中的直觀體驗也就本能層次和行為層次的感受,如果產品的吸引度、完成度、滿意度、忠誠度、推薦度的數據很高也就證明產品很好,如果數據表現不好那可以判斷產品還是有需要提升的地方。


          回到第一張圖片,老板覺得有問題的原因就在于產品在本能層次的不合格,那重點來了有什么設計方法可以避免本能層出現問題的情況嗎?答案是毋庸置疑的,那就是“設計走查?!?



          03.  設計走查的意義

          一名專業的B端設計師,并不是說你把設計稿做得很完美,把標注和切圖完整地交給開發小哥哥之后就完事了,其實在這個階段設計只是完成設計工作中產出效果圖的工作,并沒有進行最后驗收的環節,如果開發還原出來的產品跟設計稿差距較大的話,設計其實也是要負很大責任的。


          就好比工廠的流水線中一臺電腦的生產,把電腦從工廠搬到運輸車上也算是電腦生產完畢,但是必須要送到客戶手里,客戶簽字確認,工廠才能算是電腦賣出去了,由此可見設計走查是保證用戶有高質量體驗的不可缺少的一個環節。


          設計走查的意義在于3點:

          1、確保產品的設計細節的還原度合格,從而保證產品的視覺效果和交互體驗能滿足用戶需求。

          2、是衡量設計師是否是一個合格設計師的重要指標。

          3、通過細致入微的專業設計素質贏得公司團隊內部設計話語權的提升。


          既然設計走查這么重要為什么大家還會忽視呢?其實大家對設計走查的看法有一個誤區,如果你想成為一名專業的B端設計師,一定要改變以上的錯誤觀念,擺正一個正確的設計觀念。


          設計師在公司代表著視覺上的最高水準,設計稿則是設計師專業能力的體現,如果一個設計師的能力是100分,設計稿的分值90分,開發實現后的產品分值為50分,在沒有進行設計校驗的情況下,這時候將產品發布出去,用戶或者老板只知道該公司的產品設計只有50分,而不會知道背后設計師最高的水準是100分。


          慢慢地設計師就會在開發團隊中做設計變得很被動,越被動就會越沒有話語權,所以對一名專業的B端設計師來說,除了擁有很強大的效果圖設計能力之外,還需要有保證效果圖落地能力。







          01.  設計走查的種類

          設計走查是一種設計層面找尋問題的方法,多數應用在找尋產品問題或者是對項目開發過程中的測試環節。具體的方式歸類為3種:


          1)體驗設計走查:是指人機交互之間的細節體驗、比如非力度測試、滿意度測試??捎眯詼y試的調查這些方法都是體驗走查的一部分。

          2)交互設計走查:是指針對產品場景與場景之間的動態交互效果進行走查。

          3)視覺設計走查:是指前端開發出來的靜態頁跟設計師出的效果進行視覺細節的校對和檢查,確保開發出來的視覺和設計圖保持一致。



          02.  制作走查表的三種方法

          很多人會納悶了,公司要是沒有這種走查表,那怎么進行這三種設計走查呢?這里告訴大家我的一個工作辦法,總共分為3個階段“尋找·借鑒”——“思考·定制”——“優化·完善”。


          a.尋找·借鑒

          當大家有一個知識的概念,如果想更深入了解這個概念就需要在網上找一些關于這個概念的信息,這個過程就是尋找。如果大家沒有做過類似這種設計走查的經驗,那第一時間也是去尋找,尋找設計走差的概念,甚至是做好了的走查表。


          可能還會有人問,別的公司和我們公司做的行業不同,那別人公司的走差表我們公司能用嗎?大家可以復用70%左右的,那剩下的30%就需要進入下一個步驟“思考·定制”階段了。


          b.思考·定制

          當我們完成第一步之后,就需要對自己所處的行業或者產品有一個認知,思考我們的用戶類型是什么,他們的使用場景是什么,他們最需要解決的需求是什么等等問題,然后再根據這些問題定制一系列體驗、交互、設計的問題,那就成為了自己產品定制的一份設計走查表了。


          c.優化·完善

          任何工作為了更好地適應當前的工作,都需要持續迭代。假設,在第二階段定制的問題有些微交互動效果的問題,但是這是前年用戶比較在意的,現在很多產品都有了微交互動效了,所以現在、意義就沒有那么大了,我們的設計走查表也要根據互聯網的大環境不斷地進行優化和完善。



          03.  產品表現層——視覺校驗

          設計走查和設計校驗并沒有大的區分,但是我理解設計走查是一個比較新型的詞,設計走查的范圍要比設計校驗的范圍大一些。


          有些公司會把設計走查應用于改版之前,當作找尋產品問題的一種方法,也有一些公司會把設計走查應用于項目做完開發在測試環節做測試的一種方法。比如在啟動產品改版前可以通過“視覺設計基礎自查表”來收集產品目前的視覺體驗問題。



          04.  視覺校驗需要審查哪些緯度

          設計校驗驗收表可以簡單地理解為是用于審查產品表現層的形狀、色彩、字體、構成、質感、動效這六點問題的記錄的表格。其實這六點也是諾曼教授提出的感情感化設計中本能層次和行為層次審查的六點。







          再講如何做之前,大家還是要先了解一下驗收流程中的步驟。


          01.  視覺校驗做什么

          這里描述兩點,一個是開發階段,另一個是測試階段的流程。


          在公司的項目開發階段:是設計師設計完效果圖,進行標注(現在大家都是使用第三方標注軟件比如藍湖、摹客、Sketch Measure 等),在交付開發。


          在項目測試階段:一般都是產品經理發起一個項目進入測試階段的通知把設計師、開發、測試、和產品經理都設置為參與者,之后由測試人員進行產品功能邏輯的測試、設計師進行視覺驗收;驗收完成后產品經理驗收測試結果,如有問題找開發進行修改;修改完畢再找測試、設計、產品進行確認,沒問題就封版了,產品經理確認發版日期,如果還有問題就再修改。



          02.  視覺校驗的驗收標準

          很多剛入行的設計新手,在校驗階段不知道檢驗哪些維度信息,以至于很多視覺元素都需要查看,對于c端來說界面的場景、交互比較簡單還能應付。


          但是對于模塊功能復雜、交互場景眾多的B端產品來說每個場景都要查看很耗費精力工作效率也不高。


          所以我總結以下幾個高頻出現問題的點供大家參考,大家可以按照以下幾個緯度進行視覺走查,提高自己在工作中的效率。


          a.檢查設計稿的可行性

          人無完人,再專業的設計師,也不可能100%保證自己的設計方案就是最好的設計方案,在交付設計稿前期設計師應該自我檢查自己的設計稿是否能清晰地傳遞信息,對于一些重要的模塊是否能凸顯出來,對于一些比較復雜的交互場景開發是否能夠實現,市場上眾多的屏幕尺寸,這樣的布局方式是否是最為合理的等這些緯度進行思考做設計,保證設計方案的可行性。


          這里我舉一個我真實的案例,起初我接到的需求就是設計一個模塊里面信息排版,如果我采用第一個方案那肯定是不行,因為信息層級區分不夠明顯,第二個方案把數字標簽用顏色進行了區分,但是我又想如果出現文案比較多的場景,對齊方式都是左對齊,那“指標值”的信息就不可能保持左對齊,所以我又出了第四個方案,目前來看第四個方案算是最佳方案。


          假設當時我就交付前端開發第一種方案,上線后出現問題,還需要調整到第四種方案,慢慢的前端開發就會質疑設計的專業能力,后續合作也會難以推進了。


          b.組件調用是否正確

          B端產品的業務復雜,模塊交叉設計數量多,所以在設計b端產品起初都是用原子化的思維搭建一個組件庫。前端是開發階段在樣式庫中寫一個標準的控件樣式,然后在不同的頁面場景中調用公共樣式,原理類似于我們在 Sketch 中搭建 Symbol。我們要從兩個方面看組件是否調用正確。


          1)公共組件是否正確

          公共組件調用正確,好處就是公共產品的整體視覺風格是一致的,比如頁面的側邊導航,搜索場景、詳情頁場景布局是否一致,在斷網或者報錯的場景中出現提醒條樣式是否一致。可進行交互的按鈕樣式、交互狀態的按鈕是否一致等等。


          2)業務組件是否正確

          在真實開發場景中,有一些前端開發雖然調用一個樣式,但是在設計規范中一個樣式可能會有多個尺寸,比如這個按鈕,在開發階段避免不了出現樣式雖然是對的,但是尺寸調用錯誤的情況出現,所以要查看一下組件的樣式和尺寸前端開發是否調用正確。


          按照這個思路去設計最為重要的就是要檢查開發人員調用的組件庫的規格是否是我們設計稿的規格,以此類推檢查整體的布局、按鈕樣式,報錯樣式。


          這里需要描述的內容相對較多,以后有機會我可以再補充一份關于《如何搭B端建組件庫》的文章,咱們詳細聊一聊。



          c.空間關系是否一致

          空間關系可以簡單地理解為模塊與模塊之間的“間距”關系和組件與組件之間“間距”的關系。


          1)模塊與模塊之間——間距

          所有模塊(卡片)之間的間距,這里具體指的頁面布局包括橫向間距和縱向間距,大家可以采用4px(或者8px)的倍數進行刪格布局,把刪格布局的基礎規范梳理出來,以這個規范當作標注來審查橫向間距和縱向間距。


          2)組件與組件之間——間距

          另外一點就是我們在搭建組件階段,組件與組件之間的間距關系是否一致,不要出現不對齊的情況出現。


          3)為什么要用統一間距

          大家了解空間關系都要看哪些緯度后,我們再來解答一下大家心中的疑惑,為什么要保持間距一致呢?主要原因有以下三點:


          對于如何使用間距,我建議大家可以看一看《寫給大家看的設計書》里面關于版式設計四大原則的講解和有關格式塔原理的文章。


          d.文案的顯示是否清晰

          在UI設計中,我們總避免不了與字體打交道,字體也經常是我們在設計中容易忽視的部分,影響字體的清晰度無非是字體、字號,字重,段間距這幾個參數的設計。


          1)字體


          字體的實現其實是電腦渲染的一個過程,Mac電腦默認字體是蘋方,Wids電腦默認字體是微軟雅黑。在字體的選擇里面行業里是有標準的規范的,比如ont-family:serif、sans-serif、monospace、cursive和fantasy這五種字體,前端在編寫代碼時候會把這種多個字體名稱保存為“字體的回退機制”來定義,意思就是如果展示的設備(瀏覽器)檢索時沒有第一款字體就依次順延使用下一款字體,這個大家只需要了解就好,在字體選擇中使用頻次最多的還是對數字字體的選擇。


          對于數字的字體設計要提前查看是否字體有版權。這里分享一個可以免費查詢字體的網站:

          https://fonts.safe.#/?from=bd


          不同的網站對字體排序的方式可能不一樣,有興趣的小伙伴可以用下面的這個方法進行查看。


          2)字號/行高

          對字體的字號也要進行走查,因為在開發階段在不同的瀏覽器中顯示的字號會有變形的情況出現。


          另外考慮各個瀏覽器的兼容問題,PC端建議使用最好的字號是12PT,因為12PT可以保證在現在市面上的瀏覽器中是可以清晰顯示的,如果有特殊場景需要用到12PT以下的字號,需要和開發說明并且標注出來。


          3)字重

          設計區分文案層級的場景使用頻率最高、視覺效果最好的設計方法就是給字體加粗的字體樣式了。


          這里要注意的是初級設計師的眼力可能還沒有達到很高的水平,尤其是最小的字體顯示加粗或者不加粗的效果視覺在電腦那么大的屏幕上感官并不是很明顯,所以最好可以通過從代碼的層面進行核對,具體方式可以看圖:



          e.顏色的選擇是否科學

          顏色是給用戶呈現面積最大的一個元素,對用戶來說感官層里表現最為明顯的一個元素,所以在校驗中“顏色”是最容易造成落地頁面與設計稿視覺差異的一個因素。


          1)色差

          因為大家手機屏幕的技術一般是LG屏幕(屏幕的使用時間越長色彩的還原度越低)。

          雖然有的時候在查看代碼時候色值設置是正確的,但是也要根據具體的場景進行分析。這里建議大家不要使用具有不透明度的色值(雖然在c端中經常會使用,有不透明度會使顏色比較透亮但是在B端產品中定位是工具,工具就要以效率在第一位,美觀在第二位,所以這個場景的顏色使用盡量以清晰展示為第一準則。)


          2)顏色種類

          b端產品中,柱狀圖、折線圖的樣式比較多,在設計這類圖標時候盡量避免多種顏色的出現,還是因為B端產品定位的原因,太多的顏色設計勢必會干擾用戶進行判斷。



          f.圖標的尺寸是否合理

          不管是在C端產品還是B端產品中圖標都是高頻出現的一個元素,圖標本身的意思就是簡化文字信息,通過圖形去高效地傳達文案信息。


          對于圖標的設計走查分為兩點:


          1)大小

          我們在設計圖標時候,會根據不同的場景進行圖標尺寸的規范輸出,但是在真實的開發環境當中,開發在使用我們提供的插件(藍湖)進行icon下載時候,會提供3種icon的尺寸下載,前端開發在使用切圖時候往往會忽視掉圖標的尺寸問題,對于圖標的設計走查,是否圖標使用的尺寸是我們設計使用的規范,所以第一個就要看大小是否能清晰的展示。


          2)SVG格式開發

          因為PC電腦的屏幕尺寸、分辨率往往是高于移動端的屏幕尺寸、分辨率,圖標的切片做得太小上傳到屏幕上會出現模糊的展示效果,如果圖標不能清晰地展示圖標所呈現的圖形,那就會造成用戶一定的識別障礙,所以一定要保證圖標不要有模糊的情況出現,盡量使用SVG格式圖標切片給到開發。






          設計校驗工作不能說難,有耐心有細心的設計師都可以完成的,一次視覺校驗需要1——2天的時間,相對來說比較耗費精力。


          換個角度思考,如果我們從項目開發的前期就控制設計走查的工作量,那我們可能會減少了走查的工作量。接下來我們就聊一聊怎么減少設計校驗的工作量。


          01.  了解需要視覺校驗的原因

          前面我們一直講的是做視覺校驗需要校驗的維度,我相信更多的設計師還是希望把精力放在做設計效果圖階段,畢竟知道從哪些維度做只能單純地提高我們的校驗的效率,想要在開發過程中減少對項目的設計校驗的工作量 ,就需要我們清楚兩個答案,一個是“在開發過程中為啥需要設計走查”和“開發不愿意修改的原因”。


          a.誰負責實現樣式

          開篇我已經講了設計走查的意義(原因),現在我想從開發流程再聊一聊。


          在一個產品開發中,設計師下游需要對接人的人員角色統稱為開發工程師。但是在這類角色中其實也是會細分為三種角色:前端工程師、后端工程師、測試工程師。因為做項目多數情況是多人協作共同完成的工作,前端工程師是實現我們效果圖樣式的主要人員,也是我們主要對接工作內容的對象。


          b.前端工程師心里所想

          前端工程師的工作內容需要一一查看設計師提供的標注,然后再一一去實現,所以難免不了心里會這樣想:好麻煩,不如我自己按照感覺寫。


          在真實的工作中,前端開發按照規范進行項目開發這種思路是對的,但是設計師強硬地要求前端開發工程師,按照規范進行開發是過于“理想化”的一種表現。


          所以我們還是要先從自身出發,循循漸進地要求前端工程師按照我們的設計規范進行開發,這就來到我們下一個話題。


          02.  如何避免呢

          那么接下來我們來聊一聊身為設計師我們要怎么做,才能避免進入過多的設計校驗呢。


          a.了解開發實現原理

          如果想成為一個高端進階的設計師,我們要給自己增加籌碼,那最為直接增加籌碼的方式就是——站在開發者的角度看待問題,了解開發思維。


          國內前端寫樣式的代碼基本上是HTML+CSS,Jacascript,注意這不算是編程,只是一個寫樣式的語言,簡單地理解就是盒子模型(CSS語言)


          1)盒子模型

          CSS盒子模型又稱框模型 (Box Model) ,包含了元素內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)幾個要素。如圖:


          舉一個圖文模塊的例子:圖(1)是設計師輸出的設計稿,圖(2)是開發需要的標注信息(我們實際給到開發的標注)開發需要查看的就是色塊的尺寸和色塊之間的間距。


          2)用框架化思維做設計稿

          了解完前端制作咱們效果圖的原理后,我們就要用這個盒子模型的概念,像是搭建房子的原理去制作效果圖,所有的組件之間都是有理有據的,那這個專業術語就叫做框架化UI。


          前端開發工程師通過一個個盒子填充來將我們的組件元素放入其中,最終形成前端展示的頁面。注意:標準的框架化就像前面的盒子模型是一塊一塊制作的,考慮到開發同學開發階段組件的嵌套邏輯。



          3)開發者模式

          如果還是不太了解盒子模型具體是什么的同學可以在線上使用下圖的方法自己去查看。


          設計師在視覺校驗時使用瀏覽器就可以看到開發寫的盒子,了解盒子也可以方便我們走查時知道問題在哪。具體操作步驟:



          b.檢查自己的設計稿

          在給前端開發工程師提供設計標注階段需要提前保證自己出的效果圖是有效的設計方案,符合基礎的視覺需求,都能保證模塊設計的可擴展性及規范化,避免定稿后再反復修改設計方案。


          比如,當我們設計B端產品中的搜索條件模塊時候,應提前需要考慮,在一行展示3個搜索條件、一行展示4個搜索條件、一行展示6個搜索條件等場景。


          我們設計完一個場景的設計稿之后,還要考慮不同屏幕尺寸下這套效果圖的布局是否能滿足產品需求,如果不滿足那設計稿需要調整成什么樣式的設計稿。



          03.  做好標注文檔

          除了確保設計稿的可行性之外,還要做好設計稿的標準文檔。如果項目是小版本的迭代就只需要進行簡單的描述即可,如果是組件庫升級,那就需要給前端工程師的標注文檔,盡量是詳細的、準確的。


          其中包括設計稿、切圖(規范的切圖命名、壓縮好的圖片文件)標注、設計規范以及交互文檔(包含字體標注)。


          a.描述到什么程度

          那細致描述到什么程度呢?這里我簡單地說幾個點:

          ·側邊導航欄在正常模式下、縮緊模式下,導航欄的寬度是如何變化的。

          ·如有圖片信息的上傳的場景,考慮圖片比例是什么,是21:9、16:9、4:3還是1:1。

          ·如果出現文案超長的場景,不可展示的文案信息用什么樣子展示,是文案后面用省略號展示?還是鼠標滑上去有氣泡彈窗的樣式。


          b.圖標命名的規范

          隨著業務增多,團隊內對圖標的隨意命名的習慣也開始凸顯出弊端,這種不好的習慣會造成同一類功能的圖標會出現不同樣式尺寸,所以我們在搭建圖標規范時候,就可以把切片的命名規范好。


          在圖標規范中,圖標需要有著單獨的后綴,這樣可以讓公用圖標與業務圖標更方便地進行溯源。SVG格式的圖標可以不用寫切片的尺寸,而PNG的圖標我建議寫上切片的尺寸。


          有些公司習慣用icon進行英文的格式命名,左側是我整理的比較高頻使用的命名,文章末尾我會分享出來文字格式,供大家使用。



          c.圖標的上傳

          可以在開發前在與前端開發溝通達成共識、圖標制作完成確認后,將圖標上傳到阿里巴巴圖標庫中,更方便前端調用圖標大小和調整顏色。


          如果開發需要自己去找到相關圖標,也可以給予權限讓開發從藍湖上傳圖標(前提是得整理好圖標到藍湖上)。




          04.  和前端開發工程師的溝通

          雖然很多時候項目在發版本時間、驗收標準,在團隊內部都是有明確的規劃和標準,但是有些問題還需要特別分析、特別對待,這里我就列舉幾點我在項目中幾個比較重要的點。


          a.進行設計宣講

          設計宣講最大的意義就是加深大家的印象,提前給大家一個心理預估,把一些容易忽略的問題暴露出來,把關鍵核心點和規則講清楚,后面可以減輕設計走查的工作量,開發也輕松一些。


          1)用認知對齊,目標一致

          如果團隊內部四個角色成員大家的認知都是一致的——提升用戶體驗是我們公共目標。


          如果不一致,那就要說服其中一個角色,最好是項目負責人,說明校驗影響發版時間,如果大家都按照規范去完成自己工作內容,可提高效率。確保大家理解一致:設計師要和開發、測試確認視覺表現層的驗收內容、確保內容大家理解一致。



          2)做有效的溝通

          認真是前提、尊重是法寶。在部分開發團隊中,設計師也不能太過于教條地要求開發還原自己的設計稿,畢竟開發生氣、請假了,那就真的沒有人可以進行代碼的修改了。


          所以在開發之前,就要和開發溝通,目前這些界面的效果在技術層面上是否能實現,針對比較復雜的界面場景,實現出來的代價有多少,權衡利弊后再確定是否按照效果圖進行開發。


          針對復雜的頁面需要把標注標記得更加詳細,并且明確告知他們,我的刪格在哪里說明,布局規范在哪里說明,在這個交涉過程中設計師就需要尊重他人工作成果,明確自己的需要做的事情,把問題描述清楚就好,不可要求開發同學100%還原設計稿、過多地干預別的開發團隊的開發步驟和內容。



          3)不必焦慮

          前端開發工程師找我們溝通他們的疑問點時候我們要積極回應他們,并且和他們一起處理問題,比如某些復雜的頁面,避免不了實現效果圖不好的情況出現,這時候不要一口咬定就是開發的原因,先溝通具體原因,然后找出解決辦法。


          開發人員在修改代碼的階段,開發人員的效率是有限的,而且大家都是身兼多條業務線,在這種開發的場景中可以在不影響正常發版日期的階段,把不太重要的視覺問題,放到下一個版本中再進行修改。



          4)規劃時間節點

          在工作項目中也要注意分配自己的精力,可以把重要的界面優先處理,也可以定期跟程序員溝通,跟他一起制定解決方案和時間。如果時間允許的話,也可以慢一點修改,只要改對了就可以,畢竟完成比完美更加重要。







          對于設計校驗的工具有一個原則,就是提高設計師在設計走查中的工作效率。對于用什么工具并沒有限制,只要順手就好,工具的最大作用就是提升工作效率,只要你覺得能提升你工作效率,你喜歡用啥就用啥。


          我把我使用的工具主要分為兩類工具,第一類是發現開發問題和效果圖的不符合的工具;第二類是針對問題高效記錄、追蹤問題的工具。


          01.  四發現問題的工具

          我在工作中發現很多時候開發不愿意檢查自己代碼樣式的一個原因就是不知道以下四種工具,在很多公司里面前端開發工程師都是多條業務線并行開發的局面,沒有更多的工作時間自己做設計審查。這時候我們可以提供工具給予開發,幫助他們提高工作效率。


          設計師同學也可以借助以下4款工具進行校驗:


          前三款都是Google Chrome瀏覽器的具體操作步驟可以看下面的圖片,如果還有不懂的地方可以在評論區給我留言,我看到后會為大家一一解答。


          至于“他山石”這款軟件大家有興趣的話可以在網上直接打名稱就會出來軟件信息,大家下載后自行體驗吧。



          02.  記錄追蹤問題的工具

          介紹完發現問題的工具后,咱們再聊一聊記錄追蹤問題的工具,有的人會問了,你前面講了視覺校驗都要看哪里,又推薦了視覺校驗的工具,我直接把需要修改的地方告訴前端開發工程師不就可以了嗎?為什么還要知道這個記錄追蹤問題的工具呢?



          a.進為什么要使用記錄追蹤問題的工具

          在一些設計團隊稍微成熟的公司里面由于項目的規模比較大,涉獵的模塊多,參與的人員相對也多。


          面對這種體量的項目如果不進行問題的記錄的話,這周做項目里面的1號模塊,下周做項目里面的2號模塊,過了幾周再對項目里面的1號模塊進行修改,然后自己就會發現1號模塊當初的修改問題是什么忘記了,更有甚者都忘記一起協同工作前端開發工程師的名字了。


          這時“記錄追蹤問題的工具”就顯得尤其重要了,因為這種工具的出現可以幫助我們回憶起當初具體的修改問題和修改的進度,從而降低上線安全性的風險度。



          b.TO DO LIST 思維模式

          to do list是一種實際走查階段使用的一種走查模式。


          在設計走查階段,主要由設計師發現問題、記錄匯總遞交到前端工程師這里進行修改和跟進,主要的優勢是在于協助走查可以順利地開展,不遺漏掉任何信息。


          在制作表格時候,可以關注這三點3點“1、問題需要逐條記錄。2、需要截取問題圖片及描述修改正確內容。3、相關對接人員的名稱和處理進度。”



          結語

          一個優質的項目落地是各部門協同合作的成果,視覺校驗是設計師必須掌握一項技能,我們本著“認真是前提、尊重是法寶”十字真言去校驗開發輸出的真實頁面,希望這篇1萬多字的文章可以幫助到你在校驗的工作上少走彎路。


          原文地址:站酷
          作者:斜桿7濕兄

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

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

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

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

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



          設計思維的方法與步驟

          純純

          談到設計思維可能有很多小伙伴會問,“設計思維是設計師的事,和自己沒有關系”。其實不然,我認為設計思維不僅僅是設計師才具有的能力,關乎到各行各業不同身份的人,特別是管理層和老板更應該有的一種思維方式。設計思維無處不在,有人可能會問:“到底什么是設計思維,設計思維能帶給我們什么好處,希望通過一篇文章讓你徹底搞懂設計思維的概念和方法。

          設計思維的發展歷史

          美國經濟學、認知心理學家,諾貝爾經濟學獎獲得者赫布·西蒙 (Herbert Simon),在他的著作《人工科學》提出了設計作為一種思維方式的概念。

          1987年,哈佛大學設計學院教授羅偉(Peter Rowe)出版了《設計思維》一書,書中首次使用設計思維的概念。

          1991年,戴維·凱利(DavidKelley)成立了設計和創新咨詢公司IDEO,將設計思維推向商業化,成為設計思維的教育和推廣先驅。全球最大的設計咨詢機構之一。1992年,卡內基梅隆大學設計學院院長布坎南(Richard Buchanan)發表了一篇名為《設計思維中的難題》的文章,他指出:“設計思維可以擴展到社會生活的各個領域”。

          2004年戴維·凱利(David Kelley)創辦了斯坦福大學設計學院(D.School)致力于提供設計思維的教育和推廣,以Design Thinking為核心教學思想,教授設計思維方法與實踐。在美國,設計學院正取代商學院成為熱門,該學院已成為斯坦福大學最受歡迎的學院。

          設計思維的定義

          “設計思維是以人為本的利用設計師的敏感性以及設計方法,在滿足技術可實現性和商業可行性的前提下,來滿足人的需求的設計方法。設計思維是一個可以被重復使用的解決問題的方法框架或一系列的步驟,提供解決問題的原型和一系列的工具。” ——蒂姆·布朗(Tim Brown)教授,設計思維的提出者和倡導者

          首先設計思維是以用戶為中心的,從用戶的需求開始出發,針對產品看看用戶有哪些需求,能不能通過科技手段去實現,有了科技的可行性,再看看能不能不斷的實現商業變現,才能使我們的產品不斷的給用戶提供價值,所以設計思維指的是用戶的需求,科技的可行性和商業的持續性,這三者之間的交界就是設計思維帶來的創新。


          設計思維的應用領域

          設計思維其實也是一種思維方式,能幫助你打破當下的一些卡點,包括企業遇到的一些問題,設計思維能夠幫助企業創新,從而在企業發展的不同階段實現升級和轉型,甚至有些企業用了設計思維的方法實現第二增長曲線。設計思維的應用領域也非常的廣,比如:實物產品、服務設計、商業模式、軟件應用、工作流程、企業文化等。有些兒童教育機構也用設計思維開設了創造課程引導和教育孩子,斯坦福大學還運用設計思維開設了人生設計課,就是一個人的人生也可以被設計的,我也曾讀過這本人生設計課,有空給大家分享讀書筆記。一些全球領導品牌公司早已意識到設計思維對于其產品開發及公司發展的重要性,采取一系列措施加大對員工在設計思維方面的培訓,從蘋果、美國銀行、 宜家、可口可樂,星巴克、Airbnb、FOTILE方太、到GE通用電氣、寶潔、IBM、三星、3M 等,都已經把設計思維納入其經營策略,成立設計思想工作坊,并大量運用于為各種企業和社會難題提供實用和具有創造性的解決方案,下面就來談談設計思維具體步驟和方法。

          一、共情 (Empathy)

          設計思維的第一個方法是共情(Empathy)也叫同理心。大家可以想一下,我們在設計或者解決問題的時候,是不是站在需求人的角度去看待問題的,有的設計師可能只看到冰山模型最上面的一層,而冰山下用戶真正需求卻看不到,這就需要我們去了解用戶,了解用戶最好的方法就是共情。

          1. 觀察

          觀察是共情最基礎的方法,其實就是深入洞察用戶,如何從用戶身上發現問題。你可以回想一下上大學時,是如何談戀愛的,是不是一開始先默默的觀察對方,看看有什么習慣和行為,喜歡什么東西,想辦法去靠近和了解,找到一個突破點。比如你幫她修好了電腦,解決了她的問題,就這樣自然而然交往,進入了戀愛狀態。這就是觀察,觀察是人的本能,也是建立情感最基礎的第一步。這里的觀察是帶有目標性的,并能解決實際問題的觀察。

          最近看了一個節目叫秘密大改造,就是幫助用戶改造裝修老舊房的節目。欄目組安排室內設計師裝作成記者和用戶一起住一起吃,設計師發現房子特別小,空間利用很低,觀察房主人生活習慣、愛好等,通過交流了解房主的內心世界及對生活的向往等。完全和房主建立共情基礎,等了解觀察的差不多了,節目組就贊助房主和節目組一起去做公益的名義外出一個月。節目組故意不告訴房主在這一個月之內幫助房主改造房子,設計師就根據之前觀察發現的居住問題,設計改造了房子的方案,并監督工人進行裝修。等一個月房主人回來后,驚訝地發現自己的房子都認不出來了,完全超出了自己的想象,房主人太滿意了,每一個細節都考慮到用戶的需求,最終設計的方案用戶當然比較滿意了。這個欄目就是用了設計思維幫助用戶解決實際問題的。我舉這個例子希望幫助大家能更容易理解,大家有空可以看一下這個節目,看看設計思維是如何運用的,如果是自己該怎么用設計思維的方法去做。

          2. 沉浸式體驗

          共情的第二個方法就是沉浸式體驗,就是把自己當成用戶去體驗真實用戶的感受才能更好的發現問題。比如IDEO公司被委托設計一款兒童車,就讓工程師坐在現有的兒童車上去沉浸式體驗,推著這些成年兒童去戶外或去購物。體驗結束后這些工程師就總結了:兒童車太矮了,前面看到的都是腳,還有灰塵,最重要的看不到媽媽沒有安全感,小孩總愛哭,于是工程師就把兒童車做成可折疊并能升高,下面可以放東西,然后再轉過來面向媽媽,兒童就喜歡了。這就是通過沉浸式體驗來挖掘用戶需求。

          3.訪談

          共情最后一個方法是用戶訪談,可以通過定性或定量訪談目標用戶,可以面對面的交互式訪談,焦點小組訪談、專家訪談、也可以是問卷形式的等,網上有很多訪談模版和發放問卷的網站。上文提到的例子秘密大改造的設計師和用戶一起吃一起住,在不輕易的的交流中就知道了用戶的真實需求,這種訪談方式用戶是最不會感覺到有壓力的,也最能發現用戶真實需求的,所以最好的訪談是先和用戶做朋友,就是完全把用戶當成自己的好朋友,試問有幾個公司能做到這一點呢?

          二、需求定義(Define)

          通過共情的方法我們充分理解需求,并挖掘了用戶的諸多問題和需求,那么是不是所有的需求都要滿足用戶呢,怎么找到用戶的真正痛點呢?這就需要重新定義需求,找到核心問題并進行設計。作為設計師你是否會遇到:接到需求就去設計,而反復設計的結果卻不被用戶滿意,只是做到了被領導滿意,而被陷入盲目的嘗試誤區中,這個時候應該回頭想一想需求有沒有被正確定義,有沒有明確用戶真正的問題。只有對設計需求進行有針對性的,有目標性的定義和理解,設計師才能找到最佳的落腳點,從而高效省時省力的完成任務。比如我們使用的Iphone,有沒有發現不能自定義鈴聲,喬布斯肯定發現了這個問題,但為什么到現實還沒有改進這個功能,但Iphone依然賣的很好。這就說明了自定義鈴聲不是用戶的核心需求,沒有誰會經常換鈴聲來炫耀自己的身份,這個功能有沒有都不影響最終的銷售成績,原因可能是蘋果希望用戶不要被打擾,更尊重用戶隱私。需求定義不是產品經理或老板拍腦袋定下來的,要把自己放到空杯狀態,不要相當然的拍腦袋,也不要拍胸脯說自己的想法一定是正確的、要深挖用戶需求,找到用戶真正痛點,重新界定問題,從而確保解決產品核心問題的正確方向。


          三、頭腦風暴(Ideate)

          設計思維的第三步生成想法,要生成想法可以利用頭腦風暴來共創更多的好主意。提到頭腦風暴可能大家都聽說過,其實就是聚集各式各樣的人一起思維發散,俗話說 “三個臭皮匠頂個諸葛亮,三人行必有我師焉” 就是這個道理。頭腦風暴的前提是正確理解用戶的真實需求和明確設計需要解決的核心問題,頭腦風暴盡量不要找領導參與,因為領導一句權勢的話會扼殺很多好意的產生。其次要注意自身思維的局限性,我們在思考問題時經常會帶有自己的經驗、習慣和思維方式,從而走進了盲區,如果有人提出一個好主意,有些人就不愿意思考了,這也說明了人的惰性。所以開展頭腦風暴還可以幫助我們打破傳統思維方式,打破盲區和惰性,從而打開多視角全方位的開放性思維,幫助產品找到創新的方法。還有要注意的是:面對別人提出的天馬行空的主意,不要評判和否定,而是說Yes,and, 在別人想法上再去想,并且鼓勵越多這樣的想法越好,這樣就會激發出更多人愿意出來分享自己的想法。最后,設計師從發散思維中收集靈感,再由靈感轉變成可實現的想法,最后把最佳想法轉變成全面、具體的實施方案。

          四、原型設計(Phototype)

          在找到最佳的解決方案之后,需要在原型上呈現出來,這就把抽象的概念與想法變成具象的模型來驗證用戶問題,這樣能避免不合理不準確的假設。為了快速搭建原型可以采取精益創業的精神做出最小可行性產品MVP,花最少的時間和金錢來快速試錯。最簡單的原型可以利用隨手可得的材料快速制作或現場繪制草圖,達到易理解快速溝通的效果,從原型中看看有沒有準確解決用戶的問題,發現問題后,再去迭代和優化。

          五、測試(Test)

          原型設計好之后可以進行小范圍測試,A/B測試,灰度測試等。我們要考慮在測試中要得到什么結果或驗證什么問題,然后從觀察真實用戶的使用習慣和喜好出發。抓住用戶的本能行為,重點看用戶做出了哪些操作行為,用戶真實的反應和你所預期的可能是不一樣的。當用戶提出不一樣的反饋時,不要為自己的設計而辯護,用戶說的不一定對,但用戶說的一定是個事實,用戶覺得不對,就說明哪里可能出了問題,要虛心接受批評。如果用戶說的對,就去改,收集用戶的反饋后,再進行快速迭代和優化,最后發布上線,產生商業價值可持續性。

          總結

          能讀完這篇文章的你應該對設計思維有一定的概念了,你已經有了改變世界的能力,也許你在以后的面試中能更好的運用設計思維的方法來進行面試問答。最后簡短總結一下設計思維的方法過程:“首先要學會與用戶共情,幫助我們定義問題,再用頭腦風暴的方式幫助我們解決問題并產生創新的方法,把創新可行的方法轉變成原型,用原型進行測試和驗證假設,再通過原型測試去了解用戶,并重新定義問題,所以這五個步驟是不斷反復和疊加的,最終打造出用戶喜愛并能產生商業價值的產品”。

          讀了這篇文章你可能會發現,其實市面上所謂的產品思維,商業思維,突破性思維,服務設計,體驗設計,其實都是來源于設計思維的核心理念和方法。設計思維幫助了很多企業,但也不要認為是萬能的,它只是幫助我們解決問題的方法和工具框架,只有在項目實戰中不斷運用和實踐,才能更好的理解和轉化成自己的理論體系。

          原文地址:站酷
          作者:junken

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

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

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

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

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


          為什么你始終做不好版式設計?

          seo達人


           

          原文地址:Martin_K(站酷)

          作者:Martin_K

          轉載請注明:學UI網》為什么你始終做不好版式設計?

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

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

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

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

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


          還在為沒靈感發愁?那是沒學過移花接木這招!

          seo達人

          我們來變個魔術,這是賈玲,

          qiu~

          變成了沈騰。

           

          圖片

          看到那根點燃的火柴嗎?

          qiu~

          變成了火腿腸。

          圖片

          從賈玲變成沈騰,將火柴變成火腿腸,有趣的同時卻沒有影響到整個畫面的調性,這便是移花接木的方法,設計理論叫做置換同構。 

           

           

          這是一個8,這是一個蘋果,

          你想到了什么?

          圖片

          利用蘋果置換成8的形狀,但顯然看起來有些粗糙,融合調整下,讓蘋果有了8的樣貌,當然還可以此類推成其他的樣式。

          圖片

          圖片

          一個冰淇淋與一座富士山,找到近似相同可置換的區域。

          [優化輸出圖像]

          在原有結構不變的基礎上,將冰淇淋替換成了富士山,創意就是這么簡單。

          圖片

          置換的理念是將兩個毫無關聯的圖像,比如這樣,將其中一部分與另一個部分替代,

          [優化輸出圖像]

          形成一種新的組合形式,替代后的物體和原來造型保持相對的一致,置換的設計就產生了,當然這都是相對簡單的。

          由此我們可以嘗試更多腦洞的置換設計,比如人在蛋黃里游泳,農場種在蛋黃里。

          水壺倒出來的不是水而是云朵,順著這樣的思路還可以增加場景元素形成全新的創意設計。

           

           

          置換同構的商業案例

          看到這樣一個場景,如果要做一個手機的海報,

          你想到怎么置換嗎。

          將場景調整成手機外邊的形狀,手機平躺在場景中。

          放置主題文字,再利用相關的場景元素增加融合的真實感,這樣簡單、有趣、創意的設計就做好了。

          圖片

           

           

          原文地址:修先森撩設計(公眾號)

          作者:修先森

          轉載請注明:學UI網》還在為沒靈感發愁?那是沒學過移花接木這招!

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

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

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

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

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


          近期輸出的一些UI設計探索作品

          seo達人


          圖片 

          以下作品主要是練習通過 Sketch & Adobe Illustrator 軟件配合實現立體圖標設計,掌握通過色彩的變化營造質感和光感。 

          圖片
          圖片 

          以下作品主要是練習圓柱體的繪制和光影的處理,以此來表現排行榜。配色比較趨向于年輕化,青春活潑的風格探索年輕化的設計趨勢。

          圖片
          圖片 

          這一組作品主要是研究極光風的配色和磨砂玻璃效果的結合,用磨砂玻璃層作為圖標的保護罩,帶來朦朧美的感官體驗。

          圖片
          圖片
          圖片
          圖片 

          隨著網民年輕化的趨勢,UI設計也逐漸趨近于更加青春活潑的風格。探索了一組低飽和度高明度的圖標配色,利用不透明度漸變實現晶白風格圖標。

          圖片
          圖片 

          這是在五一假期前繪制的一個相機 APP LOGO,探索多色環形組合來進行色感營造,利用簡單的內陰影和蒙版工具刻畫效果。

          圖片 

          一組帶給大家好心情的 IP 表情設計作品,超橢圓的造型和青春可愛的風格結合,練習表情設計的能力和光影把控的技巧。情感化設計的技能被逐步放大,也是提高作品亮點和視覺感的一個不錯的方向。

          圖片
          圖片 

          想要休息的時候來了一個靈感,大家都喜歡喝咖啡,我還是比較喜歡喝茶~O(∩_∩)O哈哈~有感而發繪制了一個關于茶的 APP LOGO。

          圖片 

          帶有紋理的球體繪制,你可以想象這是一個瑜伽球。利用 AI 軟件的 3D 功能進行造型繪制,然后利用 Sketch 軟件進行質感細節的刻畫完成。

          圖片 

          這組作品主要是研究 B 端設計的柵格化系統,以及配色風格的嘗試。隨著 B 端 C 化的趨勢,在 UI設計層面的風格探索中,將會變得更為大膽,突破風格定義的束縛。

          圖片
          圖片
          圖片
          圖片
          圖片
          圖片 

          以上是近期輸出的一些 UI設計探索作品,后期將會繼續探索更多設計風格和細節的刻畫。

           

          原文地址:黑馬家族(公眾號)

          作者:黑馬青年

          轉載請注明:學UI網》近期輸出的一些UI設計探索作品

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

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

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

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

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


          如何更好的設計圖標?優先注意這些容易被忽略的細節

          seo達人


          圖片

           

            風格

          常見的圖標風格有線性、面性、彩色、寫實、3D等,圖標的選用因頁面的設計風格、圖標的位置等原因會有所差異,主要的作用是反饋動作和吸引用戶更多注意力。

          線形/面性:最基本也是做常用的風格,廣泛用在頁面設計中。

          彩色:通常用于反饋用戶的操作或者增加用戶的注意力。

          3D/寫實:當頁面中的某哥內容需要引起用戶高度注意時使用,一下抓住用戶的視線。

          圖片

          Tips: 現在字節、百度新推出的一些年輕化產品中,有很多精致的3D寫實圖標,極具個性,很好地迎合了年輕用戶的喜好。在扁平風格流行的當下,這樣的嘗試也是一種突破。

           

          重量

          簡單的線性圖標重量輕,看起來更簡約,不會給頁面帶來太大的視覺負擔。比如當頁面中已經有很豐富的圖片和內容,那么更適合選用簡約的、重量輕的線性/面形圖標,防止頁面過于雜亂。

          相反,如果當前的頁面中只有文字,信息量很少,那么更適合利用重量大的彩色甚至3D圖標來增加頁面的豐富性,讓頁面看起來更有設計感,給用戶帶來視覺上的愉悅,簡約而不簡單。

          圖片

           

          屬性

          構成圖標的元素包括描邊的粗細、端點的方圓、圓角的大小、色彩的輕重等,表達式規則是統一的,以便只給觀看者識別圖標所需的最小更改。

          圖片

          描邊粗細:手機上常用到的描邊粗細有2px、3px、4px。2px的看起來會顯得更加精致,4px的描邊視覺較重,可以用在優先級較高的區域作為功能性圖標,。

          端點/節點:圖標的端點有平頭、圓頭和方頭,圖標的節點有斜接連接、圓角連接、斜角連接,具體使用哪種樣式要根據頁面的情況統一設置。

          圓角半徑:方形的圖標邊角過于鋒利,用戶有時候看起來會不舒服,圓角圖標更圓滑,相對來說更容易讓用戶接受。雖然圓角用的更普遍,但具體使用哪種,還是要考慮頁面的整體風格再決定。

           

          網格

          圖標的外形有圓形、方形、三角形甚至不規則形狀的,所以我們很難將不同形狀的圖標尺寸完全統一。

          這個時候網格就起到很關鍵的作用,有了網格相當于提前將圖標限定范圍,在網格范圍內根據圖標的重量和重心靈活調整大小,這樣會讓不同形狀的圖標看起來更統一。

          圖片

           

          視覺校正

          由于設計軟件的局限性,雖然有些圖形已經居中對齊,但有時候還需要進行視覺校正。

          最典型的圖標案例是“播放”圖標,利用設計軟件對齊中間的三角形后,會發現三角形的位置看起來偏左。

          利用軟件對齊后,我們還需要再用眼睛確認一遍,我們可以將三角形向右移動,保證三角形的重心與圓形的重心一致,這樣整個播放圖標看起來會更舒服。

          圖片

            

          角度

          設計圖標時,我們的第一反應是不帶透視的二維圖形。因為我們觀看手機的視角都是平視,所以大多數的圖標都沒有透視,看起來會更簡潔。

          帶透視的圖標會給用戶營造一種空間感,可能會感到認知失調。雖然這種帶透視的圖標能引發用戶關注,但不建議這么設計。

          圖片

           

          比例

          圖標比例通常使用8的倍數作為基準,例如8px、16px、24px和32px,以便在各種環境中進行流暢地切換。除此之外,在移動端等屏幕尺寸較小的頁面中,還會使用4px的倍數,來實現多功能性。

          圖片

           

          清晰

          圖標的設計要使用用戶能夠快速理解的且最簡潔的元素。圖標的尺寸通常很小,要盡可能做到對用戶友好,可以使用一些簡單的隱喻設計,但含義不能過于復雜。

          一個圖形能說明的問題,沒必要再添加多余的圖形。復雜的圖標可能需要花費用戶很長時間才能理解它們的含義,這樣反而會影響用戶的操作。

          圖片

           

          細節

          這一點和剛才說到的圖標清晰道理一樣。圖標最重要的目標是快速傳遞信息,特別是對于尺寸很小的系統圖標,最好只保留最基本的內容,移除多余的裝飾元素。

          圖片

           

          一致性

          這里說得一致性,并不是指一個產品中所有頁面都只能使用一種圖標風格。一個產品有很多頁面,線性、面性等多種圖標風格可以一起使用。

          但在同一個頁面場景中,執行相同功能的圖標應該保持相同的樣式。

          圖片

           

          熟悉感

          面對不同的操作系統,例如iOS和Android,同一功能對應的圖標也會有差異。針對不同的系統,我們可以選用大多數用戶熟悉的圖標,這樣用戶能更快地理解圖標的含義

          圖片

           

          最后

          以上就是常用卻容易忽略的圖標設計細節,希望通過這些內容能幫助你對圖標設計有更深的認識。

           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學YUI網》如何更好的設計圖標?優先注意這些容易被忽略的細節

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

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

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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