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

          首頁

          色彩系統應用篇

          純純

          Meet more beautiful colors.


          《騰訊文檔-構建科學有效的色彩系統》這篇文章中,我們闡述了騰訊文檔如何升級了新的品牌色,為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和品牌認知,以及如何構建一個科學有效的調色板。


          在設計系統的實際運行中,我們也需要著眼于如何應用調色板,建設協同工作流,并給各個角色提供有關色彩的擴展指導,以達到在騰訊文檔中構建一致且有品牌感的數字界面并有效提升效率的目的。

          在建設騰訊文檔色彩系統的工作中,我們首先構建了一個包含品牌色、灰色、輔助色的調色板,但僅有這個調色板不足以支撐我們流暢、無障礙的協同工作。日常工作中,“這里我用哪個藍色?”“這里我用哪個灰色?”“開發同學能否快速的變更某些元素的顏色?”等等問題層出不窮,建設系統的協同工作流迫在眉睫。



          Chapter 1

          ——————————

          如何建設?

          HIG強調不要在APP中使用“硬代碼”,即十六進制色值進行編碼,但前期我們構建的調色板僅有色值,這種硬代碼應用到app中導致項目效率低下,維護也會成本激增。


          于是在騰訊文檔中,我們開始采用顏色變量(color token)和主題(theme)來管理顏色,顏色變量(color token)基于任務(role)、主題(theme),為UI中的任務指定十六進制代碼的色值(hex value),以弭平設計師之間、開發與設計師之間的溝壑,將顏色變量(color token)嵌入設計組件中與開發代碼形成聯動,便于開發利用程序中的變量來做全局修改,橫向提升團隊的協作效率。


          所謂顏色變量,通俗的意思就是可以將一個顏色按任務用途去抽象,抽象成一個有命名的顏色樣式,這個顏色樣式就是顏色變量。


          在設計或者代碼中,可以通過修改這個顏色變量的值來進行全局顏色的更新。例如,我們現在需要給button一個顏色,不要將其寫為 #1E6FFF這樣的色值,而是將button的顏色指定為命名是Fill-01的顏色變量, 如果有重大版本更新,僅需將顏色變量Fill-01的色值更新,即可實現全局顏色的高效更新。如果在不同的主題下(例如淺色/深色模式)button有不同的顏色表現,顏色變量Fill-01可以在不同主題下,映射不同的十六進制色值。這就是我們建設協同工作流的的基礎邏輯。



          Chapter 2

          ——————————

          為調色板的基礎色值命名


          調色板的各個色值(hex value)是最底層的基礎樣式,我們將色板上的顏色進行規則化命名,以方便后期將其引用到顏色變量中。


          騰訊文檔包含核心藍色、藍灰色、中性灰色及其他輔助色,按照顏色屬性,將其命名為:Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red,并在命名中加入色階后綴。

          *騰訊文檔調色板命名圖表



          Chapter 3

          ——————————

          定義顏色使用規則


          1、 從調色板中選擇合適的顏色并測試

          從調色板中根據UI中的任務挑選合適的顏色并進行可用性測試,做具體任務中顏色選擇的最優解。


          例如,我們需要選擇一個藍色作為鏈接色,作為文本,對比度必須達到4.5:1以上才符合WCAG2.0的可用性標準。經過測試我們選擇了primayblue-02作為鏈接色。


          騰訊文檔的界面中,灰色系列占主導地位,起著至關重要的作用,為產品界面創造結構、表達邊界、建立信息層次。在調色板中,我們選擇了兩種灰色:中性灰色和藍灰色,來支撐系統的設計。藍色系列是騰訊文檔產品和體驗的主要動作顏色。



          同時我們也使用了其他顏色以滿足一些沖突性任務(警示等)的顏色使用,這些顏色需要謹慎、有目的地使用。



          2 、根據任務定義顏色的使用規則

          經常會有設計師問,“這里我能用這個灰色嗎?”出現這種問題,根本上還是顏色使用規則定義的不夠清晰,含混的口口相傳的規則會導致更多的混亂。于是,需要我們根據任務和使用場景把顏色的使用規則清晰的定義。


          首先定義在界面中占主導地位的灰色、藍色的使用規則。


          藍灰色_Grayblue:

          在騰訊文檔中,藍灰色與品牌藍共同建立品牌印象,由此,藍灰色主要應用于與風格相關的場景。包括:圖標色、填充底色及大面積的背景色等。



          中性灰色_Gray:

          中性灰色主要應用于一些全局系統行為。如:文本、分割線及交互反饋hover、press等場景。



          品牌藍色_Primayblue:

          品牌藍色主要應用于系統中的各種行為,如藍色圖標、button、文本鏈接等。



          其次定義在界面中用于警示、狀態提醒的其他顏色的使用規則。


          紅色_Red:

          紅色主要應用于系統中需要警示的場景,如紅色警示圖形、錯誤文本、紅色tag等。



          其他顏色:

          在騰訊文檔中,會針對不同的任務應用不同的顏色,如左滑操作、成功提示、高亮顯示等。



          品類圖標基準色:

          在騰訊文檔中,不同的品類有不同的基準色。



          Chapter 4

          ——————————

          顏色變量的語義化命名

          定義了顏色在系統設計中的使用規則后,我們需要根據顏色變量的使用用途對其進行語義化命名。一套好的語義化命名規則需要易于維護且具備可拓展性,如果只是將調色板的色值命名為 blue-01、blue-02... ,語義化的收益并不明顯。哪天設計團隊需要調整品牌風格,或是蘋果又掀起什么新潮流,把所有命名為 blue_x 的變量改為 gradient_serenity, 對于開發來說也是巨大的災難。


          根據 HIG 的建議,語義化命名不應該描述外觀或者色值,而是指明這個顏色的任務用途——標簽 Labels,分割線 Sepatators 或者填充 Fill。


          在思考如何賦予顏色語義化的命名時,設計師也需要用更概括和結構化的視角來看待界面設計,同時也需與開發同學達成一致,使用同樣的命名,滿足以更好地維護一套收斂和統一的設計語言。


          在騰訊文檔中,顏色的任務用途定義為為以下幾種:背景色 Background、文本色Text、圖標色Icon、分割線 Border、透明填充 Transparent fill 、實色填充 Opaque fill 、默認交互反饋 Feedback、語義 Intent。統一使用ultrastrong、strong、medium、weak、ultraweak作為后綴來表達顏色強度。在需要更明確的用途說明的任務中,直接描述其用途,例如:hover,pressed、disabled等。





          Chapter 5

          ——————————

          建設團隊協同工作流


          以上種種,最終目的在于建設團隊的協同工作流,將顏色變量(color token)嵌入設計組件中與開發代碼形成聯動,便于設計利用變量及組件、開發利用程序中的變量來做全局修改,橫向提升團隊的協作效率。


          1、 設計內協同:在Figma中生成顏色變量

          在設計系統中,顏色變量屬于底層的設計原子,需要將其生成為顏色變量并嵌入到設計組件中,便于設計內部使用。我們將已根據任務用途命名的色值,生成figma中的顏色樣式(color style),后續無論是進行組件的設計,還是項目的設計,都可以直接賦予設計元素明確的顏色樣式。


          2、 設計組件與開發代碼聯動:利用顏色變量表進行信息同步

          我們生成了一個面向內部、外部的顏色變量表,進行顏色變量的說明和信息的同步,沉淀落到實處的資料文檔。(此處推薦使用騰訊文檔,多人協作實時溝通~)



          最終形成了設計組件庫與開發組件庫的聯動,構建了一個協同工作流,橫向提升工作效率。




          原文地址:站酷
          作者:騰訊ISUX

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

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

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

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

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


          線條是新開始

          lanlanwork

          原文地址:站酷
          作者:吾空空kongkong

          轉載請注明:學UI網》線條是新開始

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

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

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

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

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



          一組復古風格logo嘗試

          lanlanwork


          原文地址:站酷

          作者:君小陽

          轉載請注明:學UI網》一組復古風格logo嘗試

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

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

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

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

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


          還不知道什么是汽車HMI設計?進來帶你快速了解

          lanlanwork


          什么是汽車HMI?

          什么是汽車HMI呢?咱們先把這個概念拆分成兩個關鍵詞:汽車+HMI。

          先來說一下HMI,HMI是Human Machine Interface的縮寫,“人機接口”,也叫人機界面。

          HMI(人機界面)是系統和用戶之間進行交互和信息交換的媒介,它實現信息的內部形式與人類可以接受形式之間的轉換。

          知道了HMI的定義后,我們把“汽車”這個前綴加上,汽車HMI是指用戶與汽車系統之間進行人機交互的媒介。

          圖片

          當然汽車HMI并不局限于界面中,而是作為功能的集合,例如汽車儀表盤、HUD抬頭顯示器、交互媒介(語音、觸覺)等,都是汽車HMI設計包含的內容。

           

          聊聊汽車HMI的發展

          目前我們說到的汽車HMI最早是在80年代初推出的。

          在當時,普通汽車需要實現的功能在迅速增加,設計師的任務之一就是為駕駛員提供控制,保證駕駛員能夠使用和管理這些新功能。

          對于新功能的增加,主要遵循兩種方法:

          • 一是添加模擬控件,為新功能添加物理按鈕。例如想在車內開空調,需要空調開關控制按鈕;想在車里聽音樂,需要添加換歌/調節音量按鈕。
          • 二是添加具有動態內容的汽車屏幕系統。例如展示車速的動態儀表、可以導航的動態地圖。

          圖片

          第一種方法在德系車中比較流行,而第二種方法在美系和日系車中比較流行。

          現在看來也是這樣,雖然現在汽車都在用車載大屏來代替物理按鍵,但德系車的物理按鍵仍然要比日系車多。

          別克汽車在1986年最早推出了車載屏幕系統,用戶可以在單色觸摸顯示屏中控制電臺和天氣。

          圖片

          另一個典型的案例是日產推出的CUE-X概念車,具備可觸摸和彩色圖形的車載系統。能夠看出來,當時車內功能控件的位置和設計跟現在的車內飾已經很像了。

          圖片

          現在的汽車HMI更像是汽車控制中心與娛樂系統混合的數字座艙,提供的功能更多更強大,同時兼備娛樂屬性。

          圖片

           

          汽車HMI設計重點關注這些原則

          設計美觀有效的HMI,需要將藝術性與功能性合為一體。藝術性和功能性應該是平等和諧地協同工作,讓用戶沉浸在體驗中。以下是一些基本的設計原則:

           

          給用戶控制感

          汽車HMI應該始終在合理的時間內,通過適當的反饋,告知用戶當前的狀態。

          這一點在用戶開車時尤為重要。如果系統在沒有通知駕駛員的情況下就采取某個行為,很可能會對駕駛員造成干擾,產生不好的后果。

          駕駛員駕駛汽車,實際上就是在控制汽車做出各種行為。這既是一種控制,也是一種反饋,控制的是汽車的功能,反饋的功能帶來的結果。例如利用指示燈、速度儀表等各種動態化信息,隨時告知駕駛員當前的狀態。

           

          遵循“安全第一”法則

          HMI系統主要的好處是可以幫助我們避免事故。現代汽車配備了許多傳感器,傳感器可以收集信息,再利用這些信息跟蹤駕駛狀況。

          HMI系統可以實時監控情況,防止交通碰撞和事故的發生。系統對條件的響應包括:

          反應型:系統會通知駕駛員剛剛發生的事,例如胎壓過低或疲勞駕駛,并向駕駛員發出警告。

          主動型:系統分析狀況,預測可能發生的情況,并基于潛在的不良情況向駕駛員發出警告。例如系統分析天氣狀況,并建議用戶避免在道路結冰的日子開車。

          圖片

          在設計系統響應時,重要的不是用大量信息淹沒用戶,而是要制定可靠的通知策略。發送給用戶的反饋應該是:

          • 有價值的:用戶只看到他們關心的反饋。
          • 及時的:反饋應該在需要時準確發送給用戶。
          • 清楚的:在設計信息反饋時,依據模塊化和格式塔原則很重要,確保用戶能夠快速理解反饋表達的含義。這些信息越容易理解,安全性就會越好。

           

          認知負荷最小化

          認知負荷是使用系統需要付出的腦力成本、思考成本。用戶在使用產品時付出的成本越小,說明這個產品至少是簡單易用的。

          話說回來,如果一個車載系統要求用戶承擔大量認知負荷時,說明這個系統存在很大的改進空間。

          首先,不要去強迫用戶記住汽車駕駛相關的信息。大家都知道,用戶在短期記憶中不能記住太多信息,特別是多個容易混淆的功能或抽象的概念。

          預先考慮用戶在駕駛過程中可能遇到的問題,例如機艙溫度是多少?現在在聽什么音樂?怎么導航去商場?基于這些場景和問題進行系統的設計,以此來解答用戶的問題。

          圖片

          其次,基于現有的心智模型構建HMI至關重要。為什么大多數汽車的儀表、中控的分布位置都很相似呢?

          實際上這些都是在用戶與汽車的交互行為中建立起來的使用習慣,遵循熟悉的設計方式,能最大限度減少學習使用系統所需的工作量。

           

          減少不必要的分心

          駕駛過程中,駕駛員沒有什么理由去看手機,因為HMI能夠做任何在手機上能夠做的事情。可能會有人說,現在車載大屏尺寸那么大,會吸引用戶的注意力,對駕駛造成一定影響。

          所以現在越來越多的智能汽車推出各種車載語音助手,將聲音——而不是觸摸,作為用戶與系統交互的主要媒介,通過語音來控制場景,例如切歌、撥打電話、調節溫度等。

           

          不言自明的導航體驗

          可發現性(在系統中找到特定功能)和導航體驗應該在設計中處于最高級別。

          現在很多車載系統面臨著操作層級過多/過深的情況:用戶需要點擊很多次才能找到他們想要做的功能。

          通過仔細規劃系統的信息架構,將常用的功能放置在第一層級,可以避免這種情況。

          圖片

          想調整座椅的高低,我們只需要上下移動座椅旁的把手就可以。如果用系統來控制座椅,需要將控制座椅的功能放在用戶觸手可及的位置,否則會增加用戶的操作成本。

           

          改進視覺效果

          美即適用效應的影響下,用戶更傾向于認為好看的、有吸引力的產品更實用。

          設計師可以通過改進系統的視覺效果,改善用戶對系統的感知態度。例如為導航渲染逼真的3D模型,能幫助用戶更快地理解他們現在所在的位置和要去的地方,并獲得很好的體驗。

          圖片

          驗證HMI是否合理,不僅要衡量操作完成的時間和發生錯誤的數量,還要注重用戶滿意度。

          嘗試向真實或潛在用戶進行可用性測試時,向用戶詢問,“這個設計讓你感覺如何?”。如果發現用戶的體驗感覺不好,設計師可以提出更具體的問題,以確定需要改進的地方。

           

          最后

          用戶對汽車HMI的期望很高,有時候甚至會依據汽車HMI體驗的好壞來決定是否購買汽車。

          如果你下次設計HMI系統,可以將這些要求作為基準:

          • 給用戶一種控制感;
          • 提供良好的學習能力;
          • 避免分散注意力;
          • 不斷了解用戶偏好并提出更改建議;
          • 激發用戶積極的情緒反應。 

           

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

          作者:Clippp

          轉載請注明:學UI網》還不知道什么是汽車HMI設計?進來帶你快速了解

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

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

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

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

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


          2022最新盤點,這些設計趨勢今年會怎樣?

          lanlanwork

          咕嚕嚕

           

          色彩趨勢 

          輕量漸變
          首先值得一說的是輕量漸變,輕量漸變屬于弱漸變范疇,其特點為漸變色彩鄰近,幅度輕柔,節奏緩慢,融合感和細膩感較強。

          因為輕量漸變多會選擇那些明度高、飽和度低的鄰近色,所以能很好地表達出設計中的“呼吸感”。這種呼吸感和通透感給人的感覺非常清新,所以在2022年應該還會持續地流行下去。

           

          高飽和度撞色
          高飽和度色系的應用在2020年就已經成為了重要趨勢之一,因為高飽和度的色彩更能吸引人的注意力,從而有效的吸引用戶的視覺落點。

          可盡管“吸睛”對品牌來說非常重要,但我們在使用時仍需克制,因為過高飽和度的搭配,往往會給頁面的一體性造成一定程度上的背離,且非常容易帶來視覺疲勞。

           

          所以設計師在使用這類顏色時,也通常會對其飽和度和明度進行一定程度的降低,讓顏色“豐盈卻不擁擠”,從而保證我們視覺上的舒適性。

          另外,從高飽和的UI案例中我們也能夠看到,在搭配色彩時,選用大量的鄰近色營造氛圍,再用一兩個對比色產生沖突,就會使得整個頁面輕重相平衡,帶來不錯的視覺體驗。

           

          糖果色
          糖果色以粉色、粉藍色、粉綠色、粉黃色、明艷紫、檸檬黃、寶石藍和芥末綠等甜蜜的女性色彩為主色調,它能帶來一種纖細,柔軟的感覺。所以哪怕一個畫面中出現過多的色彩,也不會讓人覺得很沖突和背離!

           

           

          圖形趨勢 

          emoji表情
          表情符號在現如今是一個超越文本并且能夠得到廣泛認知、跨越文化和多領域的一種視覺語言,在文字段落的末尾加上 Emoji 能夠更好傳達情緒,這使得表情符號不僅在網頁、文本甚至在海報中作為主視覺,都能帶來非常不錯的氛圍感。

          在2021年,emoji不僅被廣泛應用起來,還被廣泛3D化。加上陰影效果的emoji,其情緒的傳達也變得更加豐富。

           

          2022,emoji的表達依舊會持續進行,只是其形式會更加豐富,例如這種“假3D”效果等

           

          3D化
          說到了emoji的3D表達,就不得不說2021最為流行的一個設計趨勢,那就是大量的平面內容通過增加了陰影的效果而被立體的表達了出來。

          像我們熟悉的蘋果應用程序icon等,其設計細節都因此變得更加的豐富而有層次。

          而2022,3D設計趨勢也會通過不斷的發展進一步明確了其自身的地位。它能夠為設計師提供無限的可能性,為任何你能想象的東西提供更多可發揮的空間。

          2022年我們也會看到更多關于2D和3D之間完美結合的設計,像下圖的案例,手繪線條的手指和球體表情之間的互動,不僅讓整個頁面顯得更加有趣生動,還能使2D3D這兩種設計方式的優點都能得到更充分的展現。

          270e8f3a9045870bffea3c57e2842255.gif

           

          玻璃擬態
          同樣,在2021年超級流行的毛玻璃效果,我們也會在2022年看見更加豐富的表達~

          比如最近在dribble上很火的這組效果圖,就是在平面的基礎上,將毛玻璃的效果運用在3D的物體上,讓整體的虛實感更加的生動,也會給設計增加一點與眾不同的活力。

          270e8f3a9045870bffea3c57e2842255.gif

          format,png

          除此以外,我們還可以看到的,這一趨勢已經明顯轉移到了玻璃和水晶質感上,而且以令人難以置信的用立體擬真度將圖形設計提升到了一個全新的高度。所以,2022我們也將看到更多與全息和3D趨勢相輔相成的透明質感和逼真的玻璃背景等元素的設計。

          c7228e64d6a33bb24b7f5ed12d5469d3.gif

           

          幾何抽象
          完全不同于寫實的3D風格,2022年的設計風格可能也會開始往抽象發展。用幾何圖形來表達意象,用色彩傳達情感。少了繁瑣的裝飾,用更簡潔有力的方式去傳達設計理念。

          當分形形狀與色彩完美結合時,就可以創建出極具吸引力的視覺效果。

          c7228e64d6a33bb24b7f5ed12d5469d3.gifa1bce1da9d209654d9c8ca39b749f270.gif

           

          結語 

          的確,每年的設計趨勢似乎總有相似的地方,2022年的設計風格也是在2021的基礎上進行演變和發展的。所以更重要的是,我們要學會持續地積累這些設計素材,并不斷地審視自己的設計作品,學會將他人的設計思路結合在自己的設計靈感上,才能成為一個一直擁有輸出能力的設計師~

           

          原文地址:CSDN

          作者:摹客

          轉載請注明:學UI網》2022最新盤點,這些設計趨勢今年會怎樣?

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

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

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

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

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



          2022年,B端設計的趨勢有哪些?

          lanlanwork


           

          視覺趨勢

          1. 3D設計風格

          雖然 3D化 的視覺風格早已到來,但是在B端市場上,3D風格在此之前依舊表現的十分克制。

          隨著 C4D、Blender 這些 3D 建模軟件的不斷普及,再加上互聯網上關于 3D 建模教程的增多,你會發現 3D 風格的視覺表現,是一個 B端視覺設計師 的基本要求。

          而3D風格用在B端軟件當中,會有兩個使用場景:

           

          圖標

          因為在B端產品當中,圖標本身就是非常難以去表現,比如“物聯網,大數據”。

          許多的抽象詞匯,很難通過一個具象的事物進行表達,而在企業官網當中,在視覺表現上的要求又十分的高。因此你會發現,在視覺風格上的選擇,往往只有 3D 圖標 + 插畫 這一條路。

          圖片

          并且 3D 圖標的使用場景不會太過于局限,也可以用于產品的工作臺、運營營銷工具箱 等頁面,因此 3D 圖標的出現,它的應用場景也會相比之前 要更加的廣闊。

          圖片

           

          可視化大屏

          大屏設計 也在不斷的“內卷”,因為傳統的 2D 可視化大屏 所搭建出來的大屏已經滿足不了企業的野心, 像DataV 騰訊云圖 ,大家都在朝著 3D風格 炫酷的方向進行延展,因此也就會導致 3D 的視覺風格需求 激增,而 3D 建模仿佛就是大勢所趨。

          圖片

           

          2.新擬態

          雖然新擬態是在前兩年的產物。這個設計風格背后,遭到了很多設計師的質疑與排擠。

          但是隨著這個風格的不斷成熟,感覺它在B端視覺領域(特指的是 官網 ),是非常受到歡迎的,因為整體的風格,與官網的設計形式趨同。

          同時作為B端產品的官網,其實是更需要新擬態這種風格。因為電腦場景下鼠標光標對頁面進行 Hover 操作 給出的真實反饋,而使用了新擬態的官網按鈕,給你的反饋非常真實。

          這里安利一下騰訊云的首頁官網,大家就會發現在設計風格上,大量的采取了新擬態元素,并且配合 3D 風格的圖標,以及毛玻璃材質的設計,讓它的設計瞬間加分不少。

          圖片

           

          3.開源的設計系統

          在去年,設計系統迎來了一波發展的高峰期,隨著字節、騰訊,三大設計系統(Arco Design、TDesign、Semi Design)的開源,其實是給我們很多B端設計初學者,有了更加完整仔細的B端入門教程。

          比如 Arco Design 的組件用法 https://arco.design/docs/spec/link

          圖片

          就清晰的講清楚了每一個組件的使用方式,以及注意事項,仔細閱讀這里面的內容,其實就是B端設計的入門學習。

          而未來,國內的環境,開源的系統也會越來越多,大家可以針對這幾大類不同的設計系統,進行對比,或許會有一番收獲。

           

          產品趨勢

          超級app

          這里的 超級app 可能和大家潛意識里的 支付寶、微信 這些軟件不太一樣。

          在B端行業,隨著疫情的不斷擴散、再加上了兩年時間的發展,很多B端產品的功能架構都出現了一個現象,產品的功能開始變得非常擁擠。因為B端軟件的核心價值其實就是靠著一個又一個功能去累積,也就意味著隨著B端產品的發展,功能模塊在不斷的累積,導致在設計層面,這樣的現象變得更加嚴峻。

          你會發現左側的導航菜單已經完全沒有辦法裝下這些導航內容,而這一現象也反映在很多產品當中,比如我了解的 飛書管理后臺、薪人薪事 等等諸多B端產品,它們在整個導航內容上,已經增加到一級導航 15+  、二級導航 40+ ,這無疑會開始對設計師的能力造成巨大考驗。

          圖片

          面對這一情況,許多導航菜單都將會迎來前所未有的挑戰,最近也在深入研究導航菜單過多時的解決辦法,發現了一些新的 導航菜單 設計方法,有機會咱們重新梳理一下 導航菜單 的內容,將B端設計指南 文章進行更新。

          圖片

           

          低代碼定制化

          低代碼一直是我關注的一個領域,先給不明白低代碼的同學簡單科普一下。

          低代碼,一種快速開發應用的軟件,將通用、可重復利用的代碼形成組件化的模塊,通過圖形化的界面來拖拽組件并形成應用。低代碼能夠實現只寫少量代碼或不寫代碼,類似用“樂高積木”的方式來開發。

          在國外有很多著名的低代碼成功案例。Outsystems(國外非常出名的低代碼平臺)幫助施耐德電氣在20個月內推出了60款應用程序,開發過程加速了兩倍,僅在第一年就節省了650人天的工作量;在2012年即將推出Model S之際,特斯拉放棄了SAP的ERP產品(可以思考一下為什么),改用低代碼開發平臺Mendix,用25個人四個月時間自建ERP系統。

          去年,低代碼平臺,也有很多新產品面世,其中就包含:

          圖片

          因此你會發現,其實低代碼就是在解決一件事,圍繞著某一個業務場景,通過平臺的持續完善優化。

          讓所有的功能都能圍繞這個業務展開,其中包括:權限、時間軸、流程、表單、公式等等,能夠解決很多特殊的業務場景。

          而低代碼會涉及到設計思路上的轉變,以及低代碼編輯器的出現,如何去設計如此復雜的配置流程,如何能夠讓用戶能夠快速上手,如果你能夠有比較完整的思路,這些都會成為我們設計的新機會。

           

          行業細分

          隨著互聯網市場的不斷發展,用戶會越來越關注產品在自己行業的應用,比如CRM,其實只是一個籠統的稱呼,現在CRM市場又會分為 SCRM、運營CRM,等諸多產品。

          PaaS類的平臺也出現了 負責從虛擬主機和數據庫層面入手的 iPaaS 以及 從應用和數據層面入手的 aPaaS。

          即使是大家經常使用的 釘釘、企微、飛書,它們也在各自的領域有所擅長。

          圖片

          因為B端產品,在底層邏輯上是不能允許趨同的產品出現,如果你和別人的產品一樣,其實是沒有辦法在目前的市場上立足。

          因此你會發現,雖然產品形式都會比較相同,但是B端市場十分廣闊,大家都在去尋找自己產品的差異化。

          當然市場是瞬息萬變的,這里也只是簡單聊聊我自己的看法,希望對你有所幫助。最近拖更確實比較厲害,準備之后幾天給大家抽些書,可以多留意留意公眾號的文章。

           

          原文鏈接:CE青年(公眾號)

          作者:CE青年

          轉載請注明:學UI網》2022年,B端設計的趨勢有哪些?

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

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

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

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

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


          11本值得一讀的設計書

          lanlanwork


          01.

          超越平凡的平面設計之
          《版式設計原理與應用》

          圖片

          這是一本很經典的版式設計書籍,內容主要包含排版、色彩搭配,通過這本書你可以學到如何選擇合適的字體?如何裁剪圖片?如何設計封面?如何排版?如何配色等知識。設計師在這本書里分享了很多案例的設計過程和優化過程,包括畫冊設計、折頁設計、唱片設計、網頁設計等等,清晰的展示了他的每一步都是怎么思考的,邏輯非??b密。
          雖然里面的案例已經有些歷史,但是其設計的方法和理念在今天仍然受用。 
           

          02.

          《超越Logo設計》

          圖片

          這是一本有超級多干貨的logo設計書,作者在書里不僅分享了31條logo設計的實用秘訣,還分享了如何談業務?如何與客戶合作?怎樣提高過稿率?如何做好前期的準備工作?如何構思?等問題,它能加深你對logo設計以及logo設計之外的知識的了解。
           
           

          03.

          《文字怡人》
          圖片
          這本書由日本著名平面設計師高橋善丸所寫,雖然設計的是日文,但由于日文中也有很多漢字,所以中國設計師也能從中學到很多東西,另外我推薦他的原因是,通常到達一定高度的設計大師,都不會放下身段去寫一些設計技能、設計方法的書,大多都在講理論,這也使得設計師們錯過了很多向大師學習設計執行的機會。
          而高橋善丸給了我們這樣一個機會,這本書主要是通過分享他的各種字體設計案例,來講述不同的字體設計技巧,并且這些字體設計案例并不是作為個人練習單獨存在的,而是作為真實案例運用在書籍封面設計和海報設計中。
           
           

          04.

          《設計中的設計》

          圖片

          這本書很多設計師應該都熟悉,由日本當代平面設計大師原研哉所著,出版至今已經被加印了近二十次,足以證明這本書有多牛。
          很多年輕的設計師認識原研哉可能是通過小米的logo和KURASHICOM的logo這兩個案例,甚是還會因此對他的設計理念冷嘲熱諷,如果你讀了這本書,我相信你一定會對他有新的看法。在我看來,他對設計的認識已經超越了絕大多數人,也遠遠超出了技術層面,但他又不像很多大師把設計做成了藝術,而是始終圍繞設計的本質:信息傳達,來做研究和深化。
          什么是設計?什么是視覺傳達?設計的目的是什么?無印良品的地平線系列海報是怎么誕生的?等等問題,你都可以在這本書里面找到答案。
           
           

          05.

          《超級符號就是超級創意》
          圖片
          該書由華與華的創始人華杉所寫,華與華是一家知名的戰略咨詢公司,在設計圈里的爭議很大,他們的設計作品可能不太受設計師的認可,但是華與華的方法確實影響了中國的整個策劃圈和設計圈。
          初讀這本書時,其中的很多觀點也給了我一種醍醐灌頂的感覺,作者在書中分享了什么是超級符號?如何打造超級符號?現代商業設計中有哪些問題?如何建立企業戰略?等知識。
          蔥爺當時讀的是左邊黃色這本,現在最新的是右邊藍色這本,據介紹是新增了50頁,包含華與華最新的案例和跨年演講等內容。
           
           

          06.

          《香港新生代平面設計訪談》

          圖片

          這本書是我去年才讀的,書中收集了港澳地區共12位新生代知名設計師,他們來自平面設計、品牌設計、網頁設計、字體設計、服裝設計、IP設計等多個不同領域,年齡跨越了70后到90后,每個人都有許多經典的代表作,每個人都拿過很多榮譽,他們的故事和發展經歷也很精彩。
           
           

          07.

          《設計工作室生存手冊》

          圖片

          幾乎每一個設計師都有成為自由設計師,或者是創建設計工作室的夢想,所以這本書值得每一個設計師讀一讀。讀完這本書你將會了解設計師的工作和職責是什么?如何獲取客戶、篩選客戶?如何收費?如何與客戶簽訂合同?如何管理團隊?如何與人合作?等多個很實際、很實用的問題。
          這一本薄薄的小書,原本是作者寫給他兒子的,文風幽默風趣,言辭犀利,快人快語,讀起來很帶勁??赐暌院笥浀靡潇o冷靜,別立馬急匆匆跑去辭職創業。
           
           

          08.

          《田中一光自傳》
          圖片
          田中一光是日本平面設計領域國寶級的人物,也被譽為無印良品之父、日本設計中心之父,創作過很多經典的案例,獲獎無數。這本書詳細講述了他從小到大的經歷,以及怎樣一步一步成為了享譽全球的設計大師。
          老實說,讀自傳通常不能讓你學到什么具體的技能,所以這不是一本教你怎么做設計的書,讀名人自傳的主要作用是讓你對某些事情、某些行業產生興趣,并可以把對方作為學習的榜樣。讀完田中一光自傳這本書,我深深地“愛”上了他,他的人品和設計才華都深深的吸引了我,讓我一度想去買他的其他書籍,并把它作為我人生的榜樣。
           
           

          09.

          《日本版式設計原理》
          圖片
          這本書的內容形式應該是很多設計師都會喜歡的,即:改稿,作者通過展示50個設計案例修改前和修改后的對比效果,從而向大家解釋了如何正確的布局?如何正確地使用文字?如何進行正確的色彩搭配?如何正確地使用圖片?這四大塊內容。
          另外,這本書里展示的案例也是非常接地氣的商業作品,而不是自嗨稿,所以其中的設計思路和設計技巧可以很容易用到你的設計工作中去。
           
           

          10.

          《平面設計中的網格系統》
          圖片
          這本書是瑞士知名設計師約瑟夫·米勒-布羅克曼所著,他是第一批把網格系統運用到平面設計中的設計師,網格系統是版式設計中很重要的一個工具,可以使排版更加有章可循、更嚴謹,在這本書中,作者不但介紹了網格的繪制、網格的分類、網格的使用,甚至還把網格延伸到了建筑設計中,想了解網格系統的人可以讀一讀。
           
           

          11.

          《design360雜志》
          圖片
          圖片 
           
           
          這個年代還會看雜志的人應該已經不多了,看設計雜志的那就更少,然而這本2005年誕生于廣州的《design360》卻能夠存活至今,并且有超過3萬忠實的讀者,可以說是亞洲最優秀的設計雜志之一了。你既可以購買它的某一期,也可以按年訂閱,一年共6期,每一期的內容都不同,包含了平面設計、插畫、產品設計、建筑設計、景觀設計、設計組織、工作室訪談等內容,這本雜志除了可以拓寬你的知識面、加深你對設計的認知以外,你還可以從中認識到很多國內外的優秀設計師和設計工作室。  
           
          圖片
          以上11本書是我個人覺得不錯,值得一讀的設計書,當然并不是設計師必讀,也不是適合所有人,因為我覺得根本就不存在哪一本書是必讀的,但如果你想對設計有更深入的了解,想提升自己的設計認知,選擇一兩本自己感興趣的書讀一讀,肯定是有好處的。沒必要買太多,不然肯定避免不了吃灰的命運。 
           
           

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

          作者:蔥爺

          轉載請注明:學UI網》11本值得一讀的設計書

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

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

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

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

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



          如何培養設計美感,這個方法掌握了,想不進步都難?。?/a>

          lanlanwork


          1.從大量閱讀開始

          為什么我們讀小學時候,每天很早去學校晨讀,目的通過這樣刻意練習加深學習記憶。

          長久以往,我們對文字理解,對寫作文就會構建起豐富的背景知識。

          那么在設計中也是一樣的,在前期,一定要每天堅持大量的閱讀,培養你的眼界。

          閱讀什么呢?我覺得可以針對性一些,比如:

           

          a.大量看UI設計作品

          網上因為作品有好有壞,如果你早期無法判定好的作品,可以去看一些獲獎的作品,比如kdesignaward、Adobe設計大獎,IF設計大獎等。

          圖片
          圖片
          Bomapp(kdesignaward)
          圖片
          DuerOS(百度車聯網)kdesignaward

           

          b.創意性網頁UI作品
          圖片
          圖片
          圖片

           

          c.品牌設計作品
          圖片
          圖片

           

          d.插畫設計作品
          圖片
          圖片

           

          e.版式設計作品
          圖片
          圖片
          圖片
          當然不止這些,比如你還可以看看一些裝置藝術、科幻藝術、三維作品、攝影作品、文化類作品,總之早期一定要堅持大量閱讀。
          我們大量閱讀是為了建立豐富的背景知識庫,積累越多,你的審美自然也會跟隨提高,當然做設計的想法就會有更多。

           

          2.什么情況下知道,我的審美提高了?

          前期大量閱讀了很多作品,這時候你需要把牛逼的作品收集起來,等半個月后,再去看看之前搜集的作品,如果發現有部分很丑,那么恭喜你又往前走了一步。

          成長是需要一個過程,切忌操之過急,關鍵是需要自己動手去執行,不能等著被改變。

          圖片
          https://www.pinterest.com/Tonyrosie666/_saved/

          我們可以去建立一個圖板,雖然很多人有這樣做,但是真正做到復盤,然后去刪除之前采集的人很少。

          如果不去復盤,不去思考,進步當然會緩慢,抱怨也是沒用的。

          低頭趕路,也不要忘了抬頭路,我們要隨時知道是朝著正確的方向努力。

           

          3.學習一些理論

          當看了大量的作品,對美有些認知,但是你還是不知道怎么表達美?這時候,你需要學習一些理論的支撐。

          我們通過閱讀大量作品構建審美認知,通過閱讀書籍、文章理論構建審美體系。

          比如,德國工業設計師迪特·拉姆斯提出好設計十項原則:

          好的設計是創新的
          好的設計讓產品更加實用
          好的設計是美觀的
          好的設計使產品更易理解
          好的設計師謹慎克制的
          好的設計是誠實的
          好的設計是經典永恒的
          好的設計是細致的
          好的設計是保護環境的
          好的設計要盡可能簡單

          又或者:

          我們可以從形、色、質、字、構、動等6個維度去拆解,又或者可以利用格式塔心理學來進行設計質量的評估,比如我們常說的相似性、親密性、連續性、焦點歸一等。

          再比如,當你看到一個吸引你的設計作品,你可以這樣思考吸引你的點在哪?

          比如:是圖形運用很巧妙還是質感表達很新潮?又或者色彩創意很棒,一般一個好的設計都會滿足形、色、質、字、構等,至少要3個以上維度。

          當然還可以通過看書積累對設計美的表達,總之就是要大量輸入,構建豐富的知識庫。

           

          4.推薦一些網站

          提升審美必須每天堅持看,這個是毋庸置疑的事情。這里,推薦一些我常常去看的網站。

          a.savee

          圖片
          https://savee.it/

           

          b.pinterest

          圖片

          https://www.pinterest.com/

           

          c.designweek

          圖片

          https://www.designweek.co.uk/

           

          d.designcollector
          圖片

          https://designcollector.xyz/design

           

          寫在最后

          提升設計審美,前期大量閱讀只是一個開始,我們還需要做的是不斷思考總結。

          同時還需要學習設計理論,這些我們可以通過看書或者和別人交流,在討論過程中,你自然知道他們是怎么評價這個設計的。

          路漫漫其修遠兮,學習是一個長期的過程,培養審美也是。

          積小步,成大步,沒有一蹴而就的成功,一切都是量變的積累。

           

          原文地址:功夫體驗設計(公眾號)

          作者:Tony

          轉載請注明:學UI網》如何培養設計美感,這個方法掌握了,想不進步都難?。?br />

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

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

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

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

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



          提高用戶體驗的10個優秀案例

          lanlanwork


          一、特殊場景下的差異化設計

          根據用戶使用場景和特殊情況出現時,產品會結合變化呈現不同的功能或者服務,這種差異化的設計更能體現情感化設計的一面,提高用戶對于產品的認可度。

          騰訊新聞 APP 在東航事故出現時,在底部操作欄新增了祈禱的圖標,方便用戶表達祈禱的心情。特殊情況下的差異化設計滿足了用戶的情感需求,也體現出了產品的溫度,帶給用戶更強的粘性。

          圖片

           

          二、優化指引路徑提高操作效率

          通過提取本機號碼一鍵登錄減少了繁瑣的注冊流程,提高了登錄的效率,減少用戶的操作路徑。在登錄時都需要用戶同意一些條款協議等內容,當用戶未勾選時通常都是提示用戶,指引用戶選擇后操作。這樣的設計增加了用戶的操作路徑,使用體驗不是很好。

          網易云音樂 APP 在同樣問題出現時,提供了一個彈窗進行指引,用戶無需重復操作,直接點擊“同意并繼續”即可完成登錄。在用戶誤操作出現時,無需用戶過多的操作路徑,給出了更高效的操作解決方案,提高了用戶使用體驗。

          圖片

           

          三、溫馨提示降低用戶的過度依賴

          隨著互聯網時代的到來,太多的娛樂產品占據了我們的時間,過度依賴和使用耗費了大量時間。特別是短視頻的走熱,刷視頻容易帶來過度依賴,影響用戶的視力等健康問題。

          抖音 APP 作為用戶量龐大的短視頻產品,提高用戶體驗至關重要。為了降低用戶的過度依賴,提示用戶注意休息,特意設計了溫馨提示。用戶可以設置提示時間和進行管理,APP 也會定期提示用戶。溫馨的設計提高了用戶對產品的好感度,也能輔助用戶做好時間管理,以免過度依賴而影響休息時間。

          圖片

           

          四、隱藏式設計提高版面利用率

          對于用戶來說希望內容具有較高的可見性,提高內容的曝光度才能被關注。在控制內容的優先級時,通過隱藏式設計可以滿足更多內容的呈現,不過需要做好隱藏內容的引導,提高隱藏內容被發現的概率。

          網易云音樂 APP 在云貝中心簽到設計中使用了隱藏式設計,將簽到相關的附屬內容隱藏在展開卡片中,為更多主要內容提供了展示空間。為了提高展開的交互設計,在每天初次訪問時會默認展開,然后再收起隱藏,這個動態的指引提高了這個交互動作的曝光度。利用隱藏式設計滿足了產品需求,通過動作引導提高了用戶知曉度,是一個具備較好體驗的設計解決方案。

          圖片

           

          五、更人性化的模式設計

          隨著用戶群體的跨度增加,為了帶給不同年齡段用戶更好的體驗,眾多產品都針對不同用戶提供了定制化模式。特別是針對老年用戶而進行適老化設計,還有針對青少年兒童設計的時間管理等,不同模式滿足了更多不同年齡段的用戶需求。

          比如優酷 APP 在個人中心設計了“模式切換”,點擊可以設置長輩模式、青少年守護、兒童守護。針對不同年齡段對于產品的使用需求進行定制化,帶給用戶更加人性化的使用體驗。

          圖片

           

          六、定制化的播放頁模式設計

          不同用戶對于產品的使用需求有所差異,固定的模式雖然可以減少產品的開發成本,但是單一的體驗不夠人性化。針對不同用戶提供更多選擇,可以帶給用戶更加人性化的體驗。

          MOO 音樂 APP 為了滿足不同用戶對于播放頁的體驗差異,設計了播放頁模式定制化切換,用戶可以選擇以專輯封面或者背景大圖進行展示。為了直觀的方便用戶做出選擇,模式設計以可視化的圖形展示,便于用戶更快的做出選擇。定制化的模式雖然把繁瑣的事情留給了產品開發者,卻把更好的體驗帶給了用戶。

          圖片

           

          七、縮放預覽滿足對細節的體驗

          隨著短視頻走進更多用戶的視野中,短視頻的形式也是越來越豐富,滿足不同用戶的使用體驗至關重要。特別是圖片形式引入短視頻平臺,對于細節的體驗因人而異,縮放畫面滿足對于細節的體驗才能更加人性化。

          抖音 APP 無論是針對視頻還是圖片形式作品都可以縮放預覽,配合縮放的手勢交互帶給用戶放大細節查看的體驗,滿足了不同用戶對于細節的需求。手勢交互也是產品設計師需要多多探索的方向,更加便捷的操作有助于提升用戶對于產品的使用體驗。

          圖片

           

          八、滿足用戶好奇心的設計

          用戶從小白到依賴是一個逐步探索的過程,好奇心的用戶會點擊嘗試任何的功能,甚至連一個圖標或者 LOGO 都希望獲得彩蛋。作為設計師來說設計出來的每一個元素都需要考慮用戶體驗,給予反饋式的設計才能滿足好奇心的驅使。

          愛奇藝 APP 首頁左上角的 LOGO 展示你有注意到嗎?有沒有嘗試去點擊體驗,作為好奇心驅使特意嘗試了一下。點擊之后會跳轉到皮膚等設置的頁面,為該功能的曝光新增了首頁入口,用戶也可以通過個人中心“裝扮”進行設置。該設計解決方案不僅滿足了用戶點擊的好奇心,也賦予了 LOGO 展示功能化的作用。

          圖片

           

          九、可以標記和疊加的點贊設計

          點贊設計在眾多產品中均有體現,這是用戶表達對于內容的喜歡,以此來增加作者和用戶之間的互動性。為了吸引用戶點擊和帶來差異化的體驗,點贊設計也被腦洞大開,在表情化、疊加點贊、點贊標記、微動效等方向不斷探索。

          小宇宙 APP 在播放頁中對音頻進行點贊時,可以多次疊加點贊,點擊之后會針對音頻播放進度條進行點贊標記,反復點擊也會使得進度條紋增高,以此來強化點贊的程度。該設計解決方案不僅豐富了點贊的設計,也能通過標記和進度條紋的高度讓用戶記住關鍵的部分,方便后續回顧的時候知道哪些時間段是重要內容,提高用戶對于產品的使用體驗。

          圖片

           

          十、差異化的短視頻推薦設計

          作為新聞資訊類產品來說,大部分用戶的習慣還是圖文結合的閱讀形式,不過隨著短視頻的出現,改變了一部分用戶的閱讀習慣。通過短視頻獲取新聞資訊、搜索指定內容、學習生活技巧或者專業技巧等均可實現,改變了用戶的閱讀習慣和獲取內容的形式。

          央視新聞 APP 作為新聞資訊類的專業平臺,在滿足用戶閱讀新聞的同時,也跟進了短視頻觀看新聞的體驗。在底部標簽欄以舵式導航的形式作為短視頻新聞入口,點擊之后會有推薦視頻展示,差異化的推薦設計不僅提高了內容的曝光度,也吸引了用戶的關注度。

          圖片

           

          小結

          本期為大家總結了提高用戶體驗的十個優秀設計解決方案,體驗、分析、總結是為了掌握別人的設計經驗,積累設計靈感并運用到項目設計中。靈感的積累離不開總結,探索細微之處的差異化對于 UX 設計師而言至關重要。

          本期分享到此結束,僅為個人角度的體驗總結,希望可以帶給大家更多靈感啟發。

           

           

          原文地址:黑馬家族(公眾號)
           
          作者:黑馬青年
           
          轉載請注明:學UI網》提高用戶體驗的10個優秀案例

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

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

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

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

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

          沒想到用上圓形后,設計感瞬間強了很多!

          lanlanwork


          1.圓的線性語言

          圖片

          線性圓形,它的粗細可自由變化,根據當前設計語言的風格調性特征決定的。線性圓形的作用絕大部分都是裝飾,豐富畫面視覺感官,它們大多情況下都是以單色或者黑白灰出現。

          圖片

          如果我們把上圖的圓形線條去掉,設計感自然就弱幾分。當然如果非要去掉也不會影響閱讀,有了圓形形式感自然增強許多。

          圖片

          LOGO符號應用,變為粗線條

          圖片

          UI界面中應用圓形

           

          2.圓形的漸變語言

          漸變圓形基本都是以粗塊面為主,它可以呈現出豐富細膩的質感、厚度、虛實變化的光影。

          圖片

          Sedigas

           

          西班牙天然氣協會Sedigas的品牌LOGO更新,通過圓形設計語言提取,在多場景下貫穿圓形的應用。

          Sedigas(可點擊圖片查看視頻或 點擊Sedigas查看原文中內視頻)

           

          在品牌視覺語言動態介紹過程中,我們可以看到圓形的應用和豐富的變化,圓形與物理世界萬物連接。

          來看看其他案例

          圖片

          圖片

           

          3.圓形面的特征

          當圓形以塊面的姿態出現時,它更隨和,更加溫潤。塊面的圓形和線性的不一樣,塊面圓形更加厚實,整體性,更聚焦。大部分情況下作為背景或者承載內容的容器。

          圖片

          UI界面中,有時候圓形也可作為功能承載,操作區域更直觀可視化。

          圖片

          當以時裝飾元素使用, 圓形一般都會用作強調一些重要信息,同時也增加設計形式感,張力,可玩性。

          圖片

          圖片

          圖片

           

          4.圓形參數化特征

          參數化圓形,它簡單純粹,以一種單一形態不斷重復幾個甚至幾十個上百個的相同的形態,這些重復出現的圓形,大部分都是以裝飾視覺效果呈現。

          圖片

          我們可以看到大部分圓形以線性姿態不斷重復,而且重復中帶有規律可循,比如朝著某個方向拓展開,這個方向可以是斜方向、水平或者垂直。

          圖片

          以同心圓的方式向外計算擴散開。

          圖片

          圖片

          圖片

           

          5.圓形的肌理

          上面我們講到了圓的線,塊面圓、參數化形態和漸變特征,那么在最后這個模塊,我們可以看到圓形還有一種特殊的存在,那就是肌理,這里說的肌理不是貼圖的那種材質,而是通過幾何演變來實現的,比如通過多條線的組合而形成,下面來看看。

          圖片

          上圖的圓形,由多個長條幾何形狀不斷重復形成,這些重復幾何條狀物就形成了一個大圓形的肌理視覺特征。

          圖片

          右上角圓形線性陣列,通過重復小短線條而形成,在一些特殊場景下,這種陣列圓形圖還可以用來打造視覺記憶點或者品牌DNA序列。

          圖片

          圖片

          圓形應用遠遠不止這些,比如還有立體、真實物理質感,還有多形態、空間感營造等等。

           

          今天列舉出來的這5種形態是我們設計中常用,不過在使用時候還是需要依據產品視覺調性合理應用,形式要追隨功能。

          原文地址:友設青年(公眾號)

          轉載請注明:學UI網》沒想到用上圓形后,設計感瞬間強了很多!

          藍藍設計建立了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国产综合