<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 類圖表的特點和設計細節

          馬克·吐溫有一句名言“世界上有三種謊言:謊言,該死的謊言和統計數字?!比藗兘洺G鈹底郑e言并不是源于數字本身,而是錯誤或不負責任的使用數字的人,向他人展示數字的時候,你有責任展示出真相?!稊祿馈?

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

          想做好數據可視化?先掌握常見 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個大類的圖標樣式介紹。如桑基圖、雷達圖、地圖等等。一些之前比較少見的圖表類型,也越來越常見,如玫瑰圖(南丁格爾玫瑰圖),通過人民網在疫情期間的應用,也為大眾所熟知。

          一般來說,相較于基礎圖表,目前發展的數據可視化圖表,應用場景相對來說比較局限,同時制作方式也較為復雜,不同于基礎圖表,通過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咨詢、用戶體驗公司、軟件界面設計公司



          更多精彩文章:

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

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

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














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

          博博

          編者按:周一無水文!這篇好文將給同學們科普何時能用單頁網站,設計時有哪些技巧,有哪些優秀范例可以借鑒,以及文末推薦一大波專業的單頁網站資源,干貨份量絕對足,充電時間到 >>>

          @十萬個為什麼 :單頁設計,是一項處理小型網站的絕佳技巧,甚至有些網站你可能認為一張頁面搞不定,也同樣適用。從易于維護,到減少帶寬占用,使用單頁網站的好處不勝枚舉。

          假如你應對的是個小型網站,通常只有幾個頁面的那種,可以考慮使用單頁設計,看看它是否能簡化項目,對用戶更加友好。繼續閱讀,你將了解它的益處,何時使用(或不該使用),還有一些你該遵循的絕佳慣例。


          單頁設計的益處


          很顯然,單頁設計并非所有項目的理想選擇。但假如可能的話,有一大堆理由使用它。

          直觀易用

          默認情況下,用戶要瀏覽單頁網站,只要知道如何滾動就行。你也可以加入箭頭或其他瀏覽暗示,但除了少數例外,其實滾動就足以讓用戶在各部分間穿行。


          Green13


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

          完全不用擔心用戶身陷多層導航中,無休止地尋找他們所要的東西。如果頁面上有多個部分,頁頭或其他導航鏈接通常很有幫助,不過即使沒有它們,網站仍然是可用的。

          維護起來更快速、更簡單

          這點并非既成事實,編碼良好的單頁網站,或許編寫起來比多頁網站更快。設計過程有時可以花更少的時間,盡管這取決于單頁網站的復雜程度。


          Andreaballerino


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

          一旦你腦海中有基本的布局,單頁網站還能利用某些特定的設計約束來加快進程。尤其較之于多頁網站而言,單頁網站各個部分要保持無縫銜接。如果你已經明確哪些能做哪些不能,這類約束的確能加速頁面開發。

          維護也更簡單。當你只需要處理一個頁面,維護工作就大大簡化了,只要網站本身編碼良好。

          它迫使你進行簡化

          這條構筑了上面一點。當你只有一個頁面要處理,你不得不把一切簡化為它們最基本的形態。不再需要一頁頁毫無用處的市場宣傳。你必須直截了當、開門見山。


          Varsity


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

          更具SEO潛力

          高質量的站內鏈接,是網站在搜索引擎中的表現的重要組成部分。盡管搜索引擎并不是很多網站必須的最大流量源,它們仍然重要。

          單頁網站的鏈接總是指向自己。搜索引擎抓取時,這可以增加網站的權重。

          敘事的手法促使用戶有所行動

          單頁網站往往從敘事角度出發,這點多頁網站可不擅長。這可以促進轉換,激發用戶采取行動。


          Wild


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

          人們習慣于聆聽故事,不論在線上還是線下,所以這點有著顯而易見的用戶體驗優勢。我們兒時就開始閱讀和聽故事,于我們而言,這是自然而然的事情。

          易于組織

          再也不需要組織一列列數不清的頁面和子頁面了。無需多慮每個頁面是父級還是子級。也沒有龐雜的導航菜單和子菜單。所有都在一頁上。是要包含導航鏈接,還是讓用戶滾動,這取決于你,就看是否有助于提升用戶體驗。網站如果有多個頁面,是絕對不會這么考慮的。

          Stefansohlstrom

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

          減少帶寬占用

          盡管不像從前,對服務器而言已經不成問題,不過想想近年來有多少用戶通過移動設備訪問你的網站。減少網站的帶寬占用,會贏得流量有限的用戶的感激。

          消滅了移動版網站

          當然,響應式設計不只限于單頁網站。但即使采用了響應式設計,網站越復雜,讓它適應小屏幕還是愈發困難。單頁網站并不復雜,這是必然的。運用響應式設計總體來說更容易。簡化導航和類似改變,也更容易成就適用于小屏幕的設計。


          Bearonunicycle


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


          要不要用視覺差滾動?


          視覺差滾動可能是互聯網中發生過的最美妙的事情,也可能是個被濫用的噱頭,來蹂躪我們瀏覽器,這取決于你怎么看。無論你站在哪一方,它似乎近期并不會消失。

          就我而言,我希望有時間和地方來實現視覺差滾動。這個效果對于某些單頁網站大有裨益,而對于另一些則是噱頭,甚至更糟:難以使用。關鍵是要明確一點,你使用視覺差滾動真的能提升網站的易用性嗎,還是因為你覺得它看起來很酷?

          如果要使用視覺差滾動,還要考慮一件事,使用Javascript還是純CSS技術來實現。關于這兩個選擇,請參見資源部分了解更多信息。


          何時使用單頁網站,何時不用?


          雖然有單頁網站大有益處,但它們也不是完美的全尺寸適配方案。雖然很多時候單頁網站比多頁網站更合理,但也有很多時候不應該使用單頁設計。

          總之,假如你的網站只有少數頁面,單頁網站或許是最佳選擇。將一切濃縮在一個頁面上,能讓網站整體具有更現代的外觀,如果內容精簡,那么單頁網站可以讓它看起來更豐富。

          單頁網站的另一個普遍案例,就是發布預告頁面。它們通常是單頁網站,帶有新聞郵件的注冊表單。多數情況下,發布預告期間面向大眾的信息很容易組織在一個頁面上,所以,設計這些頁面時優先考慮這種風格是很合理的。


          Clientsy


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

          產品單一的電商網站,也是單頁網站表現優秀的領域。如果你只賣一種產品,無論它是實體或是虛擬的,何必勞煩使用多個頁面呢?一個簡單的單頁網站才是更好的銷售工具。


          Franzsans


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

          可能你覺得更復雜的電商網站不適合用單頁網站,但它仍然可行。當然,有十多種產品的網站中我會避免使用,不過單張頁面也足以輕易支撐一個簡單的在線商店,通過彈出窗口來承載產品詳情和支付流程。


          Simplygum


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

          不該使用單頁網站的情況十分明確:龐大、復雜,或必須保有海量信息的網站不適合做成單頁網站。在這些情況下,使用相對傳統的網站結構更加明智。


          混合型網站


          雖然有大量的單頁網站存在,但也有很多混合型網站。它們給人印象是個單頁網站,但通過ajax、彈出窗和類似技術,它們事實上包含了多頁內容。

          網站Dang & Blast就是這方面的絕佳案例。


          Dangblast


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

          如果無法讓所有東西徹底融入單個頁面,這會是和很好的解決方案。

          說到單頁網站,某些站點用了某種“取巧”的辦法。它們的主站是個單頁網站,但在其他域名下也有個博客(有時是Tumblr或托管在WordPress.com的網站)。這么做沒有問題,它能突出主站的信息,也不用舍棄博客帶來的好處。


          單頁網站的絕佳慣例


          優秀設計的多數準則,在單頁網站中仍然適用,其實也適用于任何網站設計。還有一些額外的東西需要牢記,其中有些之前已經提到了。

          保持簡單

          設計如果對于你試圖表現的內容而言過于復雜,對你和你的用戶都沒有任何好處。相反,要盡可能簡化設計和內容,還能表達出你要的信息。


          Petertoth


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

          導航鏈接還是有幫助的

          正因為用戶可以通過滾動來瀏覽你的網站,但并不意味著這是最友好的方式。如果你的網站很長,有很多部分,這點尤其正確。除非有特別好的理由,還是應該加入直達特定部分的鏈接,來使你的網站更加友好。


          Fraudforcesummit


          分割內容

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

          分割內容

          單個頁面不代表一整個冗長部分。實際上也不該如此。將內容根據邏輯劃分為幾大塊,用戶才能更容易找到他們所需。


          Ritchiejacobs


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

          讓所有的背景都有所作為

          單頁網站常常有大幅背景。當然,有時候這些背景很樸素,或帶有平鋪紋理;不過也有單頁網站利用所有的空間來揮灑創意。前面提到了,這也有助于劃分內容。背景未必要是單一的圖片??梢允且幌盗袌D片,如果這樣做與內容更相符的話。

          相關資源:


          Johnjacob


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


          單頁網站的資源


          單頁網站的資源成百上千,還包括模版;我們這里重點關注表現突出的幾個。

          PureCSSParallax Scrolling:Keith Clark的這篇文章闡釋了如何通過純CSS打造視覺差滾動效果。如果你不想用JavaScript(或者不懂)的話,這是個很好的選擇。

          Skrollr:“為剩下的人準備的視覺差滾動”。這是個獨一無二的庫,適用于移動端和桌面。不需要jQuery,只有原生JavaScript。

          Stellar.js:Stellar.js是另一個簡單易用的視覺差滾動庫。它提供了很多設置選項和iOS支持。

          One Page Website Wireframes:如果你不確定如何構建你的網站,這個單頁網站線框圖集是很好的出發點。免費下載。這里(Graphicburger)還有第二集可供下載。

          One Page Love:One Page Love是首屈一指的單頁網站集合,里面有超過5000個網站案例,并且一直在更新。他們還主打大量模版和其他資源。

          Start Bootstrap:Start Bootstrap集成了海量的免費單頁網站Bootstrap主題。主題適合機構、自由職業者、作品集、著陸頁等等。

          One Page Love Templates:除了豐富的網站集合,One Page Love也提供免費和收費的模版。

          One Page Mania:One Page Mania提供獨特的網站和模版集合,供你下載或購買。


          結論


          對各種網站來說,單頁設計都是非常棒的選擇。盡管它們不是小型網站的唯一設計方案,對很多項目而言它都是值得考慮的。思考使用單頁設計的理由,然后也思考不用的理由,再做決定。

          作者:程遠

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

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

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

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

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

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

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

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

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

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

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






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

          博博

          編者按:酒店預訂網站大多功能繁多,在視覺美觀上有天生劣勢,想平衡兩者非??简炘O計師的功力,借鑒相關的優秀網站是捷徑,今天@AnyForWeb_UED 從眾多在線預訂網站中提煉了10條設計的技巧 >>>


          一、用戶需要一目了然的重點


          進入酒店預訂網站或是板塊的用戶一般來說目的性很強,他們心里其實已經有了很完整的設想,而來到網站只是為了完成計劃。因此,讓用戶在首頁就直觀的看到他們需要的內容,并且盡可能的減少其他不重要內容的出現,這是一個提升用戶體驗的好方法。


          Agoda


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

          正如Agoda的設計,網站首屏以令人浮想聯翩的風景圖作為背景,酒店預訂的快捷入口最為搶眼,就連公司口號標語也只是簡短的出現在頁面上方。首頁設計以熱門內容為主,根據大多數用戶的喜好和點擊查詢量列出推薦,這樣的想法確實很好,但是底部顯示的“熱門國家地區”和“熱門城市”是不是有點太多了…


          二、用合適的大圖作為背景


          用美觀的高清大圖作為網站背景似乎已經成了一種萬能的設計方法,一張大圖搭配簡單的文字,就能輕輕松松讓網站變得莫名的高大上。在圖片的選擇上,“是否足夠美觀?”可能是我們一味的關注點,而“是否合適”也許對我們的整體設計更重要。這里所說的“合適”包括很多方面,色彩、布局、大小,甚至圖片中表達的含義。

          如何選好圖片:《設計師找圖技巧!如何快速準確找到合適的網頁背景大圖?》


          Airbnb


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

          Airbnb的網站的圖片使用方面很值得借鑒。首屏主要以大圖片為主,在熙熙攘攘的人群中有一男一女快樂的行走,有一種回家的感覺。下半部分分別使用了具有各地特色的照片作為背景,讓用戶能更直觀了對當地風俗有初步了解。


          三、切換圖片時減少誤點可能


          在酒店詳情頁中最受關注且最先出現的是關于酒店的一些圖片,而這些圖片內容對用戶來說可能又愛又恨。當用戶正在瀏覽的時候會覺得圖片表現完整但有些雜亂,而當用戶沒需求的時候又會因為一些正常的操作造成誤點。如果網站能先展示一部分圖片,讓需要查看更多圖片的用戶點擊進入一個專門的圖片板塊,并且對這些圖片進行分類,便于用戶有針對性的快速找到自己需要的內容,這樣的設計才更符合用戶體驗。


          游多多


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

          游多多的詳情頁圖片使用了鼠標懸停后放大圖片的效果,另外設有“全部圖片”按鈕。

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

          點擊“全部圖片”出現彈窗,左側顯示關于圖片內容類型的分類,供用戶自行選擇;右側顯示圖片和縮略圖。這種形式讓圖片部分的條理十分清晰。


          四、完整詳細的酒店信息


          酒店信息詳情頁中的信息內容都大同小異,但一些細微的差別卻能令網站的用戶體驗大相徑庭。大多數網站的介紹以“酒店簡介”之類的官方信息作為首要內容,其實,用戶實際需要的并不是這些官方資料,與其息息相關的實用型內容才是他們最關注的。


          住哪兒


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

          住哪兒網酒店詳情頁的內容排序與大多數網站不同,文字介紹部分以“酒店設施”、“酒店政策”、“酒店介紹”…的順序排列,真正按照用戶的實際需求來做設計。


          五、特別信息應該特別標注


          這里所說的特別信息并不全部特指重要信息,也可以是一些網站方認為需要引起用戶注意的優惠信息、贈送項目,或者數量提醒等。


          Booking


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

          Booking是一個專業的全球酒店預訂網站,網站中的設計都比較人性化。正如案例中顯示的酒店預訂環節,使用的文字及其色彩都以使用者角度出發,對用戶可能會感興趣的內容作了不同顏色的顯示,這種做法很利于促成銷售。


          六、圖文并茂的生動點評頁


          其他用戶的點評是很多正在選擇的用戶都會關注的板塊之一,這些點評意見可能會對他們的最終選擇起到很大的引導作用,因此這部分的設計更應該被重視。常規化的劃分會讓用戶覺得沉悶單調,嘗試著設計一個活潑生動的點評板塊,讓用戶更容易接受和認可。


          到到網


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

          到到網的點評部分設計成了對話框的形式,并且支持圖文并茂,增加用戶的信任感,也讓用戶在瀏覽的時候更有參與感。


          七、情感化預訂日歷


          預訂日歷雖然只是一個很細小的環節,但是用戶很容易在這里產生混亂,所以給予用戶及時的交互反應變得格外重要,色差顯示或小批注都不會顯得多余。但在這部分的設計中也要注意,區域始終應該保持整潔,不能因為內容多而疏忽視覺感受。


          去哪兒網


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

          去哪兒網的預訂日歷設計表現的十分體貼。在選擇日期的時候顯示淺藍色底紋,并且用小標識告訴用戶總計天數,很大程度的減少了用戶的思考時間。


          八、互動產生反饋


          用戶在瀏覽任何網站時都喜歡有一種“我不是一個人在瀏覽”的感覺,所以每次鼠標懸停產生的一個小動作都會讓用戶覺得很溫暖。


          藝龍網


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

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

          藝龍的首頁交互效果做的很充分,幾乎每一處懸停都會有反饋。但雖然案例網站的交互反應比較多,卻也不會令人感到多余和復雜。這也給了我們一些啟發:當一個頁面中交互動作多的時候,需要注意產生的反應最好在一個指定的范圍內,一旦超出范圍影響到其他版塊,就會令人覺得過于繁瑣。


          九、拆分復雜的流程


          酒店預訂的流程大多不會很復雜,和一般網上購物的流程大致類似,但首次預訂的用戶可能會少了一些安全感,而拆分并且顯示整個過程就是消除用戶不安的最好方法。


          同程網


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

          同程網站很仔細的對整個過程做了拆分。將每個比較重要的環節用口語化的文字表現出來,讓用戶不僅能夠對之后要做什么有了清楚的了解,同時增加了網站的親和力。


          十、減少輸入框和必填項


          滿屏的輸入框和標記著紅色星號的必填項與生俱來著一種令人反感的視覺體驗,而很多網站恰巧就是這么做的!為什么一定要讓用戶必須先注冊才能預訂或者購買?這種強制性的行為要求會讓用戶覺得自己處于很被動的位置。如果網站能以柔和的態度解決登錄注冊問題會不會更好?


          途牛網


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

          比如途牛網的做法,“登錄或注冊可以獲得更多優惠”,這樣的引導也許更容易讓用戶心甘情愿的接受。

          作者:程遠

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

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

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

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

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

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

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

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

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

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

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






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

          博博

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

          詳細從以下開始。


          什么是簡約風格的網站?


          扁平設計、英雄形象和漢堡包菜單等等許多這些現在流行的設計趨勢,都是于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 設計師的總結!






          圖標定制設計之一:6大章節!圖標設計基礎知識全方位入門指南

          博博


          前言


          做好圖標設計是一個入門級 UI 設計師的必備技能之一,圖標是界面中非常重要的組成部分,在實際的工作中,即便是一些工作多年且有一定經驗的設計師,也很難保證自己設計的圖標有多么完美。不同位置的圖標在界面中所起到的作用不同、風格也不同、其設計思路更是有所區別,例如金剛區、分類、標簽欄、服務工具等。

          6大章節!圖標設計基礎知識全方位入門指南

          用圖標準確的表達出實際含義,僅僅學其「形」是不夠的,需要對圖標有較為全面、系統的認識,了解圖標的相關概念、正確的繪制方法及處理好一系列的細節,本篇文章將介紹圖標設計的具體方法及要點,幫你規避掉一些常見的問題,讓圖標設計有理有據。

          本期大綱

          1. 圖標的定義
          2. 常見的圖標風格
          3. 性格與氣質
          4. 設計規范與流程
          5. 常見問題及注意事項
          6. 圖標資源
          7. 總結


          圖標的定義


          1. 什么是圖標?

          圖標是一種具有高度概括性的圖形化標識,在界面中與文案相互支撐、搭配使用,隱晦或直白的表達內容的具體含義、屬性特征、形象氣質等豐富的視覺信息。

          6大章節!圖標設計基礎知識全方位入門指南

          從概念上來講,圖標可分為廣義、狹義兩種,廣義指的是現實世界中的圖形符號、且有明確指向的含義,而狹義的圖標指的設備界面中的符號,這些設備泛指承載互聯網產品的載體,如手機、電腦、iPad…等。在 UI 設計中主要具是針對狹義的概念。

          圖標設計是一門學問,在我們的認知中,通常將圖標理解為某個概念的抽象圖形,通過設計清晰易懂的圖形傳達出比文字更高效率的信息,同時提升界面的美觀程度。想要將圖標設計的更加出色,則需要頻繁練習、不斷試錯、持續探究并嘗試新的風格,所以很值得我們花費大量的時間去鉆研練習。

          6大章節!圖標設計基礎知識全方位入門指南

          2. 圖標的基本特征

          一個界面是由文字、圖標、幾何圖形、圖片(音頻、視頻)組成,從 UI 設計師的角度,相對來說,其他三種元素大多運用到的是排版技巧,而圖標則是需要繪制、創作的元素,在沒有圖標的情況下,純文字也可以代替,可為什么貴還要費力費時的設計圖標呢?原因主要有兩點:

          首先,圖標作為一種圖形符號的存在,跟文字的復雜程度相比,在識別效率上有著先天的優勢,因文字需根據語種、長短的不同,所占用的界面空間資源就不同,在文字較多的情況下,大大減低了用戶瀏覽速度及信息傳達的效率,固圖標將文字信息進行了濃縮。好的圖標不僅易于識別、效率更高,且讓界面更加簡潔,所以我們常見的圖文結合界面,絕大多數都是圖標在上、文字在下,或者圖標在左、文字在右,這些設計足以說明圖標視覺傳達的優先級高于文字。

          6大章節!圖標設計基礎知識全方位入門指南

          其次,不同風格、樣式的圖標能讓界面看起來更美觀,提高用戶的視覺舒適度。設想一下,如果界面沒有任何圖標的點綴,即便用戶也能使用,但看多來多少都有些枯燥無味,全部用文字來理解內容還容易引起視覺疲勞。

          6大章節!圖標設計基礎知識全方位入門指南


          常見的圖標風格

          1. 扁平風格

          扁平風格圖標主要是由形狀的描邊、填充進行各種組合搭配來表達不同的含義,并通過不同的色彩體現出不同的視覺效果,最常見配色有以下幾種:

          單色:簡潔、清晰視覺效果,常見于基礎功能圖標。例如:B端功能入口,移動端個人中心、二/三級頁面的工具欄等,也有很多app的金剛區利用底色塊襯托反白的圖標。

          雙色:是很常見的功能性圖標,至少由兩個以上的元素組成,在單色的基礎上加以色彩點綴,讓本身就不是很突出的元素不再單調,如果融入品牌色,能提升整個界面品牌調性,適用場景跟單色圖標相比則范圍更廣。

          多色:至少由三種或以上的形狀、顏色組合而成,常用于金剛區、產品分類列表、定制化菜單等。

          漸變:漸變色的圖標顯得較年輕化,可以是單元素的漸變或多元素的漸變組合,能映射出一種活潑、熱烈的氛圍。例如:視頻、直播等娛樂類型的APP,或車載UI等。

          不透明度:調整圖標中某個元素的不透明度,可在不變換色系的情況下豐富配色細節,還能與底色融合的更加細膩,解決多色漸變視覺跳躍的問題。

          另外,在 UI 界面中,扁平化風格圖標使用最多的當屬線性、面性、線面結合這三種類型。

          線性

          線性圖標主要是通過線條描邊勾勒出來的圖形,在界面中的尺寸普遍偏小,其線條不能過于復雜,否則將會影響辨識度,看似不多的簡單線條搭配不同的色彩,則有很大的調整空間。

          6大章節!圖標設計基礎知識全方位入門指南

          面性

          面性圖標主要通過剪影的形式來制作抽象的形體,相比線性圖標則面積更大、視覺層級更高且更有體積感。通過不同色彩填充、切割手法塑造不同的設計感,以達到多種視覺表現的效果。

          6大章節!圖標設計基礎知識全方位入門指南

          線面結合

          線面結合的圖標既有線段或輪廓、又有填充的色塊,相比純線/面性單一樣式的圖標則細節更加豐富,如果把控到位,會有更好的視覺效果及信息傳達的效率,也不失趣味性。

          6大章節!圖標設計基礎知識全方位入門指南

          2. 擬物化風格

          擬物風格的圖標主要通過細節和光影、根據現實世界中的物品塑形打造出圖形立體效果,非常考驗設計師的造型繪制、技法表現能力。這種風格的圖標有著極強的代入感,能讓用戶快速領會圖標所傳達出的意圖及氣質。

          因為擬物化圖標信息元素的高復雜度及突出的視覺效果非常搶眼,在頁面中頻繁出現會成為干擾其他信息的存在,游戲類應用中使用的非常普遍(不過多贅述)。在其他類型的應用中,大部分出現在營銷類型的界面,例如專題頁、成就榜、會員中心等。

          6大章節!圖標設計基礎知識全方位入門指南

          3. 輕質感風格

          跟擬物化圖標相比,輕質感就不會有太多復雜的元素,主要通過各種色彩漸變、發光、投影等圖層樣式體現出非常柔和的立體感,整體風格偏年輕化,給人輕盈、簡潔及精致的感覺。在設計過程中,請使用干凈且和諧的配色,主要使用在界面較大區域的位置。

          6大章節!圖標設計基礎知識全方位入門指南

          4. 磨砂玻璃風格

          不僅僅是頁面背景有毛玻璃風格,圖標的毛玻璃風格也很出彩,主要通過背景模糊、疊加、剪切圖層來實現(網上很多教程)。輕量漸變搭配毛玻璃的朦朧感,可以體現出圖標的質感與神秘感。

          6大章節!圖標設計基礎知識全方位入門指南

          除上述這幾種風格的圖標之外,還有例如 2.5D、3D、像素風、新擬態…等,但在 UI 設計中并不常用,就不一一舉例說明了。


          性格與氣質


          1. 性格走向(描邊/拐角)

          力量型:粗線條、直角拐點,給人一種力量、狂野的感覺,常用于體育、健身、機械類型的產品;

          可愛型:粗線條、圓角設計,看起來活潑可愛,給人舒適、飽滿的感覺,在兒童、教育類產品中很常見;

          嚴謹型:細線條、直角拐點,看起來工整、嚴謹,中規中矩,適合政府、法律類型的產品;

          精致型:細線條、圓潤的拐角,柔和、干凈、纖細且精致的感覺,很適合極簡風格的設計,在藝術、金融、珠寶等奢華類產品中比較常見。

          6大章節!圖標設計基礎知識全方位入門指南

          2. 動態效果

          如果想要突出金剛區、工具列表中的某個功能入口,將圖標設計成動態效果,既能保持整體圖標風格的統一、又能單獨突出功能的重要性,起到強調的作用,用來吸引用戶的注意力,引導用戶操作,提升其點擊率。切記動效圖標不能過多,當什么都突出了等于什么都沒有突出。

          其次,在年輕化、娛樂類型的產品 Tab 欄中的圖標切換時,加入動態效果,可起到畫龍點睛的作用,還能通過動效表達出不同的情緒,降低切換時的枯燥感,好的 Tab 動效能傳達出整個產品的氣質。

          最后,如果有類似運營或短期內的活動,需要吸引用戶注意但又不適合固定在界面中的某個位置,這時可以設計一個動態圖標懸浮在設備某個位置(注意用戶體驗及交互原則),既不過多的占用頁面資源,還能同時顯示在多個界面,一舉多得。

          6大章節!圖標設計基礎知識全方位入門指南

          6大章節!圖標設計基礎知識全方位入門指南

          6大章節!圖標設計基礎知識全方位入門指南

          動效圖標:@墨染 ART 授權


          設計規范與流程


          遵循圖標設計規范有利于設計師之間的合作及接下來的設計,以及產品整體圖標風格的統一性,起到約束的作用,即便在更換設計師的情況下,也不至于出現較大的問題。在制定合理的設計規范前需要先了解圖標到底有哪些規范,應從哪些方面入手,以便接下來的圖標設計順利進行。

          1. 網格尺寸比例

          為了保持圖標元素的平衡,尺寸大小需要保持一致,通常我們會建立基礎網格尺寸進行圖標的繪制,常見的網格尺寸有 16、24、36、48、64、128、512、1024,這些網格尺寸并非固定,也會根據設計中的特殊尺寸而變化。

          一個圖標系統包括網格尺寸和圖標元素兩部分,設定好網格尺寸后,就需要用 keyline 來約束圖標形狀的長、寬比例了。最終設計的圖標大小并不是跟隨網格尺寸,而是根據不同的形狀占比受制于圖標 keyline,最終形成統一的視覺大小。

          6大章節!圖標設計基礎知識全方位入門指南

          從上圖中可以看出,相同尺寸的圖標在真實的視覺中相差很大,這就好比一個 100 像素的圓形、跟 100 像素的方形相比,站在邏輯角度,大小是相同的,但在視覺上,一定是方形顯得更大。所以我們常說的圖標大小相同,并非真實尺寸,而是視覺感受。

          2. 圖標 keyline

          為保持圖標視覺上的一致性和平衡感,需要先繪制 keyline 用來指導、規范圖標設計。keyline 由圓形、正方形、長方形-橫、長方形-豎、三角形和對角線組成,網格的大小需保持 4 的倍數,便于不同尺寸的圖標都能適配,可使用 24*24px 的網格尺寸為基準,其他尺寸的圖標可通過增加倍數以此類推,如 48*48px、72*72px……

          下圖是以 24px 尺寸的網格參考基準示例(出血為 2px):

          6大章節!圖標設計基礎知識全方位入門指南

          3. 確定圖標風格

          根據產品屬性及目標用戶并結合應用場景,找到最符合自身產品性格、氣質的圖標設計風格,例如健身應用屬力量、粗獷類型,圓角、曲線適合女性產品等,在前面的「性格與氣質」中有舉例說明。

          4. 圖標繪制

          經過圖標風格的確定,圖標細節便是接下來繪制過程的核心部分,對線性圖標來說,注重的是線條的粗心,而面性圖標則注重各小圖形之間的距離,所以在繪制時,需要保持線條、間距的統一,方便后期的圖標更新迭代。

          線性描邊粗細

          我們以 iOS@2x 為基準(避免@1x 的 3px 描邊變成 1.5px,小數點),可適配最 2px、3px、4px 最常用的描邊粗細,4px 視覺較重,用于優先級較高區域的功能性圖標,2px 看起來會顯得更加精致,在設計中,還需根據產品的行業屬性及調性來確定描邊的粗細,并統一起來。

          6大章節!圖標設計基礎知識全方位入門指南

          面性正負形間距

          面性圖標需要確保每個單獨的形狀之間有足夠的間距,以 24px 大小的形狀為例,其間距不能小于 1px,以此類推,雖然未規定上限,但間距也不宜太大,否則無法相互組合關聯,以實際視覺的舒適度為準。

          6大章節!圖標設計基礎知識全方位入門指南

          5. 創意提取

          根據行業類型及風格進行創意設計,如線性統一斷點、融入品牌基因、單個元素傾斜、節日氛圍烘托、修飾元素等,為圖標塑造靈魂或傳遞更多信息而進行的二次創作。

          6大章節!圖標設計基礎知識全方位入門指南


          常見問題及注意事項


          1. 識別性

          圖標存在的意義,主要是為了快速傳遞信息,不能讓其成了無用的裝飾品。隨著互聯網的普及、時間的積累,人們對一些線上圖標信息的隱喻已根深蒂固,早就形成了慣性思維,所以我們設計的圖標必須要符合用戶的認知,能讓用戶快速理解,即便出現個別特殊情況,也要用文字清楚的標注說明,否則一旦讓用戶產生疑惑,圖標就起了負面作用,在很大程度上影響使用體驗。符合認知的圖標能讓用戶下意識的理解且接近心理預期,減少學習成本,提升使用效率。

          6大章節!圖標設計基礎知識全方位入門指南

          2. 簡潔美觀

          圖標是將現實世界中的事件/事務用抽象的圖形表現出來,如果過于追求完美而設計的太復雜,還不如直接上圖片來的快,所以不能過于展現真實物品的細節,最終設計出正確而不失真的圖標尤為重要,這樣既能用于傳遞信息,又便于用戶快速且清晰感知。

          6大章節!圖標設計基礎知識全方位入門指南

          3. 視覺對齊

          為確保視覺平衡,異形元素在使用系統自動對齊后,會有一定的偏差,需手動微調進行視覺對齊。

          6大章節!圖標設計基礎知識全方位入門指南

          4. 保持一致

          針對大型項目,要想整個家族的圖標更加和諧,保持相同的樣式及設計原則著實不易,尤其是在多人完成設計的情況下,事先有一個清晰的設計原則和規范是必不可少的。圖標都有著對應的視覺重量,例如描邊粗細、填充模式、繁簡程度等屬性,需要做的就是控制好這些關鍵因素,讓整體看起來視覺重量相同且能相互關聯組合到一起,保持所有圖標的一致性。

          6大章節!圖標設計基礎知識全方位入門指南

          5. 最小間隙

          單個圖標的各元素之間要有呼吸感,需要適當的留白,如果描邊過大,整個條看起來感覺像糊成一團或臃腫不堪,如果存在類似問題,可通過減小描邊值或降低圖標的復雜程度來解決。

          6大章節!圖標設計基礎知識全方位入門指南

          6. 使用 2 的倍數

          以偶數為單位的設計便于數據的計算(2 的倍數),例如正負形間距、描邊值等,在 iOS@2x 設計下,@1x 也不會出現小數點。在移動端設計中,最小的圖標為 24px,可被 2、3、4、6、8、12 整除,也是可以被整除最多的數值,因此,可靈活的等比縮放。

          6大章節!圖標設計基礎知識全方位入門指南

          7. 延展性

          即便做好了前面的一切,圖標設計工作也并未完成,需要做的是持續測試圖標的可用性,做好后續的完善與優化,沒有最好、只有更好,以確保上線后的效果和后續的迭代。


          圖標資源庫


          阿里巴巴矢量圖標庫: https://www.iconfont.cn/ ,90%以上常見的矢量圖標下載;

          6大章節!圖標設計基礎知識全方位入門指南

          飛書官方圖標庫: https://iconpark.oceanengine.com/official ,海量資源可在線修改,調整描邊、填充、單/雙/多色、端點后下載 SVG 格式圖標。

          6大章節!圖標設計基礎知識全方位入門指南

          雖然上述圖標資源基本能滿足我們的日常設計所需,但僅僅只能是作為參考而已,一味的圖方便、投機取巧只會毀了自己的動手、創新能力。


          結語


          圖標設計是一個非常龐大的版塊,且有很多個分支,例如:金剛區、標簽欄、應用圖標…等,每個分支都有自己的一套設計法則,我們需要在不斷的學習與創新中獲得更多經驗。一篇文章不足以道出圖標設計的精髓,但可以在不斷沉淀、相互探討、持續的學習中一起進步。


          作者:大漠飛鷹CYSJ

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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

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


          更多精彩文章:

          圖標定制設計之一:6大章節!圖標設計基礎知識全方位入門指南

          圖標定制設計之二:超全總結!金剛區圖標設計的 10 大風格

          圖標定制設計之三:想讓圖標更精致?先掌握這11個容易忽略的設計細節!

          圖標定制設計之四:學會SVG圖標的高級用法,界面適配效率翻一倍!

          圖標定制設計之五:研究微軟 Fluent 圖標規范后,我總結了這9個知識點!

          圖標定制設計之六:為什么別人的圖標設計又快又好?來看騰訊高手總結的知識點!

          圖標定制設計之七:客戶說B端圖標太普通沒新意,該怎么解決?

          圖標定制設計之八:從6個方面幫你快速掌握圖標設計規范

          圖標定制設計之九:不止畫圖標!5 個金剛區的交互設計思考










          圖標定制設計之二:超全總結!金剛區圖標設計的 10 大風格

          博博

          金剛區作為產品功能架構重要的組成部分,是設計師重點發揮的區域,也是風格切換最為活躍的。而金剛區圖標是最重要的表現對象,設計師在圖標設計上面耗費心力,出現了豐富多樣的視覺表現風格。

          體驗了眾多產品之后,黑馬哥為大家精選了金剛區圖標設計最突出的 10 個風格,通過這些案例帶給大家感官體驗層面的更多靈感啟發。


          晶白風格的扁平突破


          晶白風格是通過白色質感來實現的,通過對圖標元素進行透明度變化、投影、內陰影、外發光等進行設計,使得更有層次感。

          相較于扁平化的圖標設計來說,晶白風格更有層次感和質感,作為金剛區圖標設計運用非常普遍。除了通過白色不透明度漸變來實現以外,也會隨著背景或者環境色的變化融入色彩渲染,呈現出更豐富的設計細節。

          晶白風格圖標就是通過兩端白色漸變,配合兩端顏色不透明度來進行深淺控制,也可以通過內陰影和外發光等來增強質感。眾多設計軟件都可以實現,靈活性非常高。

          超全總結!金剛區圖標設計的 10 大風格


          磨砂玻璃質感的運用


          磨砂玻璃質感的設計表現是近些年較為流行的設計趨勢,被廣泛運用到視覺設計的眾多領域。在 UI 場景中作為視覺感強化被普遍應用,其中在圖標設計上的表現尤為突出,呈現出了眾多的優秀案例。

          金剛區作為產品架構中的重要組成部分,也是更新較為活躍的部分,對于視覺感的要求非常重要。磨砂玻璃質感的圖標很多產品都會階段性使用,也是因為這一類風格具有典型的特點和視覺張力,能夠形成比較大的視覺差異,帶給用戶不錯的感官體驗。

          磨砂玻璃質感圖標可以通過 Sketch、Figma 等軟件的背景模糊功能實現;如果是 PS 和 AI 等沒有背景模糊功能的軟件,則可以通過模糊度結合剪切蒙版來實現。實現的方法很多,大家可以多多嘗試,這是一類比較容易掌握的圖標風格。

          超全總結!金剛區圖標設計的 10 大風格


          強化圖標微質感的深入


          圖標設計從寫實到扁平,再到微質感,都在不同的時期進行改變,通過風格的優化避免用戶的視覺疲勞。寫實類圖標視覺疲勞度較大,在年輕化的趨勢中顯得過于繁瑣,而介于寫實和扁平之間的微質感被深入探索。

          微質感的深入可以使得圖標風格突出,質感和層次感強化了圖標的立體空間感,在整個界面中可以形成視覺差異??梢泽w現出模塊的重要性,也是圖標設計感體現的一種方向。

          通過漸變色、不透明度漸變、投影、內陰影等形成層次變化和光影效果,多圖層刻畫來強化圖標質感和層次感。

          超全總結!金剛區圖標設計的 10 大風格


          2.5D 風格的巧妙結合


          2.5D 也稱之為偽三維,在前兩年非常流行,作為插畫風格延伸出來的,當時 2.5D 插畫被普遍運用到眾多領域。把一個獨立元素作為原子,通過原子的數量分布形成 2.5D 場景。

          將 2.5D 風格結合到圖標設計中,可以使得圖標更容易形成立體感,設計師不會受制于透視基礎的薄弱。無論是 C 端還是 B 端場景中的金剛區圖標都比較適合,很容易基于簡單的立體造型上設計出豐富的變化。比如結合玻璃質感、微動效或者其他設計趨勢均可,設計的駕馭度很高。

          2.5D 風格的圖標很容易掌握,只要繪制好基礎原子部分,就可以演變形成各式各樣的 2.5D 造型??梢酝ㄟ^ AI 軟件的 3D 功能輕松繪制,大部分場景都是基于立方體、圓柱體等基礎造型進行變形。

          超全總結!金剛區圖標設計的 10 大風格


          三維的立體感強化


          三維類的圖標設計相較于 2.5D 風格來說,空間感和透視角度更加深入,光影的變化更加豐富。圖標設計中的三維立體感強化,對于設計師的要求更高,掌握一個三維軟件需要一定的學習成本。

          隨著 C4D 等三維軟件的走熱,掀起了一股學習熱潮,被運用到金剛區圖標設計中,帶來的視覺效果也是非常不錯的。較強的空間立體感和光影效果,在界面中的視覺呈現尤為突出,也能帶給用戶更好的感官體驗。

          超全總結!金剛區圖標設計的 10 大風格


          插畫風格的簡化融入


          隨著用戶對于感官體驗的升級,風格特征的差異化體驗至關重要,而插畫風格的融入可以提升圖標設計的特征感。

          插畫風格運用到圖標設計中,需要做簡化處理,可以是插畫的局部元素或者簡化后的小場景插畫。風格多樣的插畫風格也會延續到圖標中,不僅可以使得圖標具備差異化的視覺效果,也能烘托出整體設計的質量。

          通常矢量風格的插畫類圖標比較常用,由于圖標占比限制,不合適表現特別繁瑣的插畫風格??梢允俏鼍暗牟瀹嫳憩F,或者是局部元素的插畫表達,這一類圖標風格將會在未來被廣泛運用,以此來提高圖標設計的視覺差異化表達。

          超全總結!金剛區圖標設計的 10 大風格


          立足于品牌的圖標設計


          立足于品牌做設計,這是設計師需要深入探索的方向,而金剛區圖標設計亦是如此。品牌基因融入到圖標設計中,可以輔助突出產品的品牌感,也能形成設計表達的差異化。

          品牌基因化的圖標設計具備一定的特征性,也是視覺差異化的一種形式。通常的做法有將品牌色全部融入圖標中,或者品牌色作為圖標配色點綴;也可以提取品牌 LOGO 輔助圖形形成基因圖形,融入到圖標造型設計中;也有結合吉祥物來突出品牌感的,融入吉祥物造型、局部圖形、輪廓圖形等;如果圖形角度無法提煉,也有提取品牌文化、服務特征、用戶群體特征、行業特征等,從中提煉關聯性的圖形融入圖標設計中,以此來強化品牌感。

          品牌作為設計的思考起點,不僅可以輸出差異化的設計作品,也能串聯起整個項目設計的規范。

          超全總結!金剛區圖標設計的 10 大風格


          造型疊加豐富色彩搭配


          如果覺得質感一類圖標表現力比較繁瑣,但是又不想只是簡單的線性或者面性圖標,造型疊加和配色疊加形成的圖標風格算是介于兩者之間的存在。

          通過圖形之間疊加豐富圖標造型,疊加部分配色的調節豐富圖標色彩搭配,形成的圖標風格比較年輕化。視覺效果也是深受年輕用戶的喜歡,帶來不錯的感官體驗。

          這一類風格的圖標可以通過布爾運算設計圖形部分,顏色的疊加效果可以通過圖層樣式實現,也有一些是圖形分割之后進行分別著色的。通常疊加部分的顏色會往更深的方向延伸,大家可以嘗試不同的形式去進行配色,選擇符合主題的圖標配色效果。

          超全總結!金剛區圖標設計的 10 大風格


          動效圖標強化局部差異


          微動效運用到圖標設計中尤為普及,特別是在金剛區模塊,可以作為突出功能的強化。動效圖標已經成為一種獨特的表現力,相較于靜態來說更有吸引力,也能帶給用戶更加趣味性的感官體驗。

          在金剛區模塊中,動效圖標通常是用于區別特殊功能,或者需要重點突出的服務或者主題活動等。不改變整體圖標的風格,只是動態和靜態的區分,需要個別做動效,形成表現力的差異才能達到重點突出的目的。

          作為設計師來說,動效也是需要掌握的基礎技能,可以提高我們的設計表現力,也能將交互動作表達得更清楚。

          作者:黑馬青年

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

          圖標定制設計之一:6大章節!圖標設計基礎知識全方位入門指南

          圖標定制設計之二:超全總結!金剛區圖標設計的 10 大風格

          圖標定制設計之三:想讓圖標更精致?先掌握這11個容易忽略的設計細節!

          圖標定制設計之四:學會SVG圖標的高級用法,界面適配效率翻一倍!

          圖標定制設計之五:研究微軟 Fluent 圖標規范后,我總結了這9個知識點!

          圖標定制設計之六:為什么別人的圖標設計又快又好?來看騰訊高手總結的知識點!

          圖標定制設計之七:客戶說B端圖標太普通沒新意,該怎么解決?

          圖標定制設計之八:從6個方面幫你快速掌握圖標設計規范

          圖標定制設計之九:不止畫圖標!5 個金剛區的交互設計思考





          圖標定制設計之三:想讓圖標更精致?先掌握這11個容易忽略的設計細節!

          博博

          大家好,這里是設計夾,今天為大家分享的是「圖標設計細節」。圖標在頁面中的尺寸很小,卻包含著很多細節。作為通用的視覺化語言,把握住其中的設計細節至關重要。

          這次總結一下圖標設計的屬性以及在圖標設計中,很重要但容易被忽略的知識點。

          在 UI 設計中,圖標主要有兩大類:一類是 APP 啟動圖標,每個 APP 獨一份;另一類是系統 icon,搭配文字,方便用戶快速理解信息,也是這篇文章重點講解的內容。

          想讓圖標更精致?先掌握這11個容易忽略的設計細節!


          風格


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

          1. 線形/面性:最基本也是做常用的風格,廣泛用在頁面設計中。
          2. 彩色:通常用于反饋用戶的操作或者增加用戶的注意力。
          3. 3D/寫實:當頁面中的某個內容需要引起用戶高度注意時使用,一下抓住用戶的視線。

          想讓圖標更精致?先掌握這11個容易忽略的設計細節!

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

          重量


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

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

          想讓圖標更精致?先掌握這11個容易忽略的設計細節!


          屬性


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

          想讓圖標更精致?先掌握這11個容易忽略的設計細節!

          1. 描邊粗細:手機上常用到的描邊粗細有 2px、3px、4px。2px 的看起來會顯得更加精致,4px 的描邊視覺較重,可以用在優先級較高的區域作為功能性圖標,。
          2. 端點/節點:圖標的端點有平頭、圓頭和方頭,圖標的節點有斜接連接、圓角連接、斜角連接,具體使用哪種樣式要根據頁面的情況統一設置。
          3. 圓角半徑:方形的圖標邊角過于鋒利,用戶有時候看起來會不舒服,圓角圖標更圓滑,相對來說更容易讓用戶接受。雖然圓角用的更普遍,但具體使用哪種,還是要考慮頁面的整體風格再決定。


          網格


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

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

          想讓圖標更精致?先掌握這11個容易忽略的設計細節!


          視覺校正


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

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

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

          想讓圖標更精致?先掌握這11個容易忽略的設計細節!


          角度


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

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

          想讓圖標更精致?先掌握這11個容易忽略的設計細節!


          比例


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

          想讓圖標更精致?先掌握這11個容易忽略的設計細節!


          清晰


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

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

          想讓圖標更精致?先掌握這11個容易忽略的設計細節!


          細節


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

          想讓圖標更精致?先掌握這11個容易忽略的設計細節!


          一致性


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

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

          想讓圖標更精致?先掌握這11個容易忽略的設計細節!


          熟悉感


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

          想讓圖標更精致?先掌握這11個容易忽略的設計細節!


          最后


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

          作者:Clippp

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          更多精彩文章:

          圖標定制設計之一:6大章節!圖標設計基礎知識全方位入門指南

          圖標定制設計之二:超全總結!金剛區圖標設計的 10 大風格

          圖標定制設計之三:想讓圖標更精致?先掌握這11個容易忽略的設計細節!

          圖標定制設計之四:學會SVG圖標的高級用法,界面適配效率翻一倍!

          圖標定制設計之五:研究微軟 Fluent 圖標規范后,我總結了這9個知識點!

          圖標定制設計之六:為什么別人的圖標設計又快又好?來看騰訊高手總結的知識點!

          圖標定制設計之七:客戶說B端圖標太普通沒新意,該怎么解決?

          圖標定制設計之八:從6個方面幫你快速掌握圖標設計規范

          圖標定制設計之九:不止畫圖標!5 個金剛區的交互設計思考





          手機及小程序界面設計之一:讓設計更有說服力的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?來看滴滴出行的實戰案例復盤!












          日歷

          鏈接

          個人資料

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

          存檔

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