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

          首頁

          萬物皆可異質同構

          seo達人



          很多人做的設計過于平庸,主要原因是圖形部分太常規,比如單純以產品圖片、人物圖片、某個元素或者是一幅普通插畫作品作為畫面的圖形。這類圖形缺少變化、缺少視覺沖突,所以很難有眼前一亮的感覺,也很難讓人產生興趣。而有一個簡單的技巧,可以輕松解決這一問題,即異質同構。

          圖片

          圖片

          圖片

          圖片

          圖片

          這個技巧大家肯定不陌生,這樣的作品比比皆是,但是對于該技巧的使用還是有很多講究的,首先,從設計的形式上來看,異質同構主要分為三種形式:

           

          1.置換材質

          即只保留一個事物原本的造型,而其材質用另一類元素進行置換,比如水材質的面膜、牛奶材質的人、云材質的鞋子等等。

          圖片

          ▲用水材質替換面膜原本的材質,以表達面膜的補水功能。

          圖片

          ▲把正在打籃球的小男孩做成牛奶材質,以表達該牛奶可以促進兒童健康發育、補鈣等訴求。

          圖片

          ▲把鞋子做成云的質感,以表達該鞋子輕盈、舒適的賣點。

          常見的材質有金、木、水、土、玻璃、皮、塑料、紙等等,如果通過材質就能識別出某些產品或者素材,那么就具備了使用這一技巧的基本條件。

          圖片

          ▲把甜菜置換成甜菜汁材質,表達了榨汁機超強的榨汁功能。

          圖片

          ▲把腿的材質換成仙人掌,腿毛則變成了仙人掌上的刺,表達了刮毛器超強的刮毛功能。

          另外,想要置換材質的效果很好,那么對設計師的執行能力要求比較高,通常是通過合成或者3D渲染來完成。

          圖片

          圖片

           

          2.組合堆積

          即按照事物B的造型,用數量眾多的事物A來進行有序的排列組合或者是堆積,比如把塑料瓶堆積成一座小雪山,用葡萄堆出一瓶果汁,用蔬菜組成一個漢堡等等。

          圖片

          ▲用塑料瓶堆積出來的雪山裝置,用以號召大家不要亂扔垃圾。

          圖片

          ▲真實的葡萄被設計成了一瓶果汁的形狀,以表達該果汁真材實料、健康之類的的訴求。

          圖片

          ▲用純蔬菜堆出兩個漢堡,以表達蔬菜漢堡這一訴求。

          在做堆積或者組合時,首先要能保證元素A與B的識別性,另外元素的排列要有序,而不是胡亂堆砌,要注意圖形的美感和質感。

          圖片

          ▲用樹葉、鮮花組合成“肺”的造型,以表達該椰汁可以給你帶來由內而外的美好感受。

          圖片

          ▲鮮紅的心臟細看卻是用拳擊手套組成,創意概念是:為生命而戰。

          圖片

          ▲用“提子”組成的飲料瓶子,以表達該果汁原滋原味的訴求。

          圖片

          ▲用蘑菇以及手動加工的工具、配料等元素組合成蘑菇的造型,表達了該產品真材實料、純手工制作、品質絕佳等訴求。

           

          3.質感對比

          即把某一事物的局部置換成符合原有造型,但質感不同的另一種或另幾種事物,以形成鮮明的對比效果,比如上本身是男人、下半身是女人,左邊是汽車、右邊是滑滑梯,一邊是導彈、一邊是鉛筆等等。

          圖片

          ▲把男士維修工人的上半身與女芭蕾舞者的下半身結合起來,以表達捐獻器官可以讓你擁有兩次不同人生的訴求,這是一個器官捐獻組織的公益廣告,畫風奇特的畫面很有視覺沖擊力。

          圖片

          ▲把汽車的前半截置換成滑滑梯,以傳達清潔汽車的引擎,可以讓你的旅途更愉快。

          圖片

          ▲把導彈的前半部分用鉛筆的筆尖替代,以表達語言可以消滅戰爭的訴求。

          質感對比的做法有兩種形式,一種是對稱圖形,即左右兩個不同材質的元素在造型上是相同或相似的,組合起來又是一個整體。

          圖片

          ▲ 左邊是在荒漠里的仙人掌材質沙發,右邊是在云層之巔的真實沙發,其實只是有沒有空調的區別。

          圖片

          ▲ 把左右兩個不同的餅組合成一個餅,只為告訴消費者,本店推出了兩個新品。

          圖片

          ▲ 把燈泡圖形的左邊置換成大腦圖形,以表達點亮創意的概念。

          另一種是非對稱圖形,即圖片中的幾個部分組合在一起剛好是一個完整的圖形,它們各自完成圖形的某一個部分,造型上并不相同。

          圖片

          ▲ 把釣起的魚浸在水里的部分置換成海洋垃圾,號召大家要愛護海洋,減少對海洋的污染。

          圖片

          ▲ 上圖看似是一個正在飛奔的運動員,實則是由摔跤、跑步、擊劍、足球四張運動圖片組成,把多項奧運項目完美地結合起來。

          圖片

          ▲ 上半部分為巴西里約的耶穌像,下半部分為美國紐約的自由女神像,二者結合起來也相似一個完整的雕像,中間的分割線被設計成飛機的輪廓形狀,巧妙地表達出該航空公司“速度快”的訴求。

           

          圖片

          異質同構雖然是一個挺不錯的圖形設計技巧,但如果所用的素材、組合的方式、構圖太過常規,那么做出來的作品還是會很普通,所以我們要盡量做出一些改變,嘗試一些新的素材、新的組合方式、新的風格、新的創意概念,才能真正做出讓人眼前一亮的效果。

           

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

          作者:蔥爺

          轉載請注明:學UI網》萬物皆可異質同構

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

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

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

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

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



          萬物皆可異質同構

          seo達人



          很多人做的設計過于平庸,主要原因是圖形部分太常規,比如單純以產品圖片、人物圖片、某個元素或者是一幅普通插畫作品作為畫面的圖形。這類圖形缺少變化、缺少視覺沖突,所以很難有眼前一亮的感覺,也很難讓人產生興趣。而有一個簡單的技巧,可以輕松解決這一問題,即異質同構。

          圖片

          圖片

          圖片

          圖片

          圖片

          這個技巧大家肯定不陌生,這樣的作品比比皆是,但是對于該技巧的使用還是有很多講究的,首先,從設計的形式上來看,異質同構主要分為三種形式:

           

          1.置換材質

          即只保留一個事物原本的造型,而其材質用另一類元素進行置換,比如水材質的面膜、牛奶材質的人、云材質的鞋子等等。

          圖片

          ▲用水材質替換面膜原本的材質,以表達面膜的補水功能。


          圖片

          ▲把正在打籃球的小男孩做成牛奶材質,以表達該牛奶可以促進兒童健康發育、補鈣等訴求。


          圖片

          ▲把鞋子做成云的質感,以表達該鞋子輕盈、舒適的賣點。

          常見的材質有金、木、水、土、玻璃、皮、塑料、紙等等,如果通過材質就能識別出某些產品或者素材,那么就具備了使用這一技巧的基本條件。

          圖片

          ▲把甜菜置換成甜菜汁材質,表達了榨汁機超強的榨汁功能。

          圖片

          ▲把腿的材質換成仙人掌,腿毛則變成了仙人掌上的刺,表達了刮毛器超強的刮毛功能。

          另外,想要置換材質的效果很好,那么對設計師的執行能力要求比較高,通常是通過合成或者3D渲染來完成。

          圖片

          圖片

           

          2.組合堆積

          即按照事物B的造型,用數量眾多的事物A來進行有序的排列組合或者是堆積,比如把塑料瓶堆積成一座小雪山,用葡萄堆出一瓶果汁,用蔬菜組成一個漢堡等等。

          圖片

          ▲用塑料瓶堆積出來的雪山裝置,用以號召大家不要亂扔垃圾。


          圖片

          ▲真實的葡萄被設計成了一瓶果汁的形狀,以表達該果汁真材實料、健康之類的的訴求。


          圖片

          ▲用純蔬菜堆出兩個漢堡,以表達蔬菜漢堡這一訴求。

          在做堆積或者組合時,首先要能保證元素A與B的識別性,另外元素的排列要有序,而不是胡亂堆砌,要注意圖形的美感和質感。

          圖片

          ▲用樹葉、鮮花組合成“肺”的造型,以表達該椰汁可以給你帶來由內而外的美好感受。


          圖片

          ▲鮮紅的心臟細看卻是用拳擊手套組成,創意概念是:為生命而戰。

          圖片

          ▲用“提子”組成的飲料瓶子,以表達該果汁原滋原味的訴求。


          圖片

          ▲用蘑菇以及手動加工的工具、配料等元素組合成蘑菇的造型,表達了該產品真材實料、純手工制作、品質絕佳等訴求。

           

          3.質感對比

          即把某一事物的局部置換成符合原有造型,但質感不同的另一種或另幾種事物,以形成鮮明的對比效果,比如上本身是男人、下半身是女人,左邊是汽車、右邊是滑滑梯,一邊是導彈、一邊是鉛筆等等。

          圖片

          ▲把男士維修工人的上半身與女芭蕾舞者的下半身結合起來,以表達捐獻器官可以讓你擁有兩次不同人生的訴求,這是一個器官捐獻組織的公益廣告,畫風奇特的畫面很有視覺沖擊力。

          圖片

          ▲把汽車的前半截置換成滑滑梯,以傳達清潔汽車的引擎,可以讓你的旅途更愉快。


          圖片

          ▲把導彈的前半部分用鉛筆的筆尖替代,以表達語言可以消滅戰爭的訴求。

          質感對比的做法有兩種形式,一種是對稱圖形,即左右兩個不同材質的元素在造型上是相同或相似的,組合起來又是一個整體。

          圖片

          ▲ 左邊是在荒漠里的仙人掌材質沙發,右邊是在云層之巔的真實沙發,其實只是有沒有空調的區別。


          圖片

          ▲ 把左右兩個不同的餅組合成一個餅,只為告訴消費者,本店推出了兩個新品。


          圖片

          ▲ 把燈泡圖形的左邊置換成大腦圖形,以表達點亮創意的概念。

          另一種是非對稱圖形,即圖片中的幾個部分組合在一起剛好是一個完整的圖形,它們各自完成圖形的某一個部分,造型上并不相同。

          圖片

          ▲ 把釣起的魚浸在水里的部分置換成海洋垃圾,號召大家要愛護海洋,減少對海洋的污染。

          圖片

          ▲ 上圖看似是一個正在飛奔的運動員,實則是由摔跤、跑步、擊劍、足球四張運動圖片組成,把多項奧運項目完美地結合起來。


          圖片

          ▲ 上半部分為巴西里約的耶穌像,下半部分為美國紐約的自由女神像,二者結合起來也相似一個完整的雕像,中間的分割線被設計成飛機的輪廓形狀,巧妙地表達出該航空公司“速度快”的訴求。

           

          圖片

          異質同構雖然是一個挺不錯的圖形設計技巧,但如果所用的素材、組合的方式、構圖太過常規,那么做出來的作品還是會很普通,所以我們要盡量做出一些改變,嘗試一些新的素材、新的組合方式、新的風格、新的創意概念,才能真正做出讓人眼前一亮的效果。

           

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

          作者:蔥爺

          轉載請注明:學UI網 ?萬物皆可異質同構

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

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

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

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

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


          復雜網站的導航模式要怎么設計才合理舒適?

          ui設計分享達人

          具有大量庫存商品,或是涉及復雜產品的網站,通常會提供產品類別頁面,或者是產品列表頁面。 類別頁面就像是特定產品類別的主頁。他們可能不提供完整的產品列表,但可能會展示一些產品并提供產品子類別的鏈接。這種頁面本質上是用戶在進入產品列表頁面的過程中經過的一個中間步驟,讓用戶不用一下子面對海量的分類信息。

          復雜網站的導航模式要怎么設計才合理舒適?我總結了7個方面!

          Eddie Bauer 在其全局導航中, WOMEN 鏈接將用戶帶到了這個傳統的類別頁面。這些頁面通常包含產品照片和營銷內容,以及促銷子類別(例如SHOP FLANNEL 和 SHOP FLEECE )的鏈接。

          類別頁面通常提供以下組合:

          • 類別的描述、解釋及其包含的內容
          • 帶有描述和代表性圖像的子類別菜單
          • 推銷該類別中的特色產品

          并非所有產品都需要專門的類別頁面。 不過這種情況有時候會讓用戶非常惱火,因為用戶需要通過額外的步驟才能查看特定類別的產品。

          許多網站完全省略了類別頁面,而是將用戶直接引導到產品列表頁面,在那里他們可以借助過濾篩選的方式來瀏覽產品。

          復雜網站的導航模式要怎么設計才合理舒適?我總結了7個方面!

          Bonobos 網站上的 Pants & Jeans 鏈接不是類別頁面,而是將用戶直接帶到產品的列表頁面。這種方法通常效果很好,因為它盡快向客戶展示了他們可選的選擇。

          雖然本文偏向于電商網站中的類別頁面的探討,但實際上這些頁面也用于其他類型的網站,特別是新聞資訊和教育類的網站。這些建議也可能適用于這些情況,但最好根據領域對你的設計進行測試,以防你的用戶需求與購物型用戶的需求不同。

          何時使用類別頁面

          如果您的電商網站所涉及的產品非常復雜,以至于您的許多客戶需要經過學習之后才會使用,才能正確地過濾和比較產品,那么類別頁面就是一個好主意了 。此外,具有 大類別和大量子類別的網站,有時會提供某種類型的獨立類別頁面,以幫助用戶找到有意義的起點。

          不過,你可以決定讓特定的產品具有類別頁面,而其他的則不具有獨立的類別頁面。例如,Lululemon 主打的健身服裝產品(大多不需要分類頁面),同時也銷售一種名為 MIRROR 的昂貴的家庭健身產品,后者需要更詳細的解釋,因此有自己的分類頁面。

          復雜網站的導航模式要怎么設計才合理舒適?我總結了7個方面!

          Lululemon 為其復雜的家庭健身產品 MIRROR 提供了一個單獨的類別頁面,但并未為其所有產品類別使用類別頁面。

          闡釋復雜產品

          類別頁面可以對電子產品等復雜產品起到解釋作用 。如果用戶還不了解產品選項,他們可能還沒有準備好單擊單個產品。與隨機點擊不同的產品相比,類別頁面為他們提供了一種更有效地了解各種潛在相關產品功能的途徑。

          例如,智能手表通常會有不同的功能和價格范圍,著名智能手表品牌 Fossil 在自己的網站提供了一個類別頁面,列出了不同類型的智能手表,并提供「立即購買」、「了解更多」 以及「比較」的選項。

          復雜網站的導航模式要怎么設計才合理舒適?我總結了7個方面!

          Fossil 的 智能手表分類頁面解釋了不同型號的智能手表的功能和性能差異

          子類別的特征

          購物型用戶可能不需要通過網站來學習服裝或食品等熟悉商品的內容和知識。然而,一個擁有大量產品和內容,并組織成許多子類別的網站,仍然可以從類別頁面中受益——尤其當子類別頁面可以通過獨特的圖文清楚地介紹產品的時候。這比一長串標簽文本更容易方便用戶了解產品,此外它還可以為國外的購物者提供幫助。

          REI 銷售用于各種戶外活動的許多產品,從皮劃艇到登山用具。如果點擊網站的全局導航中Camp & Hike 鏈接之后,頁面跳轉到一個包含所有露營產品的列表面,用戶可能會不知所措,而且無趣。相反,REI 讓鏈接指向到一個傳統的類別頁面,而不是列表,這個頁面包括:

          • 子類別 (帳篷, 睡袋 , 遠足)
          • 該類別中最受歡迎的品牌(Osprey、YETI)
          • 與類別相關的季節性信息(寒冷天氣徒步旅行)
          • 建議(如何選擇睡墊、食物儲存和處理的技巧)

          復雜網站的導航模式要怎么設計才合理舒適?我總結了7個方面!

          REI 使用傳統的類別頁面來幫助購物者在龐大的 Camp & Hike 類別中找到適合自己的產品。

          不要強迫客戶瀏覽類別頁面

          如果你的網站確實提供了傳統的類別頁面,請同樣為用戶提供了避免進入這些頁面的簡單方法,并在他們愿意時,也能直接轉到產品列表頁面。為你的站點的全局導航,提供指向子類別產品的列表頁面(比如使用超大導航 Megamenu ),以及指向傳統類別頁面的鏈接。

          可能還需要確保搜索結果始終指向產品選項,而不是將購物者引導到類別頁面。在我們的研究中,Zappos 會將某些搜索結果指向到以品牌為中心的類別頁面,而不是鏈接到該品牌的產品。

          在用戶測試的時候,一位參與者看到孩子后很生氣,因為搜索她最喜歡的品牌 Sam Edelman 時,她進入了一個具有促銷感的傳統類別頁面,而不是指向她要的產品。對她來說,這感覺像是一個不必要的額外步驟。

          「當我進入 Sam Edelman 時,我想看到結果。我不希望打開一個品牌的分類頁面?!?

          復雜網站的導航模式要怎么設計才合理舒適?我總結了7個方面!

          當用戶在 Zappos.com 上搜索「sam edelman」時,她很惱火地看到一個沒有列出任何單個產品的品牌類別頁面。

          當用戶搜索時,他們希望立即看到結果。

          混合:在產品列表頁面上提供類別信息 

          為了避免傳統的類別頁面的缺陷,并提供對產品列表的快速訪問,許多電商網站現在在主產品列表頁面中,結合混用了少量的類別有頁面的設計——例如簡短的描述性內容,或簡短的子類別菜單。

          復雜網站的導航模式要怎么設計才合理舒適?我總結了7個方面!

          在女士緊身褲 產品列表頁面上,Lululemon 包含了一些傳統會在類別頁面上顯示的元素:營銷內容(藍綠色框標注的區域)和對不同緊身褲樣式的解釋,以及指向這些子類別的鏈接(以黃色框標注的區域)。

          這種混合呈現方法效果很好,因為對描述或子類別菜單感興趣的用戶可以暫停并閱讀它,而不感興趣的用戶可以簡單地跳過,直接快速訪問實際的產品列表。

          說明內容

          一些電商網站在 產品 Banner 旁邊加入營銷的內容和元素,這些元素傳達有用的信息而不會減慢用戶的速度,就像傳統的類別頁面一樣。

          高級珠寶零售商 VRAI 使用混合式設計,在一些產品列表頁面中包含類別頁面樣式元素。它的一個產品列表頁面當中,圓形訂婚戒指頁面中,包含了帶有價格的產品列表,以及解釋性的內容。頂部的文字描述了此類產品的一般特征。側面板提供了有關該類別中所有產品共有特征的說明,以及更多詳細信息。

          復雜網站的導航模式要怎么設計才合理舒適?我總結了7個方面!

          在這個列表頁面中,VRAI 包含了促銷內容(以藍綠色框標注)和說明性內容(以黃色框標注)。其中所呈現的圖文內容是典型的傳統類別頁面的特征(沒有產品列表)。

          子導航

          一些零售類的網站不使用類別頁面,而是提供指向產品列表頁面上的子類別的導航鏈接。這些鏈接(這是最初發明類別頁面的原因之一)讓用戶輕松瀏覽網站的產品庫存。

          例如,Ann Taylor 的 褲子 列表頁面顯示了不同款式褲子的類別,并提供指向該子類別的鏈接。這些內容直接顯示在產品列表上方,幫助用戶了解可用類別項目,并且直接導航到這些類別。

          復雜網站的導航模式要怎么設計才合理舒適?我總結了7個方面!

          Ann Taylor 的網站在 褲子 的列表頁面的頂部,加入了不同褲子款式和合身度的說明和圖片,以便用戶了解其中的差異。

          文章來源:優設  作者:陳子木
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          ui設計分享達人

          老齡化社會已經到來,如何讓中老年群體更好地使用互聯網產品是當今的熱門話題。貓眼演出設計團隊負責的一個 B 端項目的使用人群需覆蓋到中老年用戶,也屬于適老化的涵蓋范疇。

          在前期調研和設計環節中,我們收集了一些相關的文獻及案例,并且結合項目實踐有所思考和沉淀,在這里與大家分享。

          普適的適老化設計理念

          世界衛生組織根據現代人生命狀況,提出了人生階段年齡的新劃分。45~59 歲為中年人;60~74 歲為年輕老年人;75~89 歲為老年人;90 歲以上為長壽老人。[1]

          隨著年齡的增長,人們的身體機能、心理狀態、認知能力等都會出現衰退的情況。

          適老化設計是無障礙設計中的一種。無障礙設計于 1974 年由聯合國組織提出,設計中需要充分考慮具有不同程度生理傷殘缺陷者和正常活動能力衰退者(如殘疾人、老年人)的使用需求。[2]

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          目前互聯網產品中大多數的適老化設計,主要是集中在 C 端。針對不同障礙(視覺、肢體、聽覺、認知障礙)[3],目前普適的適老化設計原則有:

          1. “強烈“好于“柔和”

          針對視覺障礙,常見做法有增大字體大小,使用非襯線體字體,提高顏色對比度等。

          相比原版的 App,百度大字版 App 和支付寶長輩模式修改了 UI 界面,每個功能模塊都用了明亮的大色塊、加大字體的設計。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          2. 善用“輔助”和“替代”

          針對聽覺障礙,常見的做法有通過視覺輔助,將聲音轉化成文字、擴大音量、降低語速等。

          Google 安卓系統推出了 Live Caption 功能,可自動將手機上播放的內容轉換成字幕。Live Transcribe-「Sound Notification 聲音通知」功能,可識別特定聲音(比如煙霧警報器、嬰兒啼哭、敲門聲等),并轉化成文字及視覺符號推送至手機,方便聽障用戶辨別生活當中一些重要的聲音信號。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          3. “點擊”好于“滑動”

          針對肢體障礙,減少頁面信息的密度,避免使用過小的按鈕以及復雜的交互手勢。

          有研究表明,老年群體在操作時難以瞄準物體,在瀏覽圖片時,由于視力衰退導致無法對焦,他們會不斷地用兩只手指放大/縮小并反復點擊屏幕。[4]

          平安銀行 App 關懷模式采用卡片拼接的設計方式,將間距放大,保證每個信息有更大的展示空間,同時也放大按鈕點擊熱區,提高操作的準確率。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          4. “具象”好于“抽象”

          針對認知障礙,避免使用不易識別的圖標,盡可能配有圖標或圖片,簡化信息內容。

          有研究表明,文字+圖標為主的設計有助于提升老年新手用戶對新 ATM 使用的學習效率和記憶。[5]

          滴滴 App 關懷模式針對老年人進行功能精簡,滿足高優先級核心訴求,首頁只放「一鍵打車」,操作簡單,大字、無廣告。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          B端產品引入適老化設計也值得深思

          在很多行業中,中老年人因為擁有豐富的經驗在崗位上更具競爭優勢,譬如教師、醫生、律師、會計等職業,工作年限長、經驗足是優勢,可以提供更好的服務。他們既會使用 C 端產品,也有使用 B 端產品的場景。

          隨著時代變遷,2015 年世界衛生組織提出了“健康老齡化”理念[6],倡導改變過去“老了就要退出社會生活”的消極認識。

          從“老有所依”到“老有所為”,很多的 B 端場景都覆蓋了中老年用戶,如何提升中老年用戶的辦公用戶體驗是重要課題。

          另外我們看下 C 端與 B 端的主要差別:

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          C 端 App 中時常將簡單作為適老設計宣傳點。追求簡單有一部分原因是,C 端用戶是在自己的場域操作且幾乎無時間壓力。而 B 端產品卻相反,業務邏輯復雜,用戶要長時間使用而且要求效率。B 端面向企業定制化,針對特定人群、情景,使得在適老化設計中要解決的問題更清晰。

          適老化設計在POS中的應用

          留意生活中的零售行業,如餐廳、商場、藥局、便利店的服務人員,往往能看到中老年人的身影。

          POS 系統是 B 端場景中使用率最高的產品之一,POS 系統的英文全名為 Point of Sale,中文名為銷售時點信息系統。[7]它由硬件與軟件組成,根據產業和店面類型的不同,會有功能上的差異。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          最近團隊參與了一個改造 POS 系統的項目,使用人群覆蓋到了中老年用戶,提升他們的辦公用戶體驗是其中一個產品目標。

          本次項目主要是 POS 界面的更新,完整的 POS 體驗不僅有軟件本身,有更大的部分在于實體環境與設備,例如:結賬區的控件、店面的擺設、掃描槍,讀卡器等,而 POS 界面是連結上述元素的節點。

          在對 POS 系統進行改造時,我們是按照以下設計思路進行的:

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          第 1 步:沿用舊系統規則與結構

          B 端系統背后往往由成熟的業務場景和復雜的業務邏輯構成。B 端系統往往不是一個從 0-1 全新的系統,而是存在一個被使用了很多年的系統。

          在這種情況下,企業服務的每個用戶都是趨向于規避風險的。人們可能已經習慣了原有的解決方案(盡管不好用,但是大家都會用了),但新的方案如果不好用,他們的生產力反而會因為不知道如何使用新方案而降低。

          這就意味著在做 B 端設計時,現行的方案會產生很大的習慣引力。

          當設計師要引入一個新方案時,取消或改變某些功能及操作行為將有難度,不能霸道性更改,取代需要合理性。

          設計思路:

          1. 梳理業務邏輯和功能模塊:沿用舊系統規則與結構。
          2. 制定框架:定穩定一致、拓展性強的信息框架與導航欄。
          3. 統一專業術語:信息表達(文案)與原有系統盡可能保持一致。
          4. 遵從使用者習慣:原系統中可能存在一些不夠美觀或不合常理但卻實用的快捷入口及交互方式,可以整合優化后進行復用。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          第 2 步:理清主要用戶與使用場景

          想要了解使用者的真實痛點,需從場景出發。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          第 3 步:用適老化設計原則去解決場景中的問題

          POS 使用場景有很多,這里列舉 3 個常見的使用情境:

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          可能存在的障礙:無法聚焦信息內容,難做到邊看屏幕邊與顧客交流。

          設計目標:確保信息在復雜的環境中,信息內容清晰可讀。

          設計思路:

          1. 放大信息內容

          服務至上,POS 使用者在工作時需保持端莊熱情的姿態,不能只專注看 POS 屏幕信息而不顧顧客。

          內容大小的確立由設備分辨率、環境燈光、字體、視距等因素決定,在復雜的現場環境中,信息內容要清晰易讀。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          2. 色彩對比度符合 WCAG 標準

          參照 WCAG 有 AA 和 AAA 的對比度標準,界面中的信息與其背景間的關系對比度至少在 4.5:1 之上,保證信息易讀性。

          WCAG 全稱是 Web Content Accessibility Guidlines(網頁內容無障礙指南)。這是一套由無障礙功能專家編輯的指南,有若干國家在其網絡無障礙功能法律要求中明令必須使用這些指南。[8]

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          一些設計插件可以幫助我們檢驗色彩對比度是否符合 WCAG 標準,給大家推薦 2 款:Sketch 插件 Cluse,Figma 插件 A11y-Color Contast Checker。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          3. 設計有意義的動畫

          通過動效來表達靜態視覺效果無法準確傳達的信息,如反饋、引導下一步、狀態表達等。好的動效與視覺設計是互補而成系統的。

          比如用動畫來展示商品被加進購物車的狀態,引導下一步操作。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          4. 加大點擊熱區

          提高使用者點擊操作的準確率和速度。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          5. 一屏策略

          在這次的項目中存在一個場景,除了銷售端服務員看到的屏幕,顧客也會有一個客顯屏,即服務人員看到的界面,顧客也會看到。

          對于頁面信息框架以及布局盡量“一屏”展示,確保雙方的視線和注意力一致,便于溝通交流。但這時會有挑戰:字放大、按鈕放大,信息和功能在一屏上怎么放得下?

          解決思路:

          • 進行功能篩選,滿足場景中高優先級核心訴求,提取核心功能展示。
          • 模塊化展示每個信息,根據格式塔的視覺感知理論,做到聚焦用戶視角。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          可能存在的障礙:在顧客的“催促”下,使用者也會著急,對事物表現出茫然的情緒,定位當前位置困難。

          設計目標:追求信息的有效表達和操作的直覺性與效率。

          設計思路:

          1. 避免使用不易識別的圖標

          B 端系統中會有些功能很難用一個圖標去表達其含義,此時文字+圖標按鈕優于純圖標按鈕,能幫助 POS 使用者更好地理解語意并做出操作。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          2. 信息的呈現符合用戶眼動規律,操作軌跡越短越好

          可運用古騰堡圖表法 Diagonal Balance,它由 14 世紀西方活字印刷術的發明人約翰·古騰堡提出。他發現人們視覺閱讀規律,左上角是視覺第一落點區,右下角是視覺最終落點區,右上角和左下角都是一個視覺落盲點,大多數情況容易被忽略。

          在進行信息排布時,可根據用戶習慣性的眼動規律,將最重要的信息放在左上角,右上角和左下角添加輔助元素,右下角作為整個視覺落點可以展示重要操作。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          可能存在的障礙:百忙之中,應變能力下降,容易發生誤操作的情況。

          設計目標:預防不當行為,提升容錯率,反饋要及時有效且清晰。

          設計思路:

          1. 通過二次確認避免誤操作

          在產品設計時,要把各種可能性考慮進去,通過模態對話框讓用戶二次確認來避免誤操作行為。

          當有重要操作時需告知用戶處理結果,狀態反饋信息采用的顏色需要遵守用戶對色彩的基本認知,如紅色代表警示,黃色代表警告、綠色代表成功等。

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          上述舉例的設計原則是啟發但不是限制,每個設計提案最后都要經過用戶調研,看是否符合使用者的使用習慣,是否真能解決業務與工作中的痛點。

          附上總結圖:

          如何做好B端產品的適老化設計?來看貓眼演出的實戰案例!

          其實設計到后面會發現,起初為了方便中老年用戶使用 POS 運用的設計原則,最終都能給多數人帶來很大便利。

          這是因為我們每個人在某些時候都會遇到各種臨時的無障礙需求。

          結語

          適老化設計,不僅僅只是為中老年群體做設計,更是一種新的設計思維方式,去挖掘更多普適的場景痛點,來指導我們做方案設計。

          市面上很多適老化設計方法為 B 端產品提供了借鑒,但 B 端產品不能為了適老而適老,理清相關工作情境和要解決的問題很重要;不能霸道性更改,取代需要合理性,因為 B 端產品現行的方案會產生很大的習慣引力。

          以上是近期對 B 端引入適老化設計的一些思考和沉淀,是開始,也將繼續,適老化設計還有很多值得深究和驗證的內容。

          文章來源:優設  作者:范特西
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          ui設計分享達人

          前言:

          在 2020 年,疫情最為嚴峻的時候,B 端這一領域得到了前所未有的關注,而那時,身為 B 端用戶體驗設計師的我,也曾總結過,當時 B 端設計的諸多趨勢,比如:

          多端需求:即桌面端、平板端、移動端的設計形式

          設計中臺:擁有更為統一的設計平臺,與這兩年討論較多的設計資產相同,都是起到快速協作的作用

          隨著 2022 年的到來,B 端行業又會迎來哪些新的機會?今天我們就從整個的 B 端入手,回顧一下 2021 年的設計形式,展望一下 2022 年的設計趨勢。當然趨勢完全是我自己個人主觀理解,僅供參考,如有異議,以你為準~

          完整的趨勢,我們會分為視覺趨勢與產品趨勢

          1. 視覺趨勢:主要圍繞設計當中的細節展開,比如圖標、色彩、字體、插畫等
          2. 產品趨勢:主要是了解不同的 B 端產品當中究竟有哪些發展形式,對于設計師又會產生何種影響?

          視覺趨勢

          1. 3D 設計風格

          雖然 3D 化的視覺風格早已到來,但是在 B 端市場上,3D 風格在此之前依舊表現的十分克制。隨著 C4D、Blender 這些 3D 建模軟件的不斷普及,再加上互聯網上關于 3D 建模教程的增多,你會發現 3D 風格的視覺表現,是一個 B 端視覺設計師的基本要求。

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

          圖標

          因為在 B 端產品當中,圖標本身就是非常難以去表現,比如“物聯網,大數據”,許多抽象詞匯很難通過一個具象的事物進行表達,而在企業官網當中,在視覺表現上的要求又十分的高。因此你會發現,在視覺風格上的選擇,往往只有 3D 圖標 + 插畫這一條路。

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

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

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          可視化大屏

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

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          2. 新擬態

          雖然新擬態是在前兩年的產物。這個設計風格背后,遭到了很多設計師的質疑與排擠。但是隨著這個風格的不斷成熟,感覺它在 B 端視覺領域(特指的是官網 ),是非常受歡迎的,因為整體的風格,與官網的設計形式趨同。

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

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

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          3. 開源的設計系統

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

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          清晰的講解了每一個組件的使用方式,以及注意事項,仔細閱讀這里面的內容,其實就是 B 端設計的入門學習。而未來,國內的環境,開源的系統也會越來越多,大家可以針對這幾大類不同的設計系統進行對比,或許會有一番收獲。

          產品趨勢

          4. 超級 app

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

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

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

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

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

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          低代碼定制化

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

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

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

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

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          因此你會發現,其實低代碼就是在解決一件事,圍繞著某一個業務場景,通過平臺的持續完善優化。讓所有的功能都能圍繞這個業務展開,其中包括:權限、時間軸、流程、表單、公式等等,能夠解決很多特殊的業務場景。而低代碼會涉及到設計思路上的轉變,以及低代碼編輯器的出現,如何去設計如此復雜的配置流程,如何讓用戶能夠快速上手,如果你能夠有比較完整的思路,這些都會成為我們設計的新機會。

          行業細分

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

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

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

          從視覺產品兩方面,分析2022年B端設計的發展趨勢

          因為 B 端產品,在底層邏輯上是不能允許趨同的產品出現,如果你和別人的產品一樣,其實是沒有辦法在目前的市場上立足。因此你會發現,雖然產品形式都會比較相同,但是 B 端市場十分廣闊,大家都在去尋找自己產品的差異化。

          當然市場是瞬息萬變的,這里也只是簡單聊聊我自己的看法,希望對你有所幫助。

          文章來源:優設  作者:CE青年
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          ui設計分享達人

          B 端產品主要是 Web 端產品,空間大、操作多,內容相對復雜。需要通過頁面布局或者視覺設計表達出明確的邏輯關系,從設計角度降低用戶的學習成本。而用戶有固定的認知規律。格式塔原理揭示了人類視覺的認知是整體的:我們的視覺系統自動對視覺輸入構建結構,并在神經系統層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區域。

          格式塔主要包括 7 個基本原則:

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          今天我們就來總結下,格式塔原理在 B 端產品中是如何應用的?

          接近性原則

          我們先看 2 張截圖,分別是不同分辨率下的界面效果。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          可以明顯的感覺到高分辨率下,菜單列間距離較大,菜單的歸屬關系很清晰。而低分辨率下,菜單間的距離變小,特別是后面兩列的菜單會給人混在一起的感覺。這就是格式塔原理中的接近性原則,距離近的關聯親密,距離遠的就各自獨立分組。

          當我們想要傳達給用戶層級關系時,就需要善于利用接近性原則。例如表格上方的功能按鈕,通常我們將高頻、核心操作放置在左側,低頻、輔助功能放置在右側。通過增大元素間的距離,達到功能分區的目的。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          相似性原則

          相似性原則是通過顏色、尺寸、圖形等方面的共同屬性,實現信息的分組或者高可讀性。

          例如在可視化圖表中,不同范圍值的指標采用不同的背景色。通過背景色的差異,將同一范圍內的數據形成視覺關聯,提高用戶對信息的識別效率。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          通過圖形尺寸的相似性也可以構建內容分區。例如阿里云、騰訊云控制臺的首頁,都采用了雙列設計,左側主要以高頻的業務功能信息為主,右側是輔助運營信息。兩列尺寸寬度有明顯差異,用戶會將相同寬度的卡片歸為一組。這樣有助于用戶理解兩類卡片的內容差異,并有效地突出業務信息。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          閉合性原則

          IBM、蘋果的 Logo 設計,無論是“用刀砍過”,還是被“偷咬了一口”,用戶仍然可以識別出完整圖形。這就是視覺閉合性原則的一種表現方式。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          在 UI 設計中,則會通過對齊方式,形成虛擬空間。例如下圖中阿里云通過明顯的背景色、陰影等手法形成有形的內容空間。而微信公眾號則是平鋪背景色,內容區借助標題、卡片對齊形成視覺閉合空間,最終將頁面劃分為左側導航菜單和內容區兩個空間。視覺表現上更輕量化。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          另外閉合性是需要元素之間相互輔助的,單獨的元素無法構建出閉合空間。以下圖為例,雖然四個小的卡片做了間距分割,但是由于界面整體上是橫向分割的。我們會將 4 個卡片看作是整體元素去理解和認知。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          連續性原則

          用戶更習慣于從左到右的橫掃閱讀,因此連續性主要體現在橫向空間中。

          下圖中,雖然左側的標簽文字與右側的內容信息有較為明顯的間距,高度尺寸差距也比較大。但是用戶不會將內容看作是 4 個獨立的個體,而是理解為兩組信息。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          在某些場景中,如果信息平均分布,不會產生連續性的視覺感知。

          例如下圖指標監控中,指標都是采用小卡片,間距、尺寸較為統一。這種情況下用戶就很難對信息分組處理。在我看來這些指標只是一個個的視覺散點,沒有明確的視覺重點。用戶無法感知到內在的邏輯性。用戶想要找到某個指標時,需要逐個檢索,花費的成本更高。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          簡單對稱原則

          通過上述很多圖片,我們可以看出頁面元素基本都是橫平豎直,中規中矩的元素和分割方式?;蛟S有些單調乏味,但是勝在簡單,不會帶來額外的視覺噪點。

          特別是 B 端產品,基本看不到異形的存在,甚至全圓角矩形都很少見到。即使有異形,也只是作為視覺表現元素存在于內容中,而不會作為空間的劃分邊界。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          主體與背景原則

          主體與背景原則最典型的應用就是蒙版彈窗。通過拉大主體與背景的差異性,凸顯彈窗信息。

          當我們需要著重表現內容時,同樣適用于主體與背景原則。例如登錄界面的設計,會通過差異化的背景、陰影等方式,帶給用戶清晰的視覺層級,適當凸顯輸入框的主體地位。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          而 B 端內容區是核心空間,基本都是采用純白背景,與頁面背景形成對比,從而占據信息的主體地位。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          共同命運原則

          共同命運原則聽起來有點玄學,指的是相同運動特征的元素會被認為是同一組或者是具有相關性的內容。運動的元素在 B 端產品中應用很少,我沒有找到合適的案例解釋這個原理。

          在移動端產品中有些應用案例。比如 iOS 系統中,桌面布局編輯態下抖動的圖標,可以與靜態不可編輯的內容形成隔離效果,視覺引導性更強。同樣今日頭條頻道編輯時,也采用了抖動效果。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          總結

          雖然 B 端產品沒有 C 端色彩豐富,表現力上沒那么炫酷。但是兩者對信息傳達的要求是一樣的,要求和諧、有序、層次分明,輔助傳達內在的業務層信息。靈活地運用格式塔原理將對產品的體驗提升會有很大的幫助。

          格式塔原理不僅限于視覺表現,產品經理或交互設計師在原型設計時,也要重視格式塔原理,輔助設計方案表達,提高團隊間的協作效率。

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

          文章來源:優設  作者:子牧先生
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          如何制定B端交互設計文檔

          純純

          前言


          1.平臺視覺交互不統一

          B端產品是很容易交互設計不一致的,隨著多平臺陸續融合為一個平臺,暴露的問題就越發明顯,因此改變現狀便迫在眉睫,此時保證交互設計的一致性就是我們重點要考慮的問題。

          2.前端開發使用插件、組件混亂

          目前有很多較火的組件平臺,例如:Ant Design 、Element等。由于公司內部一些原因,前端開發會直接使用組件庫,沒有規范的約束,隨意使用組件也是導致平臺體驗不佳的一點。

          3.同一場景、同一功能操作體驗不一致

          由于產品上線后,售后組、業務組經常會反映一些關于體驗相關問題,有時只是單一模塊進行迭代、改版、完善而遺漏了與它相關聯的其他模塊,便會影響全局感觀。


          如何解決以上問題?

          首先重點模塊的設計稿搭建!

          此時會有人產生疑問,明明平臺現存很多樣式問題,功能交互不統一,為什么首要不是先快速建立設計規范文檔?

          因為在沒有設計一定量的設計稿之前,所有規范都是華麗的泡泡!前期在設計階段會遇到很多具體場景化的問題,根據不同的場景會不停的修改,還有多方評審來達到最優方案。此時的設計稿處在極不穩定的時期,自然而然也沒什么規范文檔可言,因此現階段要做的工作是找到重點模塊進行設計稿基礎搭建。

          當然設計師在做設計時一定要有全鏈路的思考和拆解問題的能力,不能局限于單個需求,鉆入牛角尖。畢竟B端產品體量大,功能模塊多,系統耦合度高,交互設計文檔又是一個全局概念,這最基礎也是最重要的第一步是非??简炘O計師的。

          重點模塊功能搭建好設計稿以后,可以先讓產品穩定發展一段時間。當團隊對產品初期有了一定熟悉程度,此時就很適合創建自己的交互設計規范了。

          制定交互設計規范的意義

          1.設計師層面

          把控視覺統一,減少重復出圖,提高效率。在公司有多個設計師協同工作時,可保證體驗、設計、交互等等的統一性

          2.開發層面

          提高設計稿的還原度,根據規范中組件使用情況建立公共組件庫,提高復用率,減少返工,極大的提高開發效率。

          3.產品經理層面

          在畫原型圖遵循交互設計規范以及排版格式會減少開發在看原型圖和設計稿之間產生歧義,當然產品原型圖不需要精致,只需按照規定規范中的交互制定即可。

          4.測試層面

          通用組件通過測試后,以后將不在花時間在測試組件交互上,避免了重復工作。

          制定交互設計規范的定義

          B端最重要的設計原則就是效率優先,保證效率的前提是組件一致,交互及時反饋,以及合理的使用場景

          因此設計交互規范不僅僅只是顏色、文字以及一個個組件的展示,這樣的文檔對產品、測試毫無意義。規范是由基礎容器盒子+組件庫+交互狀態+正確使用場景組成,在規范中每一項都應標注清楚。

          思路:將原子【文字、顏色、控制器等】組合成分子【狀態提示、數據展示、數據錄入等】最終組合成元素【不同的容器頁面、彈窗、抽屜、卡片等】一個一個的元素互相搭配,組成完整的基礎平臺。


          一.整體布局

          0.1柵格概念

          在設計過程中,設計師需要建立適配的概念,根據具體情況進行適配,以及考慮哪些區塊需要動態布局。中臺系統的用戶的主流分辨率為 1920*1080、1440*900 和 1366*768,一般常用畫板1440進行區塊動態適配。

          柵格寬度:建議柵格系統的網格大小選定8作為柵格系統的原子單位,目前主流設計屏幕分辨率在水平以及垂直方向都可以被8整除,使用8作為最小原子足夠適配。

          水槽寬度:根據業務可自定義水槽的值。比如8、16、24、32、40等,經過實踐經驗,正常情況下,水槽寬度為24時,視覺效果最佳。

          非常規設計時:不需要死板的堅持傳統柵格系統,根據設計場景可自行修訂。

          頂部導航欄高度計算范圍公式:48+8n。

          側邊欄寬度計算范圍公式:200+8n。



          0.2適配規則

          界面最大可達顯示器最大值,側邊導航為定寬,右側內容隨柵格變化而變化。

          二.彈窗、抽屜、卡片等容器盒子

          0.1概念設定

          為保持視覺、交互一致性,統一容器范圍。容器是用來收納原子、分子的,理論上信息不應該超出容器。

          0.2彈窗案例講解

          以有遮罩基本彈窗為例子進行分析,包括視覺+交互。開發可根據彈窗盒子創建基礎容器組件,像素級也可幫助測試進行校準。產品及設計可根據使用場景規范自身,在制作原型以及設計稿時正確使用組件。


          三.按鈕

          0.1概念設定

          按鈕用于開始一個即時操作。通常分為基礎按鈕(分為主按鈕、次按鈕)、圖標按鈕、文字按鈕、圖標+文字按鈕,在不同場景下使用不同的按鈕達到最佳交互效果。

          0.2圖標+文字案例講解

          基礎按鈕應用廣泛,較多人分析這種場景。所以下面主要分享一下圖標+文字按鈕的基礎規范以及使用場景。


          四.錄入類控件

          0.1概念設定

          錄入類由輸入框、選擇器、單選框、多選框等多種控件組成,基礎交互包括(默認、懸浮、點擊、失效四種狀態)

          不同的控件相互組合成信息頁、表單頁、問卷頁等。

          0.2輸入框案例講解

          基礎輸入框包括(標題+輸入框)根據不同場景有多種情況,下面僅列出交互場景,具體視覺標注不再展示。


          五.反饋提示

          0.1概念設定

          平臺中反饋機制是非常重要的設計,能及時提醒用戶當前操作是否成功,或是失敗在哪里,因此不同的場景需要特定的反饋提示。

          反饋提示包括(警告提示、全局提示、通知提示、氣泡確認框提示、以及tips提示)

          0.2案例講解

          下面僅列出交互場景,具體視覺標注不再展示。


          六.文字、顏色、間距、圓角

          0.1概念設定

          文字、顏色、間距、圓角相當于元素中的原子,完整的界面正是由這些原子一點一點組合而成,承載著最基礎但也是最重要的一部分,因此規范也要更詳細。

          0.2案例講解


          七.多方位評審

          產出文檔是否能真正落地需要來自多方評審包括產品、技術、測試等,盡量從多角度、全方位來進行審核。

          投入開發前,多方評審,各抒己見達到最優方案。

          投入開發后,若要優化修改定稿部分,需再次拉通會議討論,結合當前實際情況將歷史問題一次性解決到位,避免遺漏再次造成不統一。

          八.總結

          由于篇幅原因,規范只是展開個別案例進行分析。

          最終需要落地實現才是最重要的一步,所以我們還有很長的路要走。也要不斷進行思考與總結,如何讓一致性設計規范更符合設計原則和業務場景~

          原文地址:站酷
          作者:食文貘

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

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

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

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

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

          后疫情時代,「無障礙設計」通用指南

          ui設計分享達人


          文章來源:站酷   作者:特里筆記

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

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

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

          讓我們來聊聊Loading

          純純

          在人機互動過程中,用戶與界面的每一次互動都是一次加載過程。加載設計對于使用者來說是非常影響體驗的一個方面,后臺復雜的數據計算時間、網絡狀況不好都有可能造成等待時間長而帶來焦慮,今天就讓我們好好來聊下加載,以及怎么讓加載的體驗變得更好。



          加載的出現 


          加載指的是用戶在客戶端發出一個指令后,直到出現反饋結果時,中間這段時間內計算機完成的一系列執行動作,所以只要你在App中操作請求更多數據那就不可避免有加載。 



          加載的重要性


          根據一份調查得出,用戶能夠忍受加載的最長時間在:3到8秒。8秒是一個臨界值。但現在的高速互聯網真是把我們寵壞了,如果一個頁面的加載時間超過4秒,可能會被用戶直接退出,除非Ta一定要打開那個頁面。

          這里有個很重要的數據叫跳出率,在谷歌的一項調查中就已經發現:

          1-3 秒的加載時間跳出率提高了 32%。

          1-5 秒的加載時間跳出率提高了 90%。

          1-6 秒的加載時間跳出率提高了 106%。

           

          為了降低用戶等待的焦慮,獲得更好的用戶體驗,我們必須讓用戶知道我們正在努力加載,同時要讓加載更有趣來分散用戶等待的注意力。



          加載的場景


          首先我們要先了解以下這些App中最常見的加載場景,也就是那些發出指令后應用需要長時間處理的加載過程。


          1、當頁刷新

          下拉刷新(請求最新數據)+上滑加載(請求更多數據)

          ▲ins_下拉和上滑


          2、從后臺切回App

          當你在多個App中切換使用時,超過一定時間間隔就需加載數據。

          ▲系統后臺切回


          3、啟動App

          當應用出現異常關閉、應用閃退等情況重新啟動app,需要進行數據加載。

          ▲App啟動加載


          4、頁面間的跳轉

          頁面加載新的數據,涉及原生跳原生或者H5頁面。

          ▲Moo音樂_頁面跳轉

           

          5、定時數據刷新

          在特定的時間內頁面自動進行數據刷新,例如每天0點更新排行,大部分用在運營或跟時間相關的場景。

          ▲番茄小說_排行定時更新

           

          6、即時消息

          通訊類社交的App都采用實時推送機制,不需要用戶手動操作也能接收到最新的數據。

          ▲Quack社交聊天






          加載類型的進化 


          1、加載器(Spinners)


          加載器是最早被使用的方式,適用于快速加載,這也是使用率最高的一種。

          ▲旋轉菊花記載


          然而這種加載器有個缺點就是無法告知用戶需要等多久,Nielsen Norman早在1993年就提到響應時間和loading動畫,“如果計算機無法提供快速響應,則應該以百分比的形式向用戶提供持續反饋?!薄綧yers 1985 論文,“計算機-人機界面百分比進度指標的重要性”】

           

          所以加載器和進度條成了黃金組合,適用于長時間(10秒或更長)的加載過程,顯示一個操作將花費多長時間以及目前所處的狀態,通常有線性進度、百分比、直觀數字等。

          ▲Cream M.


          ▲Gleb Kuznetsov? 


          ▲有道樂讀、嗶哩嗶哩漫畫


          在此基礎上加載器也開始往趣味/品牌化發展,使用情感化加載動畫,可以讓等待過程變得輕松、愉悅。Tips:搭建符合目標用戶群體的生活場景,能拉近與用戶之間的距離。

          ▲摩拜單車


          ▲ARCADE STUDIO


          吸引用戶的眼球,感覺時間會過得更快一點,短暫忘記等待的過程。

          ▲Markus Magnusson


          ▲DeeKay



          ▲RWDS


          通過品牌logo或產品相關的圖形呈現在界面上,將品牌基因融入整個Loading動畫中。

          ▲ Google


          ▲Medium


          ▲有道樂讀


          ▲ 開言 

           


          加載器和進度條這一組合有很多變體,可以應用在不同的頁面位置:


          1.1、白屏加載

          當前頁面內容需一次性加載完成后才能顯示內容,這是頁面加載最原始的狀態。當頁面元素較多時,內容呈現的等待時間會變得很長,一旦時間太久要給予提示。


          1.2、Toast加載 

          當用戶執行某個操作時,為了防止用戶繼續操作導致數據加載失敗,則用Toast的樣式來提示正在加載。在畫面中間出現提示框,有時會加上黑色透明底蓋在畫面中間,這種情況一般除了返回上一級的操作可點,其他操作將受到限制。


          1.3、進度條加載 

          可以是在頂部或底部欄上,告知用戶等待的時間長度,讓用戶有一定的心理預期。


          1.4、手動刷新加載 

          通過手勢操作,快速加載和更新當前頁面的內容。


          1.5、局部模態加載

          在特定位置進行加載,功能指示更明確,避免用戶反復操作。


          加載器這種方式相對比較簡單,但也會阻斷用戶的其他操作,用戶只能等待加載完成才能繼續操作。會給人的感覺時間較長,且對于加載出來的頁面沒有任何預期。

           

          那什么時候是需要中斷用戶操作呢?主要有以下兩種情況可以作為判斷:

          1-當前的操作未成功,則接下來的操作或結果也無法顯示,例如:啟動App、手機支付、渲染濾鏡等;

          2-當前的操作本身不能與其他操作同步進行,需停留在當前界面保證操作完成,例如:掃描、遷移資料、實時翻譯等。

          如果中斷時間較短可以使用toast加載提示,時間較長則建議用專門的單頁且有可取消的按鈕來提示加載過程,以引起用戶的重視。


          加載器的特點

          · 適用性廣

          · 拓展性強(趣味性及品牌宣傳)





          2、分布加載(占位符Placeholder)


          占位符分布加載就是當界面中圖文同時存在時,如果獲取完所有信息才顯示所耗費的時間是很長的,因此為了縮短用戶等待的時間,會選擇優先加載快的元素(文字),慢的元素(圖片視頻等)則用其他的方式占位,最終等待加載全部完成。較為適合feed或瀑布流模式。

           

          分步加載的好處是在等待加載的時間里用戶可以看到相關的文字內容,不會像空白頁加載或Toast加載,只能默默地等待加載的過程。

           

          2.1、灰色占位符

          將圖片用灰色或灰色圖(對開發更易用)來代替,中性灰在界面中不會搶風頭,在暗黑模式中也適用。

          ▲灰色色值(例如#EFEFEF)或灰色圖片


          ▲Youtube 


          2.2、品牌相關圖

          在灰色圖上加入品牌元素也是不錯的方式,例如logo或吉祥物IP,將品牌人格化、情感化,輔助企業向用戶傳達產品的氣質特征,在各類產品中廣泛運用。

          ▲Moo音樂、有道樂讀


          2.3、彩色色塊

          通過程序提取面積較大的主色調,并設置幾種符合產品調性的默認色,以防取色失敗。需保證色彩庫的顏色高級耐看,飽和度不要太高,不然很刺眼反倒引起到不好的體驗。

          ▲Behance、Apple Music


          undefined


          ▲Pinterest


          ▲Google Search


          2.4、模糊加載

          模糊圖像也稱為模糊技術,渲染圖像的一個低質量版本,然后過渡到高質量版本,初始圖像的像素和 kB 都很小。為了去除偽影,圖像會被放大和模糊。

          ▲Behance、Unsplash


          分布加載的特點

          ? 良好的閱讀性;

          ? 準確區分已加載和尚未加載的內容





          3、骨架加載(Skeleton Screens)



          骨架加載就是先加載UI布局框架,再加載框架中的內容,細節通常按照骨架輪廓(也稱為占位UI)、文本、圖像的順序出現。通過這種方式直觀地提前讓用戶知道整個界面的架構,并營造出一種漸進的感覺,使用戶感知加載穩定且速度快,提高了產品的體驗感。

           

          “Skeleton Screens”這個詞最早出現在Luke Wroblewski 的文章中,Luke建議使用骨架動畫來獲得更好的loading體驗。這個想法得到了其他設計師的支持,LinkedIn、Instagram、Facebook 和 Google 等大公司都在使用骨架屏幕,通過將被動等待變為主動等待。

           

          被動等待是指你只是坐在那里無所事事,看著加載器轉了一圈又一圈。積極等待是當你在等待時做一些感覺像是進步的事情。骨架加載通過在每次屏幕更新時為用戶提供新信息來鼓勵主動等待。

           

          通過這種方式,骨架屏幕將焦點從您等待的時間量上移開,并將其放在您面前發生的實際進度證明上,從而使加載過程感覺更快。當它顯示已加載的內容和剩余的內容時,它允許用戶構建準確的UI界面期望。

          ▲Medium手機版 


          ▲Medium網頁版



          實現骨架屏幕時,請確保占位符 UI 大部分準確表示最終 UI 的外觀。否則,就會在期望與現實之間產生差距。

          ▲夸克 


          LinkedIn 最近開始使用 Skeleton Screens 進行加載,骨架屏幕轉移了用戶的注意力。它使人們專注于進度,而不是等待時間。

          ▲Linkin 


          骨架加載提升了加載界面的速度進度,這種速度反饋表現的更加友好并減少了不確定性,如果加載時間比預期的要長,也可以在骨架之前短暫地顯示一個加載器,這應該會為你爭取更多時間來完成加載。


          通常骨架和分布加載配合進行,稱為漸進式加載

          ? 顯示UI骨架布局

          ? 優先加載文字;

          ? 加載圖像(或主顏色)質量較低的版本;

          ? 再在后臺加載高質量圖像;

          ? 淡入高質量圖像,取代之前的低質量圖像。

           

           

          骨架加載的特點

          ? 感知更快的加載速度

          ? 清晰的可視化進度指示





          容易被忽略的加載


          1、預加載

          預加載就是用戶瀏覽當前頁面時就預加載下一級所有列表的文字內容,當用戶點擊進入已加載的頁面就感受不到等待,在無網絡情況下也能進行正常的閱讀,在閱讀文字的時候再進行圖片或視頻的加載(相反地則叫懶加載,進入頁面時再加載數據)。但是這種方式會增加客戶端和服務器的負載,也會占用一定的網絡帶寬。


          2、智能加載

          根據不同的網絡狀況選擇不同的數據加載方案,最常見就是用在音樂/視頻/下載更新等占用比較大流量的產品,當判斷用戶處于3G/4G或網絡卡斷的情況下,為了既讓用戶使用流暢也不浪費流量,會自動切換至低速低畫質;而處于Wi-Fi條件下,會優先選擇高清或高質量進行播放。

          ▲嗶哩嗶哩


          3、緩存加載

          也就是離線加載,通過現有Wifi資源將服務器內容緩存到本地,無網絡或是弱網環境下讀取緩存加載??梢越鉀Q無網或弱網情況下數據獲取的問題,會占用本地的存儲空間,以及后續的緩存處理需要考慮。





          加載出錯后的反饋


          加載時間過長可能會損害你的網站的整體用戶體驗。如果加載的速度很慢會導致用戶點擊多次,這時我們需給用戶一個明確的提示“網站正在發生的事情是什么,提供適當的視覺反饋”,加載失敗后最重要的是給出解決方案,讓用戶可再嘗試或尋求幫助。請記住,提供反饋是良好的交互設計和積極的用戶體驗。


          undefined

          ▲嗶哩嗶哩漫畫、閑魚


          ▲Dribbble





          在過去,設計良好有趣的加載器是我們所能做的最好的事情,而現在,漸進式加載成為值得考慮的替代方案,它加快了等待時間感知,還清晰地呈現了UI布局并建立用戶預期。但這并不意味著不繼續思考更好的加載方案,期待未來出現更好的交互體驗。



          總結

          一個好的加載應當具備以下特征:

          1 讓用戶知道應用程序正在運行,給出大致的等待時間,簡單的進度條或更數字視覺化的方式;

          2 告訴用戶等待的原因,在處理什么動作表明軟件并沒有崩潰而是處理請求;

          3 有趣的動畫內容來吸引注意力,讓等待變得可以忍受;

          4 加入品牌,讓用戶在等待的過程中加深品牌印象,形成品牌感知;

          5 盡量使用非中斷式加載,降低等待的心理感知時長。

          原文地址:站酷
          作者:_阿丹a_

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

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

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

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

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



          為了設計更好的深色模式

          純純

          iOS作為UI/UE設計的風向標,一直是行業的引領者,不管你愿不愿意承不承認,他的每一次更新變化總能帶動UI設計行業的一些大大小小的變革,并且產生更多的追隨者,比如當年的iOS7開始的扁平化設計風格,對后續設計風格的影響直到現在已經7年了。



          在最近半年,iOS在UI設計風格上最大的變革莫過于DarkMode(深色模式),在DarkMode之前,我們熟悉的UI界面往往都是淺白色界面為主,而從iOS13開始正式使用了DarkMode,界面突然可以變深色了,蘋果官方說這樣設計可以讓眼睛更舒服的長時間閱讀,為革命保護視力,而且更加省電增長續航,具體結果我們不得而知,需要科學家們去驗證了,但是對于我們設計師來說帶來的挑戰就是要“黑白無?!绷?。



          其實DarkMode從測試版算起已經差不多推出了有半年的時間了,一些知名的APP產品早已經有了自己的兼容方案,同時iOS原生界面也給了我們很多最佳實踐案例,按道理大家對于DarkMode的設計方式方法應該已經掌握了差不多了,但直到這幾天微信正式推出了自己的DarkMode兼容方案,才發現對DarkMode的探索還需要設計師們多多努力。謹以此文表達一下自己的觀點,不妥之處敬請海涵。


          從一個“列表頁面”說起:

          列表試圖(TableView)是iOS中最常見的界面組件,一般常見于設置與欄目列表頁面


          iOS設置界面的淺色模式和深色模式看起來都非常協調。

          下面我們看看微信發現頁面,這個頁面和iOS設置是很相似的。


          如果單獨看微信發現頁面的淺色模式實際效果還是不錯的。

          但是直接轉換到深色模式下就感覺突然差的很多了,甚至可以說是有點難看,這次微信真的做了一次黑天鵝?

           

          到底是什么原因讓微信發現頁面在深色模式下視覺體驗如此之差呢?

          我們不妨將兩個功能布局都相似的深色進行放在一起進行一下比較


          組成色彩分析:

          在色彩這塊在這兩個頁面中微信和iOS基本保持一致,四層灰度設計能更好的保持頁面整體干凈整潔且層次分明,但是被A背景色上,微信的背景色選擇了黑色偏綠的顏色,應該是微信設計師還是想體現出產品的標志色原色。

          文字的顏色也較iOS略微深一點,但是在整體上影響并不大。


          看來在主要色彩上并沒有什么問題,那么為什么微信這個界面與iOS界面比起來視覺上要感覺差一些呢?

          下面來看一下圖標


          圖標設計分析:


          圖標上的差別主要在于線寬與外框,微信采用無外框統一線寬的線形圖標,iOS采用的是有外框剪影圖標。

          我們我們把圖標進行互換會怎么樣呢?



          觀察到了嗎?別看錯了!

          是的,我把故意位置做了對調,左邊是iOS,右邊是微信。替換圖標后的微信明顯加分不少,整個界面都整齊多了,而iOS換了圖標后明顯變得不夠整齊了,潦草很多。


          那么結論是微信的無框線性圖標在深色模式下兼容有問題?是的的確如此。但是等一下,還有一些細節你注意到嗎?換了圖標的微信界面和之前的iOS界面比起來明顯還是有點不夠整齊,為什么呢?

          來我們回過頭來從細節再看一下iOS界面。


          我們按照這個思路把剛才微信替換圖標界面再排序一下!

          界面視覺體驗明顯整齊了很多是不是!


          疑問:

          為什么細線圖標和無框圖標會在深色背景表現不夠好,而在淺色背景下就沒問題呢?

          是不是所有的UI都會存在這樣的問題呢?

          我們再來看一些例子:


          看來結論是一樣的,線性圖標在深色背景下的表現都是差強人意,反觀帶框圖標適應性很強,淺色和深色模式下均能良好的適配,我來分析一下原因。


          當年伽利略用望遠鏡往天上看,發現木星比金星大,換成肉眼看后金星則比木星大。他認為是眼睛的某種視覺特性造成了這種現象。

          德國物理學家赫爾曼把這種錯覺稱為輻照錯覺,就是說在黑暗背景下,亮度越高的物體看起來面積越大。


          再來看一張圖片


          哪個圓圈看起來更大,顯然是黑色背景下的白色圓形,實際上這只是一種錯覺,所有圓圈是一樣大。


          光亮刺激會使得神經元產生非線性放大作用,導致刺激比實物本身看起來更大,白色圓形更亮,所以看起來更大一些。


          線性圖標是用線條勾畫圖案達到隱喻效果,一般線粗是2px~6px像素。



          設計師在設計時候都是以最終視覺作為參考,而設計稿本身多是淺色背景,所以在淺色背景的映襯下圖標視覺會顯得稍大,視覺基本是平衡的,假如設計是4px而呈現出的效果其實是6px左右。


          是不是覺得哪里有點不對了?按照這個邏輯黑色背景下白色線圖標不應該是視覺更大、更明顯嗎?


          我們還需要考慮一個因素,那就是色彩,之前的幾個界面案例的線性圖標都是彩色的,特別是黑色背景下,不同色彩的圖標放在一起,會有明顯的忽大忽小的感覺,會讓界面感覺非常凌亂。


          是不是感覺黃色最大,紅色的最???但是其實是一樣的,這還是相同形狀的,要是圖標形狀不同感受會更明顯


          看一個實際中的例子:

          由于都是單色線性圖標,在淺色和深色下表現還都不錯的,但是單色圖標略顯界面單調,并不太建議這么設計。


          毫無疑問,未來的UI場景需要適配多背景色風格,圖標除了具備好看隱喻之外,更需要具備抗干擾性

          帶框圖標是一個不錯的解決方法,大膽預測帶框圖標會將成為未來一段時間圖標設計主流!


          結論

          1:深色模式中灰度色階在一個界面最多可分為四層。

          2:為了適配深色模式,今后有框圖標將會成為圖標設計風格主流。

          3:同樣為了適配深色模式,細線圖標將會被淘汰,剪影和粗線圖標會流行起來。

          4:圖標除了個體設計上用心,在排列上也會極大影響到頁面的整合視覺,光譜排列法是個不錯的選擇。


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

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