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

          首頁

          大數據可視化界面設計之六:想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          博博

          數據可視化的目的,是要對數據進行可視化處理,以能夠明確地、有效地傳遞信息。” ——Vitaly Friedman

          如何讓人們在海量的數據中,發現數據的規律,或者清晰的發現特異的數據,那數據可視化是一個有效的表達方式。

          數據可視化主要旨在借助于圖形化手段,清晰有效地傳達與溝通信息。如圖

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          馬克·吐溫有一句名言“世界上有三種謊言:謊言,該死的謊言和統計數字。”人們經常曲解數字,謊言并不是源于數字本身,而是錯誤或不負責任的使用數字的人,向他人展示數字的時候,你有責任展示出真相?!稊祿馈?

          數據真相的展示離不開數據圖表的合理選用,那么如何正確的選用呢?就來聊一聊基礎數據圖表類型的選用及辨析。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          常用的基礎圖表類型


          第一部分:選用合適的圖表類型


          在數據可視化設計工作中,折柱餅圖表是最常用的,同時也是最容易混淆的。一組數據既可選用折線圖,又可選用柱狀圖的時候,設計師的內心往往會產生“我該選用哪種圖表能更好地將數據傳達給用戶呢”的疑惑中。

          基于上述疑問,下面給大家一些設計指引供參考。

          1. 柱狀圖 VS 折線圖

          折線圖主要表示一段時間內數據變化趨勢,柱狀圖用于描述分類數據之間的對比。如果不需要展示數據的變化趨勢,建議不要使用折線圖,而選擇柱狀圖。

          相較于折線圖,柱狀圖更多的關注數據之間的對比而非趨勢。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          2. 柱狀圖 VS 條形圖

          在大多數情況下,折線圖和柱形圖是可以互相替換的。

          1)用戶針對橫向長短的敏感性高過豎向,涉及到排行時最好使用條形圖。

          2)標簽較長時,使用條形圖。例如:城市人口流入量的數據展示,由于城市名稱文本比較長,建議使用條形圖。

          3)當圖表畫布高度大于寬度時使用條形圖,利用高度空間的富余,展現更多的條形。

          反之,建議使用柱狀圖。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          3. 柱狀圖 VS 餅環圖

          基于人的認知特征,人對面積、角度的敏感性沒有對長短的敏感性強。當類別的值接近時,不建議使用餅環圖,除非是強調單個數據在總體中的占比,突出數據在群體中的特點。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          4. 折線圖 VS 面積圖

          通常情況下,面積圖是折線圖的一種衍生。在面積圖里,數軸和線之間的區域通常用顏色或陰影來增加易讀性。面積圖數據集之間差異化部分在視覺上得到突顯。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          5. 餅圖 VS 環圖

          從本質上來看,餅圖與環圖屬于同一類圖表類型。但二者在數據可視化的表現上各有側重。從圖形映射角度來說,弧長比面積、角度更易被識別、更有效。因此,相對餅圖,環圖讓數據更具可讀性,同時,可以將強調數據放置在環圖中部,引起用戶關注。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          6. 堆疊柱狀圖 VS 餅圖

          如果在餅圖或環圖的基礎上增加一個多數據的對比,就需要引入堆疊柱狀圖。相較于餅圖,每一個單個堆疊柱狀圖就是一個餅圖的變形,可滿足用戶的單一數據的部分之間的對比關系。將堆疊柱狀圖橫向排布,就實現了整體數據之間的對比,而餅圖是不能進行整體數據的對比。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          7. 堆疊面積圖 VS 堆疊柱狀圖

          堆疊面積圖強調數量追隨一個數據變化而變化的程度,同時強調部分和整體的變化趨勢。

          堆疊柱狀圖強調的是整體的對比,也可以直觀的看出每個系列的值,尤其是當需要看某一單位的綜合以及各系列值的比重時,最適合。

          當日期數據點較多時,比如展示近50年某一組數據趨勢的變化時,建議使用堆疊面積圖,可動態交互,如X軸放大縮小可較為直觀的展示數據。當日期跨度較小,如近7天、近3天某一組數據的的變化關系時,建議使用堆疊柱狀圖。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節


          第二部分:應用中需要注意的細節


          1. 折線圖

          1)為了可讀性,折線圖線的數量建議不要超過5條。當折線數量超過5條時,可在圖表默認狀態中高亮最重要的部分。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          2)為了數據的易讀性,建議折線視覺效果使用實線

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          3)慎用曲線。單折線圖中線條是唯一的主題,線條的每一個點都真實的反應數據的起伏,一般建議使用折線。

          若線條趨勢不需要非常精確呈現,且需要消除個別差一點和整體的趨勢,可以用平滑曲線

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          4)折線圖可以處理大量數據,非常適合給用戶一些具有參考價值的數值,建議添加比較數據

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          2. 面積圖

          面積圖作為折線圖的一種衍生,可用來展示連續性數據,可很好地表示趨勢、累積、減少以及變化。堆疊面積圖更擅于展示部分和整體之間的關系或趨勢,而不是傳達特定的值。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          3. 柱狀圖

          1)柱子之間的間距不要過大,增加數據易讀性。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          2)使用合理的數據油墨比,降低用戶獲取數據的認知成本

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          4. 堆疊柱狀圖

          堆疊柱狀圖的數值必須能相加,相加無意義的數據不建議使用堆疊柱狀圖。如圖,同一區域的人員年齡相加,是沒有數據意義的,如果將年齡改為人員數量,就可以橫向對比不同區域的人員數量,是具有實際意義的。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          5. 條形圖

          分類數目是固定的,空數據也要展示。如果省略部分空數據節點,會造成不必要的誤解,同時,數據的整體分布狀況也不能完全表達出來。同理,柱狀圖也是一樣。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          6. 餅環圖

          1)若計算百分比,每個切片的數值不能為負,餅圖切片的大小與其相應的值成比例,所有切片相加必須為100%。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          2)通過扇形區塊的面積,弧度和顏色等視覺標記,展現部分與部分之間以及部分與整體的占比關系。

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節

          3)餅環圖各切片有序排列

          想做好數據可視化?先掌握常見 5 類圖表的特點和設計細節


          寫在最后


          雖然,數據可視化通常會讓人聯想到商業的分析師,但它通常比想象的更具創意并且豐富多彩。從業務儀表板、公共健康可視化到流行文化趨勢分析,數據可視化涵蓋了廣泛多樣的應用情景。

          隨著數據可視化的發展,數據表現形式也越來越豐富、多樣,如在Echarts中有近40個大類的圖標樣式介紹。如?;鶊D、雷達圖、地圖等等。一些之前比較少見的圖表類型,也越來越常見,如玫瑰圖(南丁格爾玫瑰圖),通過人民網在疫情期間的應用,也為大眾所熟知。

          一般來說,相較于基礎圖表,目前發展的數據可視化圖表,應用場景相對來說比較局限,同時制作方式也較為復雜,不同于基礎圖表,通過Excel就可以實現,復雜圖表的制作需要比較專業的工具,或專業人員來實現,如需要專業的數據分析師通過Tableau、Qlikview、FineBI等數據分析工具來實現,有較高的學習與應用成本。

          好的可視化設計一定集易讀、突出數據價值、易于分析、美觀為一體的,最終讓數據變得更加簡單,方便交流,反之,不僅讓數據變得更復雜,而且還會帶來錯誤誘導。因此,如何讓數據分析變得輕松、流暢并且易讀,從而提高用戶的工作效率,降低用戶的工作負擔,則成為設計師的重要責任。

          本文只是介紹了部分基礎圖表的應用經驗,后續有機會將繼續完善可視化圖表應用經驗的沉淀及分享。

          作者:弘毅

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

          大數據可視化界面設計之一:可視化大屏設計快速入門指南

          大數據可視化界面設計之九:超全面的數據可視化設計指南:設備篇

          大數據可視化界面設計之十:數據可視化必修課:表格篇













          大數據可視化界面設計之五:超全面的數據可視化設計指南:字體篇

          博博


          前言


          讀者朋友們大家好呀!(聲明:《字體篇》文章中所有的字體規范都只針對可視化大屏設計,后臺可視化以及 B 端可視化的字體規范與其不同)

          最近產出了很多東西,但都是以零碎的知識為主,主要是在社群進行分享,因此有需要的小伙伴歡迎加我交流。


          整體架構


          今天就帶大家好好聊一聊可視化大屏設計中的字體、字號、字重、字體優化等一系列注意事項。字體篇主要分為四大模塊:字體選擇與字重、字號規范與應用、字體優化與交接、常用字體與推薦。

          超全面的數據可視化設計指南:字體篇


          字體選擇與字重


          文字是界面中最核心的元素,是產品傳達給用戶的主要內容,它的承載體即是字體。從字體的最基本屬性(字族、字類、字重、字號等)說起,熟悉字體的那些特征,了解字體在界面中的作用。

          超全面的數據可視化設計指南:字體篇

          1. 襯線體與無襯線體

          襯線體

          襯線又被稱為“字腳”,襯線體就是有邊角裝飾的字體。我們常用的西文字體 Times New Roman 等;中文比較常見的比如宋體、明體等。

          超全面的數據可視化設計指南:字體篇

          無襯線體

          無襯線體則與襯線體相反,通常是機械和統一粗細的線條,沒有邊角的裝飾。最具代表性的 Arial、Helvetica 的西文字體,中文比較常見的比如黑體,微軟雅黑等。

          超全面的數據可視化設計指南:字體篇

          總結

          無襯線字體所具備的技術感和理性氣質,更受科技型企業或品牌青睞,騰訊谷歌等互聯網企業都是選用的無襯線體;襯線字體的優雅與復古,則常用于藝術性文字,時尚品牌等。

          因此在具有濃厚技術的可視化氛圍中,體現科技感和數字感,結合我們的觀測體驗,展示形式等,我們統一選用的字體是無襯線體。

          超全面的數據可視化設計指南:字體篇

          2. 中文字體

          字體選擇

          在使用數字屏幕閱讀時,字體的選擇要選用無襯線體(比如黑體,微軟雅黑)厚重一點,不可選用襯線體(比如宋體,書法體)比較單薄。

          注意事項

          標題可以用 Bold,更厚重,更加醒目,且不需要長時間觀看;正文由于需要長時間觀看,因此采用 Regular 字重,觀感以及體驗更佳;

          超全面的數據可視化設計指南:字體篇

          3. 英文字體

          字體選擇

          英文字體類型的使用,英文選擇更明顯的粗體,因為要展示數據,使得數據展示更加直觀,依舊是選用無襯線體,比較推薦:D-DIN 字體。

          注意事項

          字重用 Regular,更加纖細精致,英文字體分為大小寫,一般推薦使用純大寫模式,因為大寫可以保證字體本身整齊,并且寬高都是一致的,對于排版以及展示會更加友好。

          超全面的數據可視化設計指南:字體篇

          4. 數字字體

          字體選擇

          數字字體類型的使用,考慮畫面的字體的種類不超過三種,并考慮到字體的統一性,數字的字體與英文字體保持統一,比較推薦:D-DIN 字體。

          注意事項

          數字字體的字重盡量使用 Bold,因為展示更加明顯,數字的展示一般都為數據展示,在界面的展示中,一般數字字體會比同字號下中文小 4-6px,因此展示是保證數據清晰顯示,數字的字體大一點數據才能更清晰,更符合數據可視化展示。

          超全面的數據可視化設計指南:字體篇

          數字字體盡量選用等距字體,比如數字“1”和“0”,有些字體的間距會相應的縮小,我們要選用的就是等距字體,這樣在做一些列表數據對齊的時候,數據展示更加友好。

          超全面的數據可視化設計指南:字體篇


          字號規范與應用


          政府類客戶對于文字大小粗細的追求可以說是非常的偏激,字體加大加粗幾乎成了標配,這種需求下,我們能做的就是在原有規范的基礎上盡量去提升字號和字重。

          1. 常規 16:9 屏

          常規 16:9 指的是 1920*1080 的分辨率

          在字體大小的選擇上,參考了頁面上常規大小,定義了一套關于不同尺寸下的標準字號,正常 1080P 頁面,最小字號不小于 16px。

          此處字號并不是絕對,因為考慮到目標群體適老化的原因,我們主動提高了字體的大小,一切都是為了提高客戶的觀測體驗,具體字號大小還需要參考設備清晰度,環境燈光,視距,人為原因等因素。

          超全面的數據可視化設計指南:字體篇

          2. 常規 32:9 屏

          常規 32:9 指的是 3840*1080 的分辨率

          在字體大小的選擇上,其實是兩塊 1080P 的屏幕進行拼接,因此如果畫面內容較多時,定義最小字號不小于 16px。

          如果畫面內容較少時,具體字號大小還需要參考設備清晰度,環境燈光,視距等因素,對字體進行相應的放大,比例合適即可。

          此處字號并不是絕對,因為考慮到目標群體適老化的原因,我們主動提高了字體的大小,一切都是為了提高客戶的觀測體驗。

          超全面的數據可視化設計指南:字體篇

          3. 特殊尺寸屏

          特殊尺寸指的是非主流的分辨率,比如 2880*1920 的分辨率

          這塊的字號大小比較難定義,因為需要考慮的因素很多,總體來說字號大小如果高度在 1080px 左右,那么就按 16:9 的字號規范來算。

          如果高度高于 1080 且很多,則需要等比計算或者放大,具體實踐出的準確數值還得需要根據大屏的實際情況來綜合考慮,這里只是提供一些基礎計算方式。

          超全面的數據可視化設計指南:字體篇

          4. 字號影響因素

          字號的大小受到屏幕大小的影響;字號的大小受到界面內容的影響;字號的大小受到觀測距離的影響;字號的大小受到設備性能的影響;字號的大小受到主觀人為的影響;

          超全面的數據可視化設計指南:字體篇


          字體優化與交接


          給開發的字體太大怎么辦?如何優化?開發采用默認字體去開發怎么辦?開發用部署電腦沒有這個字體去打發你又該怎么辦?

          1. 優化字體

          給開發的字體太大,占用內存該怎么辦?

          其實我們可以用一些特殊的方法對原有的字體包進行優化,比如英文字體,我們可以刪除非必要的中文字體和數字,符號,只保留一些必要的英文字母。具體方法如下,我們可以用 FontCreator 軟件去進行字體的優化與刪減,并修改字體細節,重新命名發布。

          同時如果有意向的同學,也可以用自己設計的字體去應用到開發,這樣的操作不是一舉兩得嗎?

          優化字體教程: https://www.bilibili.com/video/av82311138

          超全面的數據可視化設計指南:字體篇

          2. 開發交接問題解析

          開發采用默認字體去開發怎么辦?

          默認字體開發可能有時候會出現文字換行,或者文字放不下的情況,因為不同字體的字間距以及大小可能是不同的,因此在初期就需要跟開發協調好,跟設計效果圖的字體保持同步,這樣才能保證設計效果的還原。

          超全面的數據可視化設計指南:字體篇

          本地部署電腦沒有字體該怎么辦?

          字體的存放一般是有兩種,一種是放到單獨的服務器然后每次加載去服務器訪問字體,另一種是跟代碼放到一起。對于字體大小的要求。本地存儲不需要考慮字體包的大小,云存儲需要考慮字體包大小。

          云存儲一般字體包大小的話可以限制在 2、3M 左右,5、6M 的字體包就已經非常大了,太大會影響我們字體的讀取,畫面加載很慢。

          超全面的數據可視化設計指南:字體篇

          最優解就是在部署本地的電腦上安裝你需要的字體,這樣的話程序就自動讀取,可以識別本地部署的字體;如果不支持本地化部署的,字體是存放在服務器或者是跟代碼打包放一起的,可以要求開發在全局代碼中多寫幾個備用的字體。

          比如你是 Windows 系統,那么自帶的就是微軟雅黑,iOS 系統自帶的就是蘋方平臺,會自動根據寫出的代碼按順序篩選自帶的系統字體。

          超全面的數據可視化設計指南:字體篇


          常用字體與推薦


          一些特別好用的字體,會在設計過程中提升畫面視覺,因此給大家推薦并分享了一些可以做可視化大屏的商用中英文字體。附件下載。

          1. 可視化常用中文字體

          中文字體包含了一些可以做標題的一些造型比較好看的字體,比如優設標題黑,站酷高端黑體,盧帥正銳黑體,胡曉波男神體等等??勺稣淖煮w的比如,蘋方簡體,思源黑體等等。

          超全面的數據可視化設計指南:字體篇

          2. 可視化常用英文/數字字體

          英文字體和數字字體主要是分享了一些數據展示比較奇特的造型字體,比如:DS-digital、Furore、以及正常數據展示的 D-DIN 字體家族等。

          超全面的數據可視化設計指南:字體篇


          全篇總結


          字體的最基本屬性:字族、字類、字重、字號,通過四種基本屬性為切入點,精準的去講述大屏可視化的字體規范和樣式。

          在可視化大屏設計中,字體更加偏向于無襯線體,無襯線字體所具備的技術感和理性氣質,更受科技型企業或品牌青睞;

          在可視化大屏中,展示數據的重要性不言而喻,因此要注意中文、英文、數字字體的選擇以及注意事項,一切以數據展示更加明顯為前提;

          在不同屏幕中,可視化大屏的字號大小規范是有區別的,并且需要結合影響字號的五大因素:屏幕大小、界面內容、觀測距離、設備性能、主觀人為去制定字體規范;

          通過 FontCreator 軟件去對字體進行優化,掌握字體的刪減發布以及交付開發的方法;

          了解開發存儲字體的兩種形式,一種是本地化部署,一種是與代碼打包服務器云存儲,以及了解兩種方式的優缺點;

          了解可視化開發關于字體交接時的注意事項,可以通過自己的理解去解決工作中的關于字體的問題;

          推薦了常用的可視化大屏的字體:中文字體、英文字體;

          如果畫面內容較少時,可以適當提高字號,反之亦然,比例合適即可;

          可視化大屏設計字體規范不存在絕對字體規范。

          作者:生活因你而火熱

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

          大數據可視化界面設計之一:可視化大屏設計快速入門指南

          大數據可視化界面設計之九:超全面的數據可視化設計指南:設備篇

          大數據可視化界面設計之十:數據可視化必修課:表格篇














          網站設計之三:實例教學!如何將極簡風格的原則運用到網站設計中?

          博博

          @喪心病狂十六夜貓 :極簡風格能幫助用戶簡化操作,兼容性好,載入頁面快等等優點,不過雖然看起來簡單,我們需要考慮的東西可一點都不少。這一次,就讓我們一邊學習簡約風格的原則,一邊將它應用到實際網站制作中去吧。

          詳細從以下開始。


          什么是簡約風格的網站?


          扁平設計、英雄形象和漢堡包菜單等等許多這些現在流行的設計趨勢,都是于2000年開始逐漸受到極簡風格的影響才誕生的。

          「這里的英雄形象指的是:在網站首頁上使用的大尺寸圖片。在日本,作為視覺的關鍵,也被稱為主視覺。在Bootstrap中也有命名為「Hero unit」的組件而被大家廣泛使用著。」

          實例教學!如何將極簡風格的原則運用到網站設計中?

          現在為我們提供了許多服務的google,它的主頁也已經有15年以上沒有變動過了。

          谷歌一直被評為采用簡約風格的Web界面的先驅,自20世紀90年代所提供的測試版以來,一直都很重視界面的簡潔性。

          關于簡約風格的討論還在繼續,但也有一些很多設計師都認同的共同點。那么,就讓我們一起來詳細的看一看簡約風格究竟有著哪些特征吧。


          只有必要的元素


          簡約風格的哲學非常簡單,即“少即是多(英文:Less is More)”。在網頁設計中,只使用真正有必要的要素,就可以實現更多的事情。簡約風格的網頁設計策略,就是刪除用戶操作時不必要的內容,以實現接口界面的單純化。

          屏幕上的要素越少,所留下的要素就會變得更強。如果在屏幕上的設計要素只有一個,信息就能很準確的傳遞給用戶。

          實例教學!如何將極簡風格的原則運用到網站設計中?

          極簡風格是刪除所有讓用戶無法專注于內容的元素。但與此同時,為了防止刪除或者隱藏了對用戶來說真正必要的內容,而讓用戶的操作感到困難,你需要仔細地檢查。對內容的周圍加以設計,使用戶不會感到混亂,讓我們留下一些輔助元素(如導航菜單)吧。


          留白空間


          簡約風格的最常見的元素,就是什么設計元素都沒有。簡約風格最重要的一點就是負空間或留白空間,這些將有助于引導用戶的視線。在設計要素的周圍留有許多留白空間,就可以很好的將用戶的視線集中起來。

          實例教學!如何將極簡風格的原則運用到網站設計中?

          留白空間對簡約風格來說是最重要的元素。


          視覺特性


          在簡約風格中,每一個設計的細節都是非常重要的。接下來介紹一些在設計中可以靈活使用的要點。

          平整紋理(英:flat textures)

          在簡約風格的界面中,簡單的紋理和圖標是經常被使用的圖形元素。在界面中,不管是清晰高亮的效果、模糊陰暗的效果還是給UI 元素添加上光澤表現3D的效果都是沒有必要的。

          實例教學!如何將極簡風格的原則運用到網站設計中?

          色彩鮮艷的圖片

          圖片是簡約設計中最醒目的要素,可以渲染出作品的氛圍。然而,我們也需要謹記,必須要使用抓住了簡約風格特點的圖片。選擇了錯誤的圖像(如亂七八糟不能集中的圖像),它會抵消采用了簡約風格界面的好處。

          實例教學!如何將極簡風格的原則運用到網站設計中?

          △ 簡約風格中最搶眼的英雄圖像

          用最少的顏色

          在簡約風格中,無需添加設計元素和圖形,只使用顏色便能引起視覺上的關注,將視線集中到元素之上。因為使用的顏色數量必須很少,所以必須做出具有創意的視覺性層次感效果。

          實例教學!如何將極簡風格的原則運用到網站設計中?

          △ 用戶所能利用的有效情報很少,配色就會變得顯眼,對網站也會有著顯著的影響。

          印刷字體

          大膽的印刷體,側重于將瞬間描述所記載的詞匯和內容作為焦點,以達到更有趣味的視覺效果。當你使用引人注目的具有魅力的印刷體時,使用文字來傳遞情報是非常有效的。

          實例教學!如何將極簡風格的原則運用到網站設計中?

          想傳遞信息時,請使用具有魅力的印刷字體吧。

          對比度

          由于使用了比平時較少的設計元素,當你想創建一個具有視覺性層次感的畫面時是非常有創意的想法。在下面的案例中,白色的背景與黑色的寶石作為視覺性的要素被使用,實現了經典的簡約風格。

          實例教學!如何將極簡風格的原則運用到網站設計中?

          簡約設計中,多數情況下只使用一種顏色作為重點,那個顏色可以強調重要元素。


          簡約Web風格的實踐總結


          對于簡約風格,請不要以為看起來簡單,做起來就會很容易。使用的設計元素很少,界面也變得簡單,所以有必要給用戶提供在同一平面內舒適的體驗。

          一個屏幕,一個焦點

          遵從“一個頁面一個概念”的原則,以單一的視覺要素為中心傳達一個概念為吸引點,在各個頁面都用心設計吧。

          實例教學!如何將極簡風格的原則運用到網站設計中?

          將魅力展現在首屏

          充分配合留白空間的重要內容,然后隨著滾動不斷提高內容的密度吧。

          實例教學!如何將極簡風格的原則運用到網站設計中?

          簡單易懂的宣傳詞

          《The ELements of Style》作者Strunk先生與White先生,提倡“省略不必要的單詞(英: Omit needless words)”。將完成的內容再編輯,選擇傳遞信息所需的最低限度的單詞吧。

          實例教學!如何將極簡風格的原則運用到網站設計中?

          讓導航菜單變得簡單(但不是隱藏)

          簡單易懂的導航菜單一直是網頁設計中非常重要的要素。然而,這并不意味著將它隱藏起來。

          在使用漢堡菜單簡化界面之前,讓我們先確認為什么要使用它。漢堡菜單會讓菜單的各個項目變得很難找到,這是你所必須注意到的。在多數情況下總是顯示的導航菜單是有效的。讓我們比較一下下面的案例。

          實例教學!如何將極簡風格的原則運用到網站設計中?

          實例教學!如何將極簡風格的原則運用到網站設計中?

          △ 上面的案例是點擊才會顯示導航菜單,而下面的則是總是顯示導航菜單。

          嘗試使用動畫

          由于使用動畫效果的機會越來越多,尚未使用動畫效果的簡約風格的網站人氣恐怕會下降。但是,這些新的效果也需要遵守簡約風格的原則,謹慎小心的使用。

          實例教學!如何將極簡風格的原則運用到網站設計中?


          為著陸頁和投資網站保留簡約風格


          「這里的著陸頁指的是:在互聯網營銷中,引導頁就是當潛在用戶點擊廣告或者利用搜索引擎搜索后顯示給用戶的網頁。一般這個頁面會顯示和所點擊廣告或搜索結果鏈接相關的擴展內容,而且這個頁面應該是針對某個關鍵字(或短語)做過搜索引擎優化的?!?

          重視內容,所有的網站都可以使用,但不一定都是合適。簡約風格的目的非常簡單,正如下面的例子,他適合著陸頁(英:Landing Page)和投資網站(英:portfolio sites)這類內容相對較少的網站。

          實例教學!如何將極簡風格的原則運用到網站設計中?

          △ 設計師Brian Danaher的投資網站,對大多數設計師來說是一個典型的簡約風格的例子。

          越是復雜的網站想使用簡約風格的效果,就越是困難。內容豐富的網站,由于缺少設計要素恐怕將會給用戶帶來混亂。在這種情況下,創建具有簡約風格的著陸頁,可以幫助你的用戶瀏覽到他需要瀏覽的詳細內容。


          與簡約風格相關的工具


          Minimalist Color Palettes
          :一些簡約風格的配色方案,將幫助你脫離標準的黑白設計創造更多的組合。

          Color Contrast Checker:輸入前景色和背景色,計算機自動幫助你計算百分比,輕松的就能創建很棒的顏色組合。


          最后


          簡約風格的網站,通過刪除不必要的設計元素和與用戶目的無關的內容,將網頁的接口變得簡單。為了使這一類型的網站變得具有非凡的吸引力,精煉的設計與簡易的操作相組合是非常重要的。能更簡單地誘導用戶的網站,會成為非常強有力的交互工具。

          作者:程遠

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

          網站設計之一:怒馬!超實用的單頁網站設計指南(附大量資源)

          網站設計之二:旅游網站設計分析!教你10個小技巧

          網站設計之三:實例教學!如何將極簡風格的原則運用到網站設計中?

          網站設計之四:另辟蹊徑談創新!提升網站設計形式的幾種方法

          網站設計之五:經驗分享:移動網站設計應該避免的“七宗罪”

          網站設計之六:4000 字快速回顧20多年的網頁設計發展史!

          網站設計之七:騰訊出品!2021-2022設計趨勢報告:動態篇

          網站設計之八:為什么千萬別隨便學國外的極簡設計?

          網站設計之九:高手出品!2020~2021年UI界面設計趨勢

          網站設計之十:如何做好網頁頭部內容設計?來看 58 設計師的總結!






          手機及小程序界面設計之一:讓設計更有說服力的20條經典原則:菲茨定律

          博博

          簡介說明


          1. 理論表述

          任意一點移動到目標中心位置所需要的時間,與目標距離正相關,與目標大小負相關。

          讓設計更有說服力的20條經典原則:菲茨定律

          2. 研究背景

          1954 年,Paul Morris Fitts 根據信息類比提出一個假設,該假設能夠量化「移動到目標選擇任務」這個操作的難度「1」。雖然該假設還未涉及到人機交互中的具體參數,卻給了后來的交互研究人員極大的啟發。

          我們現在經常看到的 Shannon 公式(即上面那個公式)是由約克大學教授 Scott Mackenzie 在 1992 年提出的一個菲茨公式的變體「2」,該變體被廣泛地應用于需要指針操作的人機交互系統當中。作為交互設計和 UI 設計的理論基礎,它更簡潔明了地闡述了時間 T 和目標距離 D 以及目標大小 W 之間的函數關系:因為以 2 為底的指數函數是遞增函數,所以,T 與 D 正相關(D 越大 T 越大),而與 W 負相關(W 越大 T 越小)。


          設計案例


          人們做出一個移動指針的操作通常需要兩步:

          • 將指針快速移動至目標大致所在的區域;
          • 精細調節指針的位置以達到可點擊的區域。

          菲茨定律所包含的兩點內容:

          • 指針當前位置與目標間的距離 D 越長,所需時間越長;
          • 目標的寬度 W 越大,所需時間越短。

          讓設計更有說服力的20條經典原則:菲茨定律

          綜合兩者來看,菲茨定律中的 D 在第一步中起更為明顯的作用,而 W 則主要影響第二步。所以菲茨定律所帶給我們的啟示,主要也是從這兩方面入手。

          1. 需要連續操作的控件盡可能接近

          案例1:系統右鍵菜單,微信彈出菜單

          讓設計更有說服力的20條經典原則:菲茨定律

          最典型的例子就是菜單,無論是 PC/Mac 中的右鍵菜單還是微信聊天頁里面的加號鍵都遵循著這一原則。作為用戶,點擊這類按鈕之后一定會有后續的任務和操作,所以這些任務都被安排在了距離所點擊區域更近的菜單中。

          案例2:夸克和 Safari 的 url 輸入框位置比較

          讓設計更有說服力的20條經典原則:菲茨定律

          另外一個例子是瀏覽器的搜索欄輸入框,現在已經有一些瀏覽器(比如簡單搜索、夸克)會將輸入框以及一些其他更常用操作置于底部,這是因為我們正常握持手機時,大拇指離底部更近,所以需要進行點擊操作的話底部的輸入框操作起來更方便,也更快。

          2. 可點擊的按鈕盡可能大

          這一點在現今的 APP 中做得已經非常到位了。

          案例3:哈羅出行

          讓設計更有說服力的20條經典原則:菲茨定律

          作為哈羅單車租用操作的入口,頁面中的「開鎖」按鈕做得足夠大,用戶可以輕易快速地點擊到這個使用頻率最大的按鈕。登錄(也就是開始)按鈕也是一樣的道理。

          3. 邊角的利用

          還有一個比較特殊的就是對于邊角的利用,無論是在 Windows 還是在 MacOS 中,邊角總是有一些比較重要的操作,比如 Windows 的「開始菜單」(在左下角),MacOS 的 Dock 欄(在底部)以及頂部狀態欄,包括 Mac 特有的觸發角。

          案例4:MacOS 觸發角設置

          讓設計更有說服力的20條經典原則:菲茨定律

          為什么微軟和蘋果不約而同地選擇了在屏幕最邊角放置這些權重相當之高的組件或者操作呢?在硬件設備中邊角是一個極其特殊的存在,由于指針再怎么移動都不可能超越屏幕邊界,只能停留在邊界上,所以邊界對于用戶的操作來說是「無限可觸發」的,這有什么意義呢?這意味著對于隱性存在的目標來說,W 趨于無限大。

          讓設計更有說服力的20條經典原則:菲茨定律

          既然 W 趨于無限大,根據公式時間 T 就趨于常量 a。

          讓設計更有說服力的20條經典原則:菲茨定律

          結論就是無論指針距離目標物多遠,所需要花費的時間都已經達到了理論的最小值,輕松且高效。而在移動 APP 中同樣有邊角的應用,比如最近拿了 Google Play 設計大獎的 Drops。

          案例5:Drops

          讓設計更有說服力的20條經典原則:菲茨定律

          創新的交互將屏幕底邊充分的利用了起來,只要將單詞移到底部,就代表用戶已經記住這個單詞了。注意整個底部都是可以觸發的,而不僅僅是腦袋那個圓形區域。本來「移動」這個操作對于「按鈕」來說更加繁瑣,但是在 Drop 的應用場景下這樣的移動反而沒有覺得麻煩,滑起來相當帶勁。

          4. 菲茨定律的逆向應用

          菲茨定律給我們的啟示通常都是正向的,都是以縮短用戶的操作時間為主要目標,但也有一些場景需要反其道而行之。比如如果遇到需要用戶謹慎的操作時,可以逆向運用菲茨定律,增加操作的復雜度。

          案例6:iPhone 關機和微信刪除聊天窗

          讓設計更有說服力的20條經典原則:菲茨定律

          iPhone 的滑動關機延長了用戶關機操作的時間,以提醒用戶此操作為不可逆,需要謹慎操作。微信也是同理,甚至還縮小了刪除按鈕的大小,以達到警示的目的。

          另一個典型就是彈出窗口的關閉按鈕。

          案例7:Luckin Coffee 的彈出窗

          讓設計更有說服力的20條經典原則:菲茨定律

          彈出窗口里一般都包含了開發商的推廣、廣告、運營活動等等,所以開發商會希望用戶花盡量多的時間去注意到它們的內容,這時候雞賊的開發商會把關閉按鈕做得又小又遠(遠離視覺中心),讓用戶花更多的時間去尋找和點擊它們,效果拔群。


          注意事項


          注意點1:D 不能過分短

          過分短的間距不僅無法提升操作效率,反而會造成視覺壓力從而降低用戶體驗。

          反面案例1:唯物魔改版

          讓設計更有說服力的20條經典原則:菲茨定律

          按照菲茨定律魔改的唯物登錄頁面,理應操作得更迅捷方便,然而實際上除了視覺上造成額外的擁擠感、破壞畫面負空間構成之外,我嘗試著點了一下覺得十分逼仄擠手,所以過度縮減按鈕間的間距并不合理。

          注意點2:W 不能過分大

          大尺寸的點擊目標確實能夠有效地降低用戶操作成本,但是過分大的目標也會很直接地破壞畫面的平衡,浪費屏幕空間。并且按鈕的可用性與其尺寸并不是呈線性關系,當按鈕已經足夠大時,再增大就沒有什么體驗上的提升了,如下圖所示。

          讓設計更有說服力的20條經典原則:菲茨定律

          反面案例2:KEEP 魔改版

          讓設計更有說服力的20條經典原則:菲茨定律

          與唯物類似,當按鈕大到一定程度之后,會對畫面造成恐怖的破壞效果。


          總結


          • 盡可能縮短連續操作所相關按鈕的間距,盡可能做大需要頻繁點擊的按鈕(但都不要太過分)。
          • 注意屏幕四邊和四角在交互中的價值。
          • 逆向運用菲茨定律以延長用戶在當前頁面的時間,或對用戶的下一步操作發出警示。

          參考資料

          1. Fitts, Paul M. The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 1954, 47 (6): 381–391.
          2. Scott MacKenzie. Fitts’ Law as a Research and Design Tool in Human-Computer Interaction. Human-Computer Interaction, 1992, Volume (7): 91-139.
          3. IDF INSTRUCTOR (2016). Fitts’s Law: The Importance of Size and Distance in UI Design. 
          4. Mr湯進er. (2017). 產品設計法則:菲茨定律(費茨法則)/ Fitts’ Law.
          5. bozhongtao (2012). 菲茨定律與互聯網設計 Fitts’Law.


          作者:超人的電話亭

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

          手機及小程序界面設計之一:讓設計更有說服力的20條經典原則:菲茨定律

          手機及小程序界面設計之六:讓設計更有說服力的20條經典原則:菲茨定律

          手機及小程序界面設計之八:如何適配iPhone X?來看滴滴出行的實戰案例復盤!












          手機及小程序界面設計之二:三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          博博


          前言


          距離iPhone 12系列發售已經有段時間。

          之所以沒第一時間撰文,是因為 iPhone 12 mini 和 iPhone 12 Pro Max 要在11月13日才正式發售。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          而在此之前,即便是Apple線下店也沒有樣機。

          保險起見,我等接觸到 Mini 和 Max 真機后,開始著手撰文。

          一周前完成了文字部分,本周終于完成了幾十張配圖,這才和大家見面。

          為了方便新同學更好的了解本文內容,我會簡單提及一些關于適配的必要信息。

          并附上往期內容的鏈接,方便延展翻閱。

          本文約3200字,分以下六個部分:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          基本參數

          在網絡上搜索手機界面適配的相關內容。常會看到文中提及以下幾個參數:比如屏幕分辨率(物理分辨率)、屏幕尺寸、PPI數值…

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          其實,在處理常見手機界面適配時,設計師只要關注以下3個基本參數:渲染像素(Pixel)、邏輯像素(Point)、 倍率(Scale)

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          渲染像素(Pixel)可以理解為是手機截屏時所得到的圖片尺寸,單位是px;

          邏輯像素(Point)可以理解為是程序員在用代碼繪制頁面時所用的尺寸,也被叫做“1倍圖尺寸”。比如Sketch中對應的機型尺寸

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          對應的就是手機的邏輯像素尺寸。

          倍率(Scale)因為邏輯像素和渲染像素存在著一定的比例關系,這種比例通常被稱為倍率,比如切圖后綴的@2x、@3x對應的就是倍率的數值。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          值得一提的是,倍率不一定是整數,比如三星GALAXY J2(540×960),倍率是@1.5x;

          華為M3 Life 8.0”(1920×1200)的倍率則是@2.25x


          兩種適配


          適配方式主要有兩種:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          1. 倍率適配

          主要應用在邏輯像素相同,但倍率不同的設備。

          比如iPhone 11適配到 iPhone 11 Pro Max

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          兩個適配的邏輯像素都是 414 x 896pt,但倍率不同,前者是@2x、后者是@3x。

          2. 邏輯像素適配

          這種適配方式應用在兩個倍率相同,但邏輯像素不同的設備,

          比如iPhone 11 到iPhone 8:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          兩個設備的倍率都是@2x,邏輯像素則分別是:414 x 896pt 和 375 x 667pt。

          如果兩個設備的倍率和邏輯像素都不相同,比如iPhone 8 到 iPhone 11 Pro Max

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          那通常會先進行邏輯像素適配,再進行倍率適配。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          由于倍率適配相對簡單,只需要考慮分割線和切圖這兩個因素。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          因此,設計師通常說的手機適配、尺寸適配常指邏輯像素適配。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          所以搞清楚iPhone有哪幾種邏輯像素,就成了iPhone適配和驗收的關鍵。


          iPhone 12對設計的影響


          在今年10月份發布的iPhone 12系列共有四部機型。

          在談新設備前,我們先簡單回顧截止iPhone 11系列時,iPhone的幾款主流機型及其對應的參數:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          通過圖表可知,在iPhone 12發布前,市面上的iPhone共有6種不同的分辨率需要完成適配。

          那么iPhone 12又帶來哪些變化呢?

          從官方給出的屏幕數據可知,四款設備的物理像素如下:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          由圖可知,今年iPhone共新增了3種全新的屏幕尺寸。(其中iPhone 12和iPhone 12 Pro的物理分辨率相同,故合并看待)

          但在設計層面,iPhone 12系列四款手機,只為設計師增加了1170×2532、1284×2778 兩種新的設計尺寸。

          畫重點:目前有一些文章,錯把iPhone 12 mini的屏幕參數1080×2340當做最終的繪圖尺寸,認為12 mini的邏輯像素為360x780pt 。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          事實上iPhone 12 mini采用了iPhone X一樣的渲染像素,即1125 x 2436px,對應的邏輯像素是375x812pt。

          為了解釋這個問題,得從大家比較熟悉的iPhone Plus系列手機說起。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          在前文提到,手機界面適配時,設計師只要關注:渲染像素(Pixel)、邏輯像素(Point) 以及倍率(Scale)這三個基本參數。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          而其中的渲染像素通常會和屏幕的物理像素保持一致,比如常見iPhone 8、iPhone XS、iPhone 11 Pro都是如此。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          這也導致大家很容易把物理像素和渲染像素混為一談。

          但既然說了是“通常會保持一致”,就總會有例外。

          比如iPhone Plus系列,官方給出的屏幕參數(物理像素)是1080×1920,但渲染像素卻是1242×2208。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          所以設計師在針對Plus系列做圖的時候,就得按照1242×2208進行輸出。

          而新款iPhone 12 mini的情況和Plus系列一樣:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          官方給出的物理像素尺寸是1080×2340 ,但拿到設備真機后,通過測量可知12 mini采用的渲染像素是1125×2436,這和iPhone X的渲染像素保持一致。

          在明確這一點后,我們再看下iPhone 12系列設備的參數:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          如果我們只看邏輯像素,加上iPhone 12系列,目前iPhone 共有7種尺寸。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          這些尺寸都需要設計師留心,并完成相關機型的驗收走查。

          不過,到這里還沒完??紤]到iPhone存在“標準”和“放大”兩種模式的視圖。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          還需要將放大模式的尺寸考慮在內。

          目前各個設備的放大模式對應的適配三要素分別如下:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          其中320x693pt是全新的尺寸,出現在12 mini、12、12 Pro這三款設備中。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          由此,在把放大模式納入適配考量范圍后,iPhone的邏輯像素共統計出8種尺寸。

          如果將其中最小尺寸和最大尺寸比較寬高的話,寬度相差了108pt、高度相差了358pt

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          對于那些橫滑需要外露一部分的頁面,需要重新設計尺寸或調整局部的適配方案。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          這對于一些單屏顯示的頁面而言,也是件麻煩事。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          iPhone市場占比變化


          先思考一個問題,在下面幾個尺寸的iPhone中,你覺得哪一種尺寸的iPhone在市面上占比最高?

          在 iPhone 12發布之前,在iPhone這幾種屏幕尺寸中,你覺得哪一種iPhone的市場占有率最大?

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          我相信絕大多數設計師,都會下意識覺得750×1334這個尺寸的機型占比最多。畢竟在過去很多年里,大家都是用這個尺寸在做圖。

          那實際情況究竟如何呢?

          我們先看下阿里友盟今年05月01日的數據:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          PS:數據公司按設備的物理分辨率進行統計,而非渲染像素。所以這里的1920×1080對應的是Plus系列手機。

          今年五月,國內iPhone占比最高的機型是Plus系列。而設計師鐘愛的750×1334 和 1125×2436分別排在第二和第三。

          其中排在第三的1125×2436(對應@2x的設計尺寸是750×1624)和前兩者的占比仍有較大的差距。

          那是不是隨著時間的推移,1125×2436的機型占比會逐漸增大,并逐漸占據第一呢?

          如果你也有同樣的想法,恐怕又得失望了。

          翻看5月份的iPhone增量數據,會發現一個有意思的情況:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          在增量中,828×1792(對應iPhone 11)增速以51.9%遙遙領先第二名的1125×2436。

          下面,看下最新的11月統計的iPhone存量數據:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          828×1792已經從占比第四名上升到了第三名,

          再看11月份的增量數據:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          828×1792的增速不減反增,從5月份的51.9%增加到了最近的63.8%

          如果不考慮最新的iPhone 12系列,828×1792有望接替Plus系列,成為市場占比最大的iPhone尺寸。

          在828×1792的設備飛速增長的同時,1125×2436這個尺寸的設備增速卻在不斷下降。已經從5月份的27.8%降到了現在的10.2%

          iPhone 設計尺寸演變


          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          過去設計師常用的設計師尺寸是750×1334,但隨著iPhone進入全面屏時代,如果再把750×1334作為設計的基準尺寸顯然已經不合時宜。

          而目前常用的750×1624尺寸對應的機型(對應1125×2436在@2x下的尺寸)無論在存量市場中的占比,還是增量市場中的占比都少的可憐。

          而新發售的iPhone 12系列中,也只有12 mini采用了1125×2436作為渲染像素的尺寸。而其余三款,采用全新的渲染像素和邏輯像素。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          很難想象1125×2436這個尺寸的設備,還能和過去的750×1334尺寸一樣,成為iPhone主流的分辨率尺寸……

          設計基準尺寸的選擇,除了要看設備的占有率,還要兼顧適配的成本。比如,當有大中小三種尺寸的設備需要設計時,優選中間尺寸作為基準尺寸。

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          以中間尺寸為基準,無論是適配到小尺寸、還是適配到大尺寸,界面的調整幅度都是最小的,偏差不會太大。

          反之,如果選擇小或大作為基準,或許頁面適配到中間尺寸時感覺還行,但適配到另一側相對極端的尺寸時,則容易出問題。


          新,設計基準


          界面設計師所用的繪圖基準尺寸并非一成不變。回看過去:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          設計師用的基準尺寸已經從最初的640×960、變成640×1136、再到750×1334,以及現在的750×1624,已經變化了4次。設計師幾乎每隔兩年就會隨著新iPhone的發布調整一次設計尺寸。如今隨著iPhone 12的發布,加上750×1624對應機型在市場中占比的低迷,我們可以重新思考在iPhone眾多尺寸中,哪一款更適合作為設計的基準尺寸。

          這里先不考慮設計師對尺寸的慣性依賴,只思考適配兼容性和市場占有率這兩方面。適配兼容性,按照“大中小”優選中間尺寸這一原則。我們可以很容易的在目前8種iPhone的尺寸(指邏輯像素)中選出位于中間的尺寸:

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          分別是 375x812pt 以及390x844pt,前者對應1125x2436px ,后者則對應1170x2532px,如果進一步將其轉換成大家熟悉的@2x尺寸,則分別對應:750×1624和780×1688

          三分鐘搞懂,iPhone 12發布后的設計尺寸調整

          在市場占有率層面,隨著Apple逐漸停售之前的設備,新款iPhone的分辨率占領市場只是時間問題。而在新設備中,只有iPhone 12 mini這一款設備采用大家熟悉的1125x2436px(375x812pt,對應@2x下尺寸750x1624px)。如果按照此前的經驗推算,iPhone 12(1170×2532)接替iPhone 11(828×1792)成為最熱賣且占比最高的設備只是時間問題。

          截止iPhone 12發布為止,顯然 390x844pt (對應@2x下尺寸780x1688px)更適合作為今后的設計基準尺寸。

          作者:海邊來的設計師

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

          手機及小程序界面設計之一:讓設計更有說服力的20條經典原則:菲茨定律

          手機及小程序界面設計之六:讓設計更有說服力的20條經典原則:菲茨定律

          手機及小程序界面設計之八:如何適配iPhone X?來看滴滴出行的實戰案例復盤!












          手機及小程序界面設計之三:從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          博博

          Dribbble 平臺對于互聯網 UI 界面設計有著舉足輕重的定位,對 Dribbble 設計的研究會讓我們看清設計的方向。

          為了保證這篇文章的質量,Dribbble 年度的每個作品都超過 550 贊。在此原則下挑選了 828 件作品,作品總的大小為 2.2G。


          總結


          從挑選出的 828 件作品中,排名前十的作品中 9 件為 B 端設計,另一件作品也是 B 端產品 C 端化的產物。其中:

          • B 端界面設計占比 476/828,57.4%;
          • C 端界面設計占比 180/828,21.7%;
          • 視頻動效作品占比 223/828,26.9%;

          明眼人都能看出其中的比重關系,B 端設計再次大火,為什么是再次?因為 B 端設計之前火過,只不過沒有趕上一個好的時代,在 C 端設計風光的十年里而忽略了其存在。隨著 C 端市場飽和與數字化的浪潮下,實體經濟、ToB、ToG 的產業再次迎來了它的曙光。視頻動效的作品占比也已超過 C 端界面設計,相信今年視頻動效作品占比還會再次提升。


          Dribbble 年度最佳作品


          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          Dribbble 年度最佳作品來自大家最熟悉的 UI8 團隊中的 Tran Mau Tri Tam ?,作者來自越南西貢,最佳作品截止目前355K瀏覽量,2933個贊。

          為什么看似平平無奇的作品卻能獲得 Dribbble 年度最佳作品呢?既不是 C 端也不是純 B 端的作品,更像一個網頁與平面的結合體。如果去掉搜索圖標、分類圖標和按鈕,你可以理解它就是一個平面作品,一個字體加幾何形體構建的作品,為了豐富畫面的層次,讓畫面更加的活潑采用了多彩加幾何色塊,讓標題閱讀有停頓感和呼吸感。faster 底部的橫線讓它從標題文字中脫穎而出,這種使用線條突出重要信息的設計也是今年Dribbble 設計流行趨勢之一。

          MetroUI 是 Windows8 的界面設計語言,在 2010 年至 2013 年間曾經風靡一時,那也是移動互聯網的發展元年,現在國家推行實體經濟、數字化帶動 To B、To G 的發展元年,通過幾何色塊(MetroUI)實現 B 端產品與 C 端設計風格的傳承與銜接,你會發現歷史總是驚人的相似。最后背景結合今年最流行的微軟風,毛玻璃的多彩高斯模糊漸變風,年度作品當之無愧。

          最后來看下按鈕的設計,正常的按鈕要么文字加色塊,要么左圖標加右文字,它設計成左文本加右圖標,更加注重信息的可讀性和易讀性,也體現 B 端設計重功能和交互體驗,視覺點到為止的設計理念。

          下面我們來欣賞年度最佳作品里面的流行趨勢吧。

          1. 易讀性(停頓感)

          字體三原則:可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設計文章,肯定設計文章的內容可讀性更好。易識性是用在字體設計上,不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設計師都息息相關,因為我們都需要編排文本。當我們小時候寫作文時,不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感,更加適合用戶閱讀。

          通過給用戶制作停頓感來增加用戶的易讀性??梢栽谙嚓P聯文本后面添加圖片、表情、圖標來更好的理解文本內容,豐富文本內涵。比如情侶間表達愛意時會輸入文本,“我愛你”、“我 Love 你”、“我 ai 你”、“我??你”,哪個更加會有情感共鳴呢?不言而喻,相信你心中已經有答案了。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          2. 曲線

          在標題文字上添加曲線來突出重要文案是 2021 Dribbble 最流行的趨勢之一,第一個設計目的就是突顯文字,其次就是想表現鉛筆真實書寫的感覺。之前很多帶有簽名的設計中,簽字的文本都是手寫體的感覺,手寫體對比電腦的機械字體會帶有一種人文氣息,也會讓兩者之間產生一種對比、矛盾。

          除了突顯文本外,曲線還有視覺引導的作用。通過視覺引導讓用戶按照設計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試,通過真實用戶眼睛瀏覽界面顯示對應的熱點圖。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          3. 多彩高斯漸變風

          多彩高斯漸變風是從色彩的角度來傳達和豐富畫面的,多彩高斯漸變風其實是從制造矛盾到平衡矛盾的過程,多彩漸變多為冷暖對比來制造畫面的沖突,需要控制冷暖畫面的大小來實現平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。

          多彩高斯漸變還可以結合輕擬物、幾何圖形、三維等新的組合方式去創新,給用戶呈現一種更加新穎的視覺表現形式。最后我們還是要回歸到內容上,為了更好的傳達信息需要去設計與內容相匹配的視覺風格。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢


          B 端界面設計


          1. 側邊欄 Sidebar

          B 端設計的火爆帶動了 B 端相關模塊設計,更多的人也愿意嘗試 B 端相關模塊設計,側邊欄作為產品架構中重要的導航系統,好的側邊欄設計能為用戶帶來更好的效率。主流側邊欄都做了展開、收起、拖拽等交互效果,也是受限于 PC 屏幕為展示更多數據而騰空間。側邊欄主要承擔的功能有導航、分類、自定義篩選、共享、新增等。Dribbble 的 B 端產品設計已經不再是假大空概念設計,而是一套實用美觀可落地的設計。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          2. 儀表盤設計

          儀表盤設計是一個很好的隱喻,想象一下開摩托車或汽車主駕駛前面的屏幕,汽車儀表有燃油表、車速表、里程表、水溫表、轉速表、故障指示燈等。B 端類產品后臺界面的儀表盤設計也需要展示一些重要的數據和各種狀態,大體分為側標欄、導航欄、待辦任務、個人信息、報表數據、消息中心、快捷入口等。當然最重要的就是報表數據,團隊收益、任務進度、轉化比例、新增、存量、團隊工作時長等都是老板或領導關心的內容。每個公司業務不同、每個人員權限不同,自定義的儀表盤也各有差異。重要的是突顯數據和業務狀態,需要分層級系統性去思考和設計。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          3. 流程設計

          復雜的事情簡單化,簡單的事情標準化,標準的事情流程化,流程的事情自動化。流程設計是每一個企業核心功能和業務,可自定義的管理流程系統搭建也是 B 端產品設計的難點,需要對業務高度抽象,讓每一個業務人員可自定義的流程才是好的流程設計。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          4. B 端 C 化

          B 端 C 化是 B 端產品設計的視覺表現力慢慢往 C 端產品設計的視覺靠齊,國內 B 端產品界面設計視覺水平還有很大的提高空間。除了視覺上的提升外,由于業務的發展,B 端產品也開始移動化、智能化,國內主流還是通過小程序、H5 來現實 B 端產品 C 端化。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          5. 輕代碼化

          輕代碼化是一種低代碼賦能無代碼的方式,彌補無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時,又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發即可如搭積木般快速、靈活地創造屬于你的個性化管理系統,輕松實現多元業務場景的數字化管理。

          輕代碼化將功能進行打包,升級成全局可以用的配置,技術人員配置好后,業務人員在應用編輯時直接選擇使用模版,綁定對應的變量即可使用。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢


          界面設計技巧


          1. 人文氣息

          為什么人加色塊的組合方式能流行起來?還是 B 端行業流行帶動的。B 端講的更多的是企業對企業。企業對企業除了講行業解決方案外,還需要傳達公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現公司的企業文化。對于一家全球化的公司不同膚色的人物組合在一起,這種人文氣息和價值觀已經就不言而喻了。

          當然企業也需要進行營銷,抓人眼球。幾千年來的遺傳證明了,人的大腦對食物、性、動的東西、人臉和眼睛、危險的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。

          這種風格更適合大公司,國內的一些手機廠商 OPPO、VIVO 等也會通過手機+背景+人物來體現科技與人文的結合,而對于中小型公司產品差異化和行業解決方案展現應該還是重中之重。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          2. 毛玻璃效果

          毛玻璃效果加大了模糊程度,透明效果更加扁平,很好的順應當下 UI 扁平化的設計趨勢。蘋果 Mac OS Big Sur 系統的圖標、界面中運用了大量毛玻璃和半透明元素,界面更扁平。至于 C4D 三維彩色玻璃的視頻教程可以在 B 站搜索“透光藝術-C4D 創建彩色玻璃的 4 個技法”,完全能滿足 UI 設計師。當然還有一個好消息就是 Mac 用戶可以享有 OC 一年免費的使用權,具體安裝購買方法上某寶就可以輕松搞定,真香。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          3. 輕擬物

          輕擬物這幾年一直流行,在 UI 設計中趨于穩定的位置。從寫實到扁平再到輕擬物,其實是設計師們一路不斷探索的結果。本質就是光影對形體產生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光(環境光)五個部分的處理。寫實三維的圖標等設計更適用于簡潔的畫面中,扁平等設計更適用于復雜一點的界面中,比如 B 端產品界面中的功能圖標。輕擬物可使用的范圍更廣,效果更佳。Sketch、Figma 軟件對于漸變、高光、投影、高斯模糊處理已經非常簡單且出彩。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          4. 簡潔設計

          簡潔設計遵從了密斯·凡德羅的“少即是多”的設計原則,在 B 端產品界面中更加需要簡潔設計,我們最熟悉的 Sketch 軟件界面已經是相當的簡潔了?;氐浆F實當需求功能不斷增加,產品界面的編排如何取舍,如何保證界面的簡潔是設計師需要深度思考的問題?如何與上級溝通?該功能是否可做可不做?是否需要埋點用數據說話?如果只是一味競品有我們就需要有,功能不斷累加只會讓界面越來越重。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          5. 幾何圖形

          幾何圖形和幾何插畫有異曲同工之妙,幾何圖形多為產品界面和宣傳內容的抽象,產品界面的幾何圖形多為占位符形式,加上色彩和幾何色塊讓其成為一個整體。B 端產品視覺設計 C 端化的進程中,幾何圖形、幾何色彩不失為最好的突破口,相信今年Dribbble B 端產品的視覺設計一定會更上一個臺階。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          幾何圖形另一個場景化的地方就是品牌,作為一名 UI 設計師一定會經歷從圖標到幾何圖形到品牌設計的過程,品牌設計的技巧基本還是以幾何圖形為主,至于品牌的內涵需要更深層次的解讀。掌握主流品牌設計的技巧對產品定位、品牌宣傳打下扎實的基礎。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          6. 暗黑設計

          暗黑模式的設計是解決在微弱環境下內容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設備時長增大,如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞,提高在夜間使用的可讀性。

          在設計暗黑主題時,不能為了突顯視覺上的逼格,而去使用高飽和度鮮艷的色彩來突顯界面的品質感。而應該把舒適度、可讀性作為設計的衡量指標。Material Design 給出了暗黑主題的設計準則,即正文和背景之間的對比度應至少為 15.8:1。按照此標準設計,可讀性都還不錯。這里介紹一個插件“Stark”(Figma、Sketch、XD、Chrome 插件)用來測試界面的對比度。


          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          7. 模塊化(組件化)

          為什么叫模塊化,而不叫組件化,組件化更多的利用原子系統從原子、分子、組織、模版、頁面來快速的搭建界面,但在 B 端產品設計中基礎組件和業務組件的搭建是以提高工作效率為前提,是否有從 0 到 1 搭建 B 端產品組件的經歷是設計師一生中最寶貴的經驗之一,它能提高設計師的系統化思維、邏輯思維和抽象思維能力。

          產品模塊化設計就是將產品分成幾個部分,也就是幾個模塊,每一部分都是具有獨立功能,具有一致的連接接口和一致的輸入、輸出接口的單元,相同種類的模塊在產品族中可以重用和互換,相關模塊的排列組合就可以形成最終的產品。通過模塊的組合配置,就可以創建不同需求的產品,滿足客戶的定制需求 。


          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          8. 插畫

          插畫作為設計的一大品類,不同的插畫師都有自己擅長的風格,本質是都有自己的個性,但是在產品設計中更多是需要共情、共性來講故事,表達產品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯網產品設計類的插畫風格。設計的本質是舊元素的重新組合,插畫不會過時,而是需要結合當下和產品找到最匹配的設計風格。

          9. 幾何插畫

          幾何插畫算是插畫簡化的一種表現形式,人和物的形態不再寫實,而是抽象成幾何圖形拼湊的感覺,同時保留人物形態的神韻。加上幾何色塊與人物交互形態的表現,傳達出簡潔、科技的現代感。難點還是在人物形態的表現上,平時多練習練習速寫還是很有必要的。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          10. 線面插畫

          線面插畫最近一兩年非常流行,準確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成,用塊面表現人物形態時某些結構會表現不出來,這時候用線條簡單勾勒后,結構就會清晰明了。其次當線面插畫運用在界面上時,可以打破界面純文字或組件化的機械和沉悶感。線面插畫的風格提升畫面熱鬧感的同時,還能保持界面的干凈整潔。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢


          動效


          1. 微交互

          界面微交互動效會讓用戶的體驗更加精致到位。想要打造優秀的產品設計,微交互和動效設計是繞不開的,UI 界面設計通過微交互反饋告知用戶當前正在發生的事情,所處的狀態。細微的動效更能調動用戶情緒,取悅用戶。C 端產品微交互和動效已經很成熟了,一部分功勞來自 iOS 系統原生自帶的效果。B 端產品的微交互和動效更多還是在學習海外產品,還需要給前端工程師灌輸微交互和動效的設計價值,共同打造產品體驗細節。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          2. Mg 動畫

          Mg 動畫需要很好的節奏感、韻律,每一個場景動畫都需要其中的元素進行連接變化,讓轉場動畫更加自然,MG 人物動畫通過點線面的動效變化讓畫面更加有趣、自然,通過粒子效果讓特定場景無限循環會讓人更加印象深刻。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢


          三維


          1. 三維圖標

          MacOS Big Sur 系統圖標的更新帶動了三維圖標的流行,三維圖標的應該場景還是需要有較大留白空間的界面,因為三維圖標太小后就看不到更多細節。三維圖標感覺又回到了擬物化和扁平化哪個更好的問題上?設計師應該保持開放多元的視角。設計本身也在不斷的演化融合,存在即合理。合適最重要,它們都會有適合自己的場景和設計價值。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          2. 輕三維

          為什么輕三維在界面設計中占有一席之位?一個是設計師不斷追求差異化的產物。另一個是更好的表現內容,并與用戶產生共鳴。輕三維的基礎模型都是來自手機界面中的各種元素,比如組件、開關、按鈕、占位符、圖表、幾何圖形、圖標、進度條等,這些都是用戶日常使用系統軟件常見的元素,通過簡單的幾何形體建?!驘艄狻硬馁|—渲染—PS調色。難度系數不大但效果很出彩。第一個出彩點是模型帶有厚度的倒角,結合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點就是材質自由添加,特別是當下流行的毛玻璃效果,玻璃材質渲染效果更佳。第三個出彩點就是可以加局部燈光,局部的漸變色或環境光更加出彩。


          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          3. P4D(PS+C4D)

          P4D 是 PS 加 C4D 的設計表現技法,也是視覺設計的最后一個環節,通過 PS 對 C4D 的渲染圖片進行調色,利用 PS 的調色技巧可以很好的解決 C4D 打燈光的瑕疵,還可以利用 PS 強大的合成功能,將渲染圖片與圖片素材進行合成,來表現畫面的視覺度,當然三維軟件比較難實現的水、粒子、煙花等效果,也可以通過 PS 的后期合成來實現,這也是 P4D 的強大之處。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          4. 卡通 IP

          卡通 IP 設計最近三四年技術的迭代已經慢慢的走上成熟,卡通 IP 也從傳統的純 PS 手繪技法,轉到 C4D 建模—角色綁定—MD衣服制作—OC渲染—PS(靜態)/AE(動態)調色。

          卡通 IP 火的本質更適合做營銷,相比于品牌或 Slogan,卡通 IP 具有親和力和畫面感。隨著各種手辦行業大熱,受互聯網大廠影響下,卡通 IP 已經是互聯網 B 輪以上公司的標配了。如果團隊中沒有這樣能力的人,也可以通過繪制好二維,一套三維可以選擇外包完成。

          對于 UI 設計師來說學習是有成本的,暫時并不是必備技能,如果喜歡完全可以學習,從設計差異化的角度來看三維視覺確實有一定的競爭力。


          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          5. 三維動畫

          C4D 三維場景動畫通過構建實物和場景模擬生活中的現實場景,會讓用戶體驗真實感,三維軟件制作動效的最大優勢是通過動力學和表達式來模擬真實感,未來在 AR/VR 領域會有更好的發展。相對于界面動效學習成本難度也相對較大。在三維動畫中 C4D 軟件對于域、動力學還是有一定的優勢。

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢

          從 Dribbble 高贊的 828 個作品中,總結出 2022 設計趨勢


          總結


          上一次寫 Dribbble 流行趨勢還是兩年前了,通過兩年的沉淀對趨勢流行有了更深的認知。十年的互聯網行業風風火火,隨著最近的互聯網裁員潮大家也慢慢的進入到反思層,客觀的看待和理解這個真實的世界,曾經的流行趨勢也需要慢慢的沉淀下來。

          存在即合理,趨勢流行稍縱即逝,注定是不長久的,只有大浪淘沙歷史遺留下來的風格才能更長久。但我們也不能不去關注,因為哪有什么所謂的創新,只不過是舊元素的重新組合,并符合當下這個時代人的審美需求。香奈兒的“時尚易逝,風格永存”大概就是這個意思吧。

          6000 多字的設計流行趨勢,希望能幫助設計師度過互聯網裁員的寒春。最后希望以后每年堅持輸出設計流行趨勢。為設計行業奉獻微薄之力。

          作者:水手

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

          手機及小程序界面設計之一:讓設計更有說服力的20條經典原則:菲茨定律

          手機及小程序界面設計之六:讓設計更有說服力的20條經典原則:菲茨定律

          手機及小程序界面設計之八:如何適配iPhone X?來看滴滴出行的實戰案例復盤!








          Cs界面設計之一:做交互選B端還是C端?來看這篇親歷分析!

          博博

          前些日子,筆者在知乎上被邀回答該問題,忽然想起了自己在面試設計師的時候,會問他們:“B 端和 C 端的設計有哪些區別?”由此可以發現,B 端和 C 端的比較,從來就是一個熱議的話題,不曾停歇,未來也不會停歇。今天,筆者就“做交互選 B 端還是 C 端”,談談自己的看法。


          交互設計是什么


          百度百科定義:交互設計(英文 Interaction Design,縮寫 IXD),是定義、設計人造系統的行為的設計領域,它定義了兩個或多個互動的個體之間交流的內容和結構,使之互相配合,共同達成某種目的。交互設計努力去創造和建立的是人與產品及服務之間有意義的關系,以“在充滿社會復雜性的物質世界中嵌入信息技術”為中心。交互系統設計的目標可以從“可用性”和“用戶體驗”兩個層面上進行分析,關注以人為本的用戶需求 。

          國際交互設計協會(IXDA)定義:交互設計師以創造有用且實用的產品及服務為宗旨。以用戶為中心作為設計的基本原理,交互設計的實際操作必須建立在對實際用戶的了解之上:包括他們的目標、任務、體驗、需求等等。以用戶為中心的角度出發,同時努力平衡用戶需求、商業發展目標和科技發展水平之間的關系,交互設計師為復雜的設計挑戰提供解決方法,同時定義和發展新的交互產品和服務。

          由上可見,交互設計的關鍵條目為:創造和建立人與產品及服務之間有意義的關系,創造有用且實用的產品及服務,以用戶的目標、任務、體驗、需求為基礎,平衡用戶需求、商業發展目標和科技發展水平之間的關系。

          由于 B 端和 C 端,交互設計核心是設計基于 PC、移動端的用戶界面,解決人機交互的問題,因此,可以說,交互設計是設計師在了解產品戰略,目標用戶目的、任務、體驗、需求,及了解設備和技術相關信息的基礎上,創造有用且實用的產品,若有可能,定義與發展新的交互模式。

          據上,筆者回憶平日的交互設計工作,在拿到需求后,主要分為如下:

          • 了解產品目標、業務流程,分辨真偽需求,運用 KANO 模型給需求排序,便于進行界面呈現;
          • 了解用戶需求,考慮如何設計可以符合用戶心智模型;
          • 了解技術邊界,在技術可行性范圍內,進行體驗創新與突破;
          • 了解項目周期與商業需求,在該目標下,給出合適的交互方案。

          交互設計是串聯產品戰略、用戶體驗、技術可行性的關鍵節點。它的核心任務是挖掘符合用戶需求、商業發展目標和科技發展水平的用戶體驗。


          B 端與 C 端產品設計上的共同點與差異點


          在分析 B 端與 C 端產品設計上的共同點與差異點前,我們有必要先了解下什么是 B 端,什么是 C 端。B 端產品是為企業提供服務、解決企業痛點的產品,例如財務系統、項目管理系統,B 端產品的決策者是老板,使用者是員工。C 端產品是解決用戶在生活中的需求和痛點的產品,例如餓了么(外賣)、馬蜂窩(旅游)、淘寶(網購),C 端產品的決策者和使用者都是用戶自身。

          1. 共同點:

          對于 B 端與 C 端產品來說,其整體設計與研發鏈路是一致的。以用戶體驗五要素模型來說,都需要經過戰略層、范圍層、結構層、框架層、表現層(由抽象到具象,由底層到頂層)。交互設計師涉及到的工作范圍在范圍層、結構層和框架層,核心的工作范圍在結構層和框架層。

          2. 差異點:

          B 端和 C 端由于業務不同、服務的目標用戶群體不同,在產品設計的思維上會有差異。

          B 端注重決策者思維,C 端注重純用戶思維

          對于 B 端產品來說,其付費用戶是企業的決策者,因此 B 端產品在設計上不僅要考慮如何讓用戶(即企業員工)用的滿意,還要考慮決策者的付費思維。C 端則不同,C 端的使用者與決策者身份是同一人,皆為蕓蕓眾生,因此 C 端產品設計上主要考慮用戶的感受。C 端產品同質化嚴重,且用戶的替換成本很低,C 端產品更需要使用各種吸引用戶的方法來留住用戶。

          B 端注重效率,C 端注重粘性

          在產品設計初衷上,B 端希望用戶通過使用產品,能快速完成任務,而不是在產品上花費過長的時間。但對于 C 端產品來說,C 端很希望用戶能經常打開它們的產品,在產品上多花費時間,因此 C 端的會有用戶活躍度的指標,而 B 端一般沒有。

          B 端注重穩定,C 端注重多樣性

          在用戶體驗上,B 端不會經常出奇招,而是追求穩為主,通常具有行業性質的軟件會形成一定的行業特性。當然這也給 B 端交互設計師帶去了一定的困擾,交互的發揮余地不大,交互設計師的價值體驗不出來。C 端在用戶體驗上實際是引領設計界的,高德、淘寶、餓了么等用戶量較高的 APP,不斷將用戶體驗做到極致,探索和突破用戶體驗的邊界,給用戶帶去多樣性的體驗感受,也在不斷刷新用戶的心智模型。

          B 端注重素靜,C 端注重個性

          在用戶界面視覺上,B 端以素靜為主,原因在于,B 端是為企業員工服務的,員工需要通過軟件快速完成任務。素靜的界面沒有過多無用的元素干擾,任何色彩和布局的使用,都是為了協助用戶快速完成任務服務的。在 B 端界面設計上,格式塔原理、排版原則、W3C 原則是設計師更為看重的。而對于 C 端產品來說,面向的用戶是具有個性化的個體,想要吸引住不同性格不同愛好的用戶,就需要在界面設計上花費力氣。


          做交互選 B 端還是 C 端


          從交互設計本質、B 端 C 端的差異點等方面我們可以知道,作為一名交互設計師,不論服務于哪個領域,工作職責是一致的,即“挖掘符合用戶需求、商業發展目標和科技發展水平的用戶體驗。同時定義和發展新的交互產品和服務?!?

          但由于 B 端和 C 端業務屬性和目標用戶的不同,交互設計師在這兩個領域的工作也會有差別。服務 B 端的交互設計師更像帶著腳鐐在跳舞,某種交互形式可能是合理的,但不符合行業特質或用戶習慣也會被放棄掉。做過 B 端交互的小伙伴有一句話應該經常從產品經理的口中聽到:“我知道這個交互不錯,但原來的交互已經成為用戶習慣了,我們不要隨意更改,有風險?!倍?C 端的交互設計師是光著腳在跳舞,誰更相對自由,是顯而易見的。C 端的交互設計師重新定義某種交互方式的空間會大。所以有很多交互設計師,會更加傾向于服務 C 端的產品。

          但是筆者認為,想要成為一名優秀的交互設計師,都最終會在制約下,發揮其價值,而這種價值會更經得起時間的洗禮和推敲。優秀的 B 端和 C 端交互設計師,都是行業不可獲缺的人才。如果沒有特殊傾向,筆者認為選 B 和選 C 是一樣的,在一個縱深領域帶著思考去沉淀,在哪里都會開花。

          筆者服務于 B 端,筆者想對 B 端交互設計師說,我們大部分人看到了冰山上的 B 端,但沒有看到冰山下的 B 端,冰山下的 B 端是一片未曾開發的處女地,它的價值無限大。B 端的交互設計師們,你們準備好探索和突破了么,未來 B 端的體驗是你們定義的。

          作者:小果

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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

















          Cs界面設計之二:如何區別B端與C端的產品設計差異?我總結了26條對比!

          博博

          隨著企業數字化轉型,B 端產品越來越受到人們的重視,B 端產品也越來越豐富,越來越多的 C 端設計師轉行到 B 端產品的設計上來。

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          但是,如何區別 C 端產品與 B 端產品,如何將 C 端產品的設計經驗應用到 B 端產品上?這是一個需要思考與研究的問題。

          從各個緯度來講,C 端產品與 B 端產品具有一些明顯的差別。接下來,我們就從區別 B 端與 C 端產品的 26 條上,來對比一下二者的差異。

          Let’s gooooooo……

          如何區別B端與C端的產品設計差異?我總結了26條對比!


          基礎


          1. 定義

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:為企業客戶提供商業價值的產品及服務。

          C 端產品:滿足個體用戶需求的產品與服務。

          2. 獲取途徑

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:公司領導層決策,普通員工使用,需要銷售推廣,通常將線下“大型會議、峰會、行業展會”作為主要場地,讓客戶近距離了解產品,樹立專業的行業形象與行業口碑,進而吸引企業客戶的興趣(如作者之前所在的安防企業,就會頻繁的參加展會,展示自己的專業能力)。

          C 端產品:個人主觀意愿下載使用,需要利用拉新、促活等營銷方式,實現不斷的新增、日活來加持自身體量。

          3. 產品形態

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:SaaS 平臺、客戶端,多為 PC 端產品。

          C 端產品:APP、小程序多為 Mobile 端產品。

          3. 功能聚焦

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:具有多功能模塊及多角色之間的協作。

          C 端產品:以核心功能點為主,以及圍繞核心功能點,完善用戶體驗及增值服務。

          4. 所屬類型

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:產業互聯網。

          產業互聯網是基于互聯網技術和生態,對各個垂直產業的產業鏈和內部的價值鏈進行重塑和改造,從而形成的互聯網生態和形態。(百度百科)

          C 端產品:消費互聯網。

          消費互聯網是以個人為用戶,以日常生活為應用場景的應用形式,滿足消費者在互聯網中的消費需求而生的互聯網類型。(百度百科)

          5. 生態屬性

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:相伴共生,產業互聯網每一個行業的結構、模式各不相同,必須通過整個產業鏈上的企業產生降本效應、提高效率,形成資源優化配置,產生 1+1>2 的效益。

          C 端產品:贏家通吃,比如通過燒錢取得規模優勢、利用人性的心理弱點去進行各種產品、用戶數據的采集,沒有底線、互聯網殺熟等行為。


          產品維度


          1. 產品本質

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:本質是“進”,是幫用戶(客戶),節約時間,降低成本,增加收益。

          C 端產品:本質是“出”,需要用戶消費時間與金錢,滿足個人的情感和生理需求。

          2. 商業模式

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:企業按需定制付費較多、個人付費較少。

          C 端產品:用戶流量和資源的變現實現營收,例如:廣告、導流、增值服務。

          3. 開發周期

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:由于產品更新迭代有較大的成本,因此,開發周期相對長,按月或年,大版本迭代。

          C 端產品:周期相對短,按周或月,小版本快速迭代。

          4. 生命周期

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:由產業鏈以及商業模式決定,生命周期往往較長。

          C 端產品:一般產品的保鮮期比較短,生命周期較短。

          5. 產品關注點

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:專注業務及行業化的解決方案。

          C 端產品:專注對人性的滿足。

          6. 產品需求來源

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:來源公司戰略或業務線調整,甚至客戶預期。

          C 端產品:產品經理的市場洞察力和敏銳度,主動發現。

          7. 產品思維

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:往往以工具化思維服務行業客戶,更理性。

          C 端產品:往往以游戲化思維增強用戶的體驗,滿足用戶,更感性。

          8. 行業壁壘

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:由于業務、場景屬性,容易建立行業壁壘,客戶的切換成本比較大。

          C 端產品:行業壁壘比較難以建立,往往以體量優勢及價格優勢擠壓對手,同時,同時用戶的切換成本較低。


          用戶維度


          1. 用戶類型

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:用戶通常是一個團體或組織,用戶的社會屬性比較明顯。

          C 端產品:目標用戶通常是具有某些特質的人群,具有明顯的自然屬性,且沒有組織架構。

          2. 用戶體量

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:作為工具屬性的產品,用戶體量比較小,甚至有些定制化產品的用戶只有幾人。

          C 端產品:相對而言,用戶體量較大或非常大,才可以形成規模效應,進行流量變現。

          3. 使用時機

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:往往僅工作日工作時間使用,用戶在節假日,非必要不使用。

          C 端產品:用戶會在任意時間。

          4. 使用時長

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:相對固定,且希望越短越好。

          C 端產品:彈性較大,且希望越長越好。

          5. 使用意愿

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:根據公司決策進行采購,用戶被動使用,且沒有太大的決定權。

          C 端產品:根據自己的需求主動選擇使用。

          6. 使用場景

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:場景固定,多為辦公室。

          C 端產品:場景不定,用戶可以在辦公室、臥室、廁所、地鐵上等多種場所使用,姿勢可能是坐著、躺著、蹲著、斜靠著等等。

          7. 用戶粘性圖片

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:由于用戶的被動使用限制,用戶對產品的可選性不高。因此,為了工作需要,用戶粘性相對高。

          C 端產品:用戶可以根據自己的喜好,隨時隨地改變自己的選擇,用戶粘性相對低。

          8. 用戶容忍度

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:用戶容忍度大,不好用也要用。

          C 端產品:用戶容忍度小,不爽就換。


          設計維度


          1. 設計側重

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:關注業務功能和使用場景。

          C 端產品:關注用戶體驗及感受。

          2. 視覺風格

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:界面簡潔、布局清晰,追求信息的有效表達和操作的便捷性。

          C 端產品:風格多變,強調產品的視覺沖擊力。

          3. 情感體驗

          如何區別B端與C端的產品設計差異?我總結了26條對比!

          B 端產品:強調免打擾、高效,多關注業務解決方案本身的順暢。

          C 端產品:強調產品的趣味性,處處考慮用戶的情感體驗。


          總結


          明確 B 端產品與 C 端產品的區別,有利于設計師在設計過程中的設計經驗轉換。在設計過程中,做到有的放矢,而不是一味的生搬硬套,用解決 C 端產品的方法與思路,去解決 B 端產品的問題,從而讓 B 端產品的解決方案更加貼近業務與場景。

          作者:弘毅

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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














          Cs界面設計之三:從3個方面,詳細分析B端和C端的差異化

          博博

          眾所周知,無論是在用戶群體、產品定位,還是使用場景等方面,B 端產品與 C 端產品都有比較明顯的差異。但是兩者的基本設計理念是趨同的,例如提高效率、降低學習成本等等。

          不過 C 端產品更加注重運營,所以設計師不單單要考慮設計側的用戶體驗,還要顧及商業目標的達成。B 端產品重點在于提升用戶效率,這本身就是體驗目標之一,因此 B 端產品的設計策略更加純粹。

          兩者在具體的設計表現上還是存在一定的差異性。今天我們就來總結一下,主要包括 3 個方面:

          1. 內容的差異化
          2. 交互形式的差異化
          3. 展現形式的差異化


          內容的差異化


          1. 圖文結合 VS 數據表格

          C 端產品重運營,通過流量的轉化獲得收益。B 端產品重功能,通過功能定制向客戶收費。

          C 端產品想要達到商業目標,獲得充足的流量,必然要內容化。內容想要吸引用戶就必須要足夠豐富,所以 C 端產品基本是用圖說話,而短視頻和直播的興起,進一步增強了對用戶不同層次的感官刺激??傊?C 端產品需要讓用戶看得爽、玩得爽、逛得爽,不知不覺的沉浸在其中,并逐漸產生依賴感。

          從3個方面,詳細分析B端和C端的差異化

          B 端產品聚焦功能,更強調幫助用戶解決問題,特別是中后臺的管理系統,主要是幫助用戶完成數據監控、統計和查詢。因此頁面中充斥著大量的圖表、表格和數據信息。

          從3個方面,詳細分析B端和C端的差異化

          內容的差異也帶來了體驗方面的差異。圖片相對數據或者文字更加直觀感性、富有親和力,更容易引發用戶的閱讀興趣,精美的圖片更容易引導用戶建立對內容的好感。

          而 B 端產品則是客觀反映數據信息內容,相對更加理性,不會帶有太多的情感體驗。

          2. 個性化與標準化

          C 端產品服務于個人,更加注重用戶的個性化體驗,例如千人千面推薦機制,定制化的興趣范圍設定等等,希望能夠通過精準的內容推薦,獲得用戶、留住用戶。

          C 端產品功能服務于整體的商業目標,今天主推 A 功能用來拉新,明天可能就強調 B 功能的運營活動。另外版本迭代也比較快,功能玩法變化較為頻繁,內容也會做出相應的變化。例如天貓最近首頁也在不斷變化。

          從3個方面,詳細分析B端和C端的差異化

          B 端產品服務于組織,每個用戶不再是單獨的個體,而是組織中的角色,更強調業務流程和組織協同,因此需要建立標準化的流程,或者相對有限的個性化。另外復雜和高門檻的業務內容,更加強調設計的一致性,從而減少用戶的學習成本。

          同時 B 端產品的信息架構、業務流程一旦確定了,不會輕易改變。避免打破用戶已經形成的認知和行為習慣,對用戶的使用造成不便。


          交互形式差異化


          C 端更強調便捷性,希望可以隨時隨地觸達用戶,更多的是移動端產品。B 端產品以工作辦公為主,更多的應用在 PC 領域。因此兩者在交互形式上有很大的區別。

          1. C 端:全面體驗、兼顧商業

          C 端產品在保證用戶體驗的同時,更講求商業價值。交互體驗上我個人覺得主要講求少操作、短路徑、沉浸式。

          特別是電商平臺,例如淘寶,雖然首頁中增加了各種頻道入口和商品分類,但是并不希望用戶按部就班,逐級操作。因為用戶行為路徑越長,造成的用戶流失也就越大。搜索功能被放置在頁面頭部位置,頁面滾動時也常駐在頂部,方便用戶快速查找產品。

          同時運營活動會通過彈窗、浮窗、懸浮按鈕,前置廣告資源位等形式增加曝光,縮短用戶的操作路徑,實現內容的快速直達。而為了增加內容對用戶的吸引力,讓用戶沉浸其中,淘寶、拼多多等都專門打造了專屬頻道,主打短視頻和圖文。

          2. B 端:業務為主,效率至上

          B 端產品最主要的價值在于優化業務流程,提升用戶操作效率。

          除了常見的基礎交互形式,在細節設計上也越來越 C 端化了。通過監測用戶行為,或者信息內容實現智能提醒。例如飛書文檔在用戶首次使用場景下刪除內容時,會主動提示快捷鍵功能,幫助用戶了解學習相關功能。

          從3個方面,詳細分析B端和C端的差異化

          而公眾號壹伴插件會檢測文章中的關鍵字,文章中出現“原文鏈接”時,而用戶未進行選項設置時,會主動提示相關信息,避免用戶遺忘。

          從3個方面,詳細分析B端和C端的差異化

          另外在 B 端產品中信息架構非常重要,用戶主要是依據導航菜單按圖索驥,首先定位到功能頁面,再次查找相應表格,最終定位自己所需的內容。所以信息層級的優化,可以較好的減少用戶的操作成本和記憶成本。


          視覺表現的差異化


          視覺設計層面,C 端產品的要求遠高于 B 端產品。

          1. C 端:場景化、豐富性

          C 端視覺設計師要求越來越高,基礎的設計技能不用說了,動效、C4D 建模都逐漸成為了設計師的必備技能。界面風格也是多種多樣,酸性風格、賽博朋克等等,希望能夠通過提高界面設計的豐富性,增強頁面氛圍,保證對用戶足夠的吸引力,例如大促會場頁面的頭圖設計。

          從3個方面,詳細分析B端和C端的差異化

          2. B 端:簡潔化、統一性

          作為工具型產品,幫助用戶提高工作效率是 B 端產品設計的核心價值。因此 B 端產品中視覺元素強調簡潔高效,除了色彩相對豐富的圖表外,主體風格基本是灰白色調,再加點主題色點綴基本就可以了,過多的顏色和背景信息反而會影響核心內容的瀏覽。

          從3個方面,詳細分析B端和C端的差異化


          寫在最后


          雖然在設計理念上,C 端和 B 端產品具有一定的相似性。但是受到各種因素的影響,有時候 B 端的產品經理對用戶體驗重視不足,更多強調產品功能的強大,考慮如何實現產品功能,很少考慮用戶是否真正的需要此功能,以及在使用過程中的操作體驗。

          所以 B 端交互設計師需要在業務分析基礎上,積極尋找產品設計中的體驗突破口,不斷提升產品的用戶體驗。

          作者:子牧先生

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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
















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

          博博


          前言:


          在 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 端入門教程。

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

          從視覺產品兩方面,分析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青年

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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

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


          更多精彩文章:






          日歷

          鏈接

          個人資料

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

          存檔

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