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

          首頁

          線條是新開始

          lanlanwork

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

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

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

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

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

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

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



          APP導航欄設計分析:5種設計樣式+4種交互狀態

          lanlanwork


           一、導航欄的構成 

          整個導航欄通常分為左、中、右三部分,左側和右側主要用來放置功能控件,中間部分主要用來放置文字標題,接下里展開分析左中右三部分的構成。

          圖片

           

          左側導航

          放置在APP頂部導航欄左側的控件很多都跟動作相關,例如執行返回動作、關閉動作或者點擊漢堡菜單進行展開動作等。

          圖片

          除了在左側放置表示動作的控件,還可以在放置頭像框、消息提示等優先級較高的內容,用來引起用戶的注意。

          圖片

          在網頁端的頂部導航欄中,左側都會放置品牌logo,因為網頁端頂部的空間更大,所以還可以在LOGO周圍結合徽標、搜索框、下拉菜單等空間。

          圖片

           

          中間部分

          APP頂部導航欄的中間部分主要用于放置標題,當然根據使用場景的不同,還可以放置頭像、搜索框、下拉框、導航等控件。

          1) 標題

          最常見的是在中間使用加粗的文字作為標題,也可以使用主標題+副標題的形式來展示更多的信息。

          圖片

          還可以把標題區域做成支持下拉的樣式,擴展更多的功能全。

          圖片

          2) 用戶頭像

          在社交類產品或對話框中,會在中間部分放置用戶的頭像和信息,用來展示用戶的詳細信息。

          圖片

          3) 產品Logo

          有些產品還會將Logo放在導航欄的中心位置用來展示品牌形象,在APP的首頁可以考慮這樣設計,起到強調作用。

          圖片

          4) 分段控件

          在移動端產品中,還可以在中間部分放置分段控件,通常2-3個標簽,在早期的網易云音樂APP中就用到了這樣的設計,通過點擊標簽或者左右滑動頁面完成內容切換。

          圖片

          5) 搜索框

          導航欄中間經常能看到搜索框,然后搜索框左右兩邊放置其他的控件。當導航欄的內容太多,比如有文字標題、頭像、按鈕等控件,搜索欄和這些控件可能無法并排放置時,可以將搜索欄橫向拉長,放在下一行單獨展示。

          現在淘寶APP首頁的導航欄就做成了兩行,上一行用來放置文字標題和功能圖標,搜素欄集合掃碼、拍照等功能單獨作為一行。

          圖片

          6) 導航選項

          在網頁中,標簽、按鈕、面包屑導航等常見的導航組件,通常會固定在網頁導航的中心位置。當頁面縮小到移動端時,考慮到移動端尺寸較小,如果頂部導航內容太多,可以嘗試把功能組件放到第二層級。

          圖片

           

          右側導航

          相對于左側和中間,APP導航欄的右側部分更加靈活,沒有固定的要求說必須放哪些內容,根據需求放置各種類型的功能控件。

          1) 頭像

          如果想調用與用戶屬性相關的功能,就可以將頭像放在導航欄的右側區域,點擊彈出相關的選項。

          圖片

          2) 圖標

          在右側區域放置功能圖標是最常見的設計,把用戶最常使用的功能,例如消息圖標、搜索圖標,都可以集中到導航欄的右側區域。

          圖片

          如果右側需要展示的圖標太多,可以把這些圖標聚合在一起,處理成類似微信首頁右上角的設計,點擊之后出現更多功能。

          圖片

          3) 按鈕

          按鈕也可以放在右側區域來引導用戶操作。當出現多個按鈕時,要使用樣式和顏色來靈活區分按鈕的主次關系。

          按鈕的形狀包括圓形、方形、圓角矩形等,按鈕樣式包括顏色填充、描邊、圖標和文字結合等多種風格,通過靈活的設計抓住用戶的注意力。

          圖片

          4) 搜索框

          在網頁端中會看到搜索框放在右側的設計,將搜索框作為單獨的控件或者和其他控件組合使用放在右側,方便用戶快速訪問。

          圖片

          5) 下拉菜單

          在Pad端和網頁端中,可以使用嵌套在應用欄右側的下拉菜單進行切換帳戶、語言等操作。

          圖片

           

           二、導航欄的5種設計風格 

          頂部導航欄設計風格需要與與整個產品的UI相匹配,常見的導航欄設計樣式有

          扁平風格、陰影懸浮效果、顏色填充效果、使用半透明導航等。

          圖片

           

          扁平風格

          頂部導航區域完全融入到背景中,和整個頁面融為一個整體,頁面看起來比較簡約。

          圖片

           

          陰影懸浮風格

          通過在導航欄下方增加一層陰影效果,讓導航欄有懸浮在頁面上的感覺,同時便于和頁面其他內容作區分。

          圖片

           

          顏色填充風格

          將導航欄背景進行色彩填充,不透明度降低到8-12%,使用一些簡約而高級的色彩來增加頁面的豐富度,體現品牌特點。

          圖片

           

          深色風格

          APP頁面的背景大多都是淺色,這個時候如果使用深色的導航,能夠產生很強烈的對比效果,用來突出導航中的內容。比如早期的微信APP頁面,頂部就是采用深色的導航,和淺色的頁面作對比。

          圖片

           

          透明風格

          圖片詳情頁的UI設計中常用到透明的導航風格,既能避免導航欄將圖片內容遮擋,還能突出頁面的高級感。

          圖片

           

          三、導航欄交互狀態分析 

          選中狀態

          當用戶與導航欄交互時,導航欄上的控件要能夠動態切換來為用戶提供即時反饋,比如當選中頁面中的內容時,導航欄要出對應的操作提示,是否刪除、分享等。

          圖片

           

          滾動狀態

          當頁面上下滾動時,原本扁平的APP導航欄出現陰影懸浮的升高效果,狀態的改變會讓操作看起來更自然。

          圖片

           

          背景模糊

          當頁面滾動時,頂部導航出現毛玻璃的模糊效果,這是現在很流行的視覺效果,會讓整體的用戶體驗更流程。

          圖片

           

          尺寸調整

          當頁面尺寸變小時,要考慮將多余的導航選項折疊并隱藏在“更多”圖標里面,這樣才會讓設計更合理。

          圖片

           

          最后 

          以上就是導航欄(App Bar)設計中能用到的知識點和設計細節,希望通過這些內容能幫助你對導航欄有更多的設計想法和思考。

          「組件系列」的其他文章,近期也會不斷更新,歡迎大家關注??

          設計夾將近期分享的設計資源整理成了一份清單合集,如果其中有大家需要的資源,直接在公眾號后臺回復對應的關鍵詞即可免費領取,這份清單也會不斷更新更多的資源,建議大家收藏起來隨時查看。

          慢慢來比較快,希望對你有幫助!

           

          領取方式:關注公眾號,后臺回復【資源】獲取高清素材清單

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

          作者:Clippp

          轉載請注明:學UI網》APP導航欄設計分析:5種設計樣式+4種交互狀態

          藍藍設計建立了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.

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

          圖片

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

          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咨詢、用戶體驗公司、軟件界面設計公司



          如何培養設計美感,這個方法掌握了,想不進步都難!!

          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網》如何培養設計美感,這個方法掌握了,想不進步都難!!

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