欧美成人午夜无码A片秀色直播,欧美疯狂性受xxxxx另类,人妻半推半就精油按摩的注意事项 ,国产AV永久精品无码

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

在大數(shù)據(jù)時代，數(shù)字化轉(zhuǎn)型已經(jīng)成為行業(yè)迫切的需求。2016-2018年金融、醫(yī)療、政府、安全等行業(yè)在大數(shù)據(jù)方向上的投入持續(xù)增加，大數(shù)據(jù)可視化的需求呈現(xiàn)爆發(fā)式增長，相關(guān)產(chǎn)品也紛紛推出：阿里 DataV 的「雙十一的天貓可視化大屏」、360的數(shù)博會企業(yè)安全大屏、帆軟的 BI系統(tǒng)。面對井噴式的市場需求和部門業(yè)務(wù)在 To G、To B 的拓展需求，需要快速儲備大數(shù)據(jù)可視化的能力，作為一個 To C 的設(shè)計團隊面臨的挑戰(zhàn)和責(zé)任都是巨大的。

（編者注：由于本文動圖太大，將近100M，為了不影響移動端讀者的閱讀體驗，本文圖片都是靜態(tài)截圖，動圖文章鏈接戳：https://docs.qq.com/doc）

一、項目背景

在過去一年中，潘洛斯（Penrose）團隊參與了「靈鯤」態(tài)勢感知系統(tǒng)、「麒麟」系統(tǒng)、「鷹眼」反電話詐騙系統(tǒng)等14個大數(shù)據(jù)可視化產(chǎn)品的設(shè)計。隨著產(chǎn)品不斷的探索和迭代，積累了一些行之有效的大數(shù)據(jù)可視化設(shè)計的心得和方法。基于「靈鯤」這個案例，分享一下我們在大數(shù)據(jù)可視化方向的設(shè)計和思考，希望能夠給對大數(shù)據(jù)可視化感興趣的同學(xué)提供一些思路。

「靈鯤」是 MIG 安全云部門與潘洛斯（Penrose）團隊合作的，基于潘洛斯大數(shù)據(jù)可視化引擎衍生出的一款金融風(fēng)險監(jiān)控可視化產(chǎn)品。應(yīng)北京與深圳金融辦的需求，搭建靈鯤金融風(fēng)險態(tài)勢感知系統(tǒng)，實現(xiàn)事中風(fēng)險控制，減少網(wǎng)絡(luò)欺詐損失。

著手設(shè)計之前，我們需要了解：大數(shù)據(jù)市場規(guī)模和各行業(yè)投入有多大， 政企客戶的大數(shù)據(jù)可視化產(chǎn)品的痛點是什么？對比深耕多年的競品，我們設(shè)計的突破口在哪？——挖掘我們的機遇和發(fā)力點。

二、我們的客戶，目標(biāo)群體

數(shù)據(jù)顯示，2017年中國大數(shù)據(jù)產(chǎn)業(yè)規(guī)模為4700億元。隨著一系列政策的出臺，大數(shù)據(jù)國家戰(zhàn)略正在加速落地，大數(shù)據(jù)行業(yè)將持續(xù)增長，預(yù)計2018年中國大數(shù)據(jù)產(chǎn)業(yè)規(guī)模將達到6200億元，增幅達32%。需求層面，預(yù)計2020年大數(shù)據(jù)應(yīng)用市場需求中，僅政府需求就占比35%，另外包括醫(yī)療、交通、金融等多個行業(yè)在大數(shù)據(jù)和信息化建設(shè)投入也將持續(xù)增加。

除了旺盛的需求以外，我們還注意到很多政企內(nèi)部數(shù)據(jù)基礎(chǔ)很好，以宜昌為例，宜昌智慧辦匯集了來自32個部門、60個系統(tǒng)的大量詳盡的實施城市數(shù)據(jù)。與這些政企單位合作，易形成行業(yè)燈塔，便于規(guī)模復(fù)制。另外，針對大數(shù)據(jù)可視化，目前政企已不滿足于「面子工程」，更多的希望大數(shù)據(jù)可視化與 AI 結(jié)合，呈現(xiàn)更復(fù)雜多樣的數(shù)據(jù)，以輔助決策。

基于以上的市場潛在規(guī)模的考察和典型客戶研究，在進行「靈鯤」產(chǎn)品能力規(guī)劃時，我們主要考慮以下三類使用場景： 政府機構(gòu)決策、展會展臺及參觀視察。

在金融局等相關(guān)政府機構(gòu)的日常工作中，決策層和相關(guān)工作人員會基于實時金融平臺數(shù)據(jù)，針對日常事務(wù)或緊急事件進行決策管理，監(jiān)控大廳也就應(yīng)運而生。基于這種工作方式，我們可以發(fā)現(xiàn)潘洛斯的產(chǎn)品特性非常契合監(jiān)控大廳的使用場景。在監(jiān)控大廳中，用戶是通過兩種不同的信息界面進行工作的，分別是綜合數(shù)據(jù)可視化大屏（總屏）以及工作人員獨立使用的電腦屏幕（分屏）。其中，在總屏上，呈現(xiàn)的內(nèi)容通常是一些對于決策者來說至關(guān)重要的信息：正在發(fā)生的事件的狀態(tài)和可能趨勢（發(fā)生了什么）、值得注意的風(fēng)險（需要團隊做什么）以及風(fēng)險的處理進度（團隊做的怎么樣）；而在分屏上，主要為工作人員提供數(shù)據(jù)分析及風(fēng)險事件處理功能，幫助團隊對事件迅速作出響應(yīng)，協(xié)作。

不同于工作場景，靈鯤產(chǎn)品在展會中展臺的主要受眾是參會人士，除了一般民眾外，更有價值的觀眾主要來自于媒體和潛在客戶等。所以在這個場景中展示的內(nèi)容與實際工作中的數(shù)據(jù)可視化內(nèi)容有一定的區(qū)別，更多的是對產(chǎn)品能力的展示、產(chǎn)品的宣傳以及社會價值的呈現(xiàn)。如何直觀的呈現(xiàn)產(chǎn)品的能力，并使觀眾快速獲得有價值的信息并留下深刻印象非常重要。這也決定了在這個場景中，用戶不僅包括觀眾，也包括演講者。我們需要考慮如何通過控制端讓講演者而流暢的完成產(chǎn)品介紹。

在金融局等政府機構(gòu)，經(jīng)常會有上級領(lǐng)導(dǎo)視察參觀的接待活動。這些來訪的貴賓往往希望了解關(guān)于機構(gòu)更全面和具體的信息，包括但不限于工作流程、工作成績等，所以我們認(rèn)為這個場景綜合了以上兩種場景的主要特點。這里的用戶包括來訪人員，演示人員以及工作人員，展示的內(nèi)容也往往不局限于金融風(fēng)險大數(shù)據(jù)的可視化，還會包括工作方式和流程本身。

三、行業(yè)競品對比，反觀自身發(fā)力點

通過對阿里 DataV，AntV、360、帆軟的大數(shù)據(jù)可視化產(chǎn)品的體驗，我們從產(chǎn)品呈現(xiàn)、產(chǎn)品體驗、產(chǎn)品技術(shù)、部署方式和商業(yè)模式幾個維度的橫向?qū)Ρ取０⒗锏募夹g(shù)對可視化效果的局限性很大，優(yōu)點是產(chǎn)品實現(xiàn)模板化、系統(tǒng)實時可交互，用戶可以快速搭建自己的可視化產(chǎn)品；360產(chǎn)品可視化呈現(xiàn)3D化，數(shù)據(jù)呈現(xiàn)效果和數(shù)據(jù)感知度較2D更優(yōu)，但是系統(tǒng)非實時可交互，而且搭建周期長，成本較高；帆軟的可視化是傳統(tǒng)報表型，可視化效果呈現(xiàn)缺乏競爭力。

經(jīng)過對比，我們不難發(fā)現(xiàn)3D化數(shù)據(jù)呈現(xiàn)能力和數(shù)據(jù)感知度是最高的。但是局限于目前的技術(shù)，項目成本高、研發(fā)周期長、難以滿足業(yè)務(wù)的發(fā)展速度。

四、我們的機遇和挑戰(zhàn)

基于市場需求和競品分析，我們從以下三個方面分別分析了產(chǎn)品的機會和突破點：

• 可視化：數(shù)據(jù)和場景的呈現(xiàn)3D化，滿足更多維度的數(shù)據(jù)呈現(xiàn)，支持云+本地實時大數(shù)據(jù)呈現(xiàn)能力；
• 產(chǎn)品化：場景、組件、數(shù)據(jù)、圖表全部實現(xiàn)可云端動態(tài)更新和配置的模塊化，降低維護成本、提高服用率、縮短項目周期，無縫打包接入業(yè)務(wù)數(shù)據(jù)，提供豐富可自定義的可擴展接口；
• 大數(shù)據(jù)+AI：基于公司多領(lǐng)域多業(yè)務(wù)線的大數(shù)據(jù)融合以及 AI 能力提供豐富的基于時間、空間、數(shù)據(jù)的預(yù)測預(yù)警、統(tǒng)計表達能力。

1. 產(chǎn)品架構(gòu)規(guī)劃

基于對靈鯤態(tài)勢感知系統(tǒng)的使用場景、用戶需求以及機會點的考慮，我們規(guī)劃了未來產(chǎn)品的整體架構(gòu)，包括大屏端、云端、客戶管理端、小屏端以及虛屏端。大屏端基于本地端引擎進行大數(shù)據(jù)可視化呈現(xiàn)。客戶管理端包括報表和配置管理等工具，幫助用戶進行分析數(shù)據(jù)和策略管理。小屏端主要考慮操作控制和移動辦公等移動使用場景，提供大屏控制、移動審批、監(jiān)管、公眾號等功能。以上三個端由云端拉取和更新數(shù)據(jù)。虛屏則提供差異化的大數(shù)據(jù)可視化體驗，如增強現(xiàn)實等新奇有趣的玩法。由于大屏端在我們的規(guī)劃里是態(tài)勢感知系統(tǒng)的核心，且落地到合作方的模塊，以下分享的內(nèi)容將主要圍繞大屏的內(nèi)容設(shè)計展開，未來如果產(chǎn)品規(guī)劃中的其他模塊陸續(xù)上線，我們再做分享。

2. 大屏內(nèi)容設(shè)計

本地端引擎

早期我們設(shè)計的「麒麟」系統(tǒng)、「鷹眼」反電話詐騙系統(tǒng)在對外在大屏上展示主要是通過 web 端的方式去實現(xiàn)，雖然適配性尚可，但很多設(shè)計效果無法完全還原。我們也嘗試性用 webGL 和 three.js 的方式把設(shè)計效果再做進一步提升，但迫于研發(fā)周期和實際性能的壓力，最后也只能作罷。中期我們嘗試使用3D工具輸出視頻的方式做過一些過渡，輸出效果是沒有問題，但如果在展會上遇到媒體采訪，事情就會變得異常尷尬。媒體會詢問展示內(nèi)容的真實性，數(shù)據(jù)的實效性，甚至采訪的時候需要停留在某一個畫面，我方參會人員配合起來非常麻煩。后來我們也研究過競品使用的工具，例如 Ventuz，工具最終輸出的效果是不錯，但是界面、操作極其復(fù)雜，相關(guān)教程和素材在網(wǎng)絡(luò)上極少，授權(quán)費用也相當(dāng)昂貴。最終經(jīng)過我們內(nèi)部商討和研究，也請教了一些 IEG 專家的意見，決定使用游戲引擎作為本地端的顯示引擎。

Unity 和 Unreal 我們也糾結(jié)過許久，甚至 Unity 上我們也出過可交互的 Demo，但最終選擇了 Unreal 的原因主要有以下幾個點：

• 基于前面我們提到的產(chǎn)品架構(gòu)，我們的核心是在大屏，而大屏部署主要依賴 PC 做為計算平臺，相較于 Unity，Unreal 在 PC 端的技術(shù)積累要更加深厚，實時渲染出來的光影效果和質(zhì)感表現(xiàn)要更穩(wěn)定于 Unity 的輸出；
• Unreal 自帶藍圖-可視化腳本系統(tǒng)，這對于設(shè)計團隊出身，零代碼開發(fā)經(jīng)驗的我們來說上手、學(xué)習(xí)起來更快更方便；
• 線上有大量的視頻教程，各種插件和美術(shù)素材也比Unity更豐富；
• 有《蝙蝠俠:阿卡姆騎士》、《最終幻想15》和《絕地求生》這些3A沙盤游戲作為先例，Unreal 對于大規(guī)模的場景渲染能力是可被預(yù)期的，而 Unity 目前還沒有可以拿得出手的案例。

色彩基調(diào)

為了打造靈鯤產(chǎn)品的可視化，在競品中脫穎而出，我們從產(chǎn)品功能、用戶、愿景三個維度發(fā)散，提煉出設(shè)計指南的關(guān)鍵詞：智能、直觀、未來，塑造獨特的大數(shù)據(jù)可視化風(fēng)格體系。

靈鯤金融態(tài)勢感知系統(tǒng)內(nèi)容架構(gòu)分為數(shù)據(jù)維度和場景維度，數(shù)據(jù)是核心，場景是大數(shù)據(jù)呈現(xiàn)的承載體；場景使用具有金屬質(zhì)感的深青灰，符合理性的、冷靜的、智能化產(chǎn)品的個性；數(shù)據(jù)色彩使用透明、發(fā)光、具有未來感的高亮色，和場景形成強對比，使數(shù)據(jù)更為突顯、更具吸引力；為了強化客戶對于風(fēng)險的感知，通過顏色區(qū)分?jǐn)?shù)據(jù)的風(fēng)險等級，更直觀的傳達數(shù)據(jù)的含義。如：高風(fēng)險的使用紅色，紅色讓人聯(lián)想到危險、警報。

呈現(xiàn)方式

在現(xiàn)有的產(chǎn)品和傳統(tǒng)認(rèn)知中，大數(shù)據(jù)產(chǎn)品內(nèi)容是各種樣式的圖形和圖表，主要以平面為主。我們從游戲、科幻電影中收集了一輪大數(shù)據(jù)可視化內(nèi)容相關(guān)的案例，從視覺維度上看，主要有這幾個特點：一、具有很強的空間感，支持多種數(shù)據(jù)同屏呈現(xiàn)，可交叉分析對比，承載性強；二、高精度的模型和材質(zhì)，豐富的粒子、動效，更加貼近現(xiàn)實的光影呈現(xiàn)；三、互動性強，可交互，實時演算。

從大數(shù)據(jù)可視化的內(nèi)容維度上看，梳理的3D架構(gòu)，主要包括：數(shù)據(jù)維度>基礎(chǔ)建設(shè)>交通運輸>行政分區(qū)>自然條件。

數(shù)據(jù)維度層是最核心的部分，位于場景上方最突出的位置，能夠更清晰的展示風(fēng)險數(shù)據(jù)的分布、量級；行政區(qū)域和交通層是城市場景最基礎(chǔ)的數(shù)據(jù)維度，方便用戶進行區(qū)域的數(shù)據(jù)對比和分析；基礎(chǔ)建設(shè)層包括城市的建筑、標(biāo)志性建筑、照明、橋梁、等，還原城市獨特風(fēng)貌；通過突出城市的標(biāo)志性建筑，強化城市、區(qū)域的識別性，輔助數(shù)據(jù)傳達；自然條件層包括地形、河流、植被、展示真實的環(huán)境特征，用戶更有代入感。

△ 北京場景

△ 鳥瞰視角、漫游視角自由切換，滿足全局、街道、建筑的不同顆粒度的數(shù)據(jù)呈現(xiàn)，方便用戶進行縱向的數(shù)據(jù)對比。

△ 場景整體風(fēng)格圖

數(shù)據(jù)表現(xiàn)

靈鯤的3D數(shù)據(jù)樣式有柱狀圖和散點圖。如何把司空見慣的數(shù)據(jù)樣式，設(shè)計出產(chǎn)品的個性，是我們重點要解決的問題。為了體現(xiàn)大數(shù)據(jù)的力量感，使用科幻電影中的聚合能量、發(fā)光的能量石作為柱狀圖的主圖形；同時把數(shù)據(jù)采集、融合、分析的過程具象為動態(tài)粒子網(wǎng)絡(luò)，作為輔助圖形。數(shù)據(jù)圖形和結(jié)構(gòu)中都融合了品牌 DNA 的三角圖形，數(shù)據(jù)樣式更具有品牌的個性。

△ 柱狀圖

△ 散點圖

預(yù)見未來的功能創(chuàng)新

時間線：3D的維度基礎(chǔ)上，我們增加了時間的維度，通過拖動時間線查看不同時間點的數(shù)據(jù)的變化趨勢，由此對未來數(shù)據(jù)進行預(yù)測。為了強化用戶對于時間感知，設(shè)計了白天和晚上兩種風(fēng)格，白天和夜晚隨著時間變化而變化。

天氣系統(tǒng)：天氣是未來數(shù)據(jù)分析極其重要的一個因子，它會直接影響交通（例如人流、物流、航空）、醫(yī)療(例如疾病傳播、醫(yī)院就診）等領(lǐng)域。所以我們設(shè)計了通用的天氣系統(tǒng)組件，呈現(xiàn)實時天氣情況，以輔助用戶進行數(shù)據(jù)分析。

控制端：符合大屏使用場景和用戶操作習(xí)慣，同時小屏控制端支持更復(fù)雜更精準(zhǔn)的操作。

組件庫搭建

為了提升產(chǎn)品搭建的效率，降低了研發(fā)周期和成本，產(chǎn)品功能模塊實現(xiàn)了組件化，分為3D場景組件、3D數(shù)據(jù)組件、2D數(shù)據(jù)組件。任何一位設(shè)計師都可以根據(jù)產(chǎn)品需求，搭配組件模塊，快速搭建大數(shù)據(jù)可視化產(chǎn)品。

數(shù)據(jù)內(nèi)容的包裝

通過該產(chǎn)品，一方面能夠輔助金融局等政府機構(gòu)領(lǐng)導(dǎo)把控整體金融平臺風(fēng)險、輔助做出平臺整改指導(dǎo)決策意見，展示金融工作成績；另一方面體現(xiàn)出騰訊大數(shù)據(jù)能力和公司的社會責(zé)任；最后，通過從更長遠(yuǎn)的眼光去包裝產(chǎn)品，打造智慧監(jiān)管標(biāo)桿產(chǎn)品，從而推動與政府客戶更深入廣泛的合作。具體內(nèi)容通過以下兩條線進行組織：

橫線：各個監(jiān)管維度

靈鯤金融風(fēng)險態(tài)勢感知系統(tǒng)專注于呈現(xiàn)金融風(fēng)險數(shù)據(jù)的呈現(xiàn)，主要分為公司層面和用戶層面，綜合體現(xiàn)潛在的風(fēng)險趨勢和實際影響的范圍。除了靈鯤用于監(jiān)管金融數(shù)據(jù)，整個監(jiān)管平臺還負(fù)責(zé)展示包括政治、生態(tài)、電信、消費在內(nèi)的多個監(jiān)管維度，這些維度與金融監(jiān)管維度為同一個內(nèi)容層級。我們考慮到騰訊的大數(shù)據(jù)能力可以幫助更多城市綜合管理者了解整個網(wǎng)絡(luò)社會的全局性風(fēng)險，所以每個維度都是智慧監(jiān)管必不可少的一部分，并且每個維度之間的橫向交叉對比能夠使智慧監(jiān)管平臺發(fā)揮出更大的社會價值。

縱線：監(jiān)管顆粒度

靈鯤系統(tǒng)中觀眾可以從全局?jǐn)?shù)據(jù)一直下鉆到個體數(shù)據(jù)，實現(xiàn)不同顆粒度的監(jiān)管目的。

具體來講，全國的安全風(fēng)險最終是以加權(quán)平均后的指數(shù)形式體現(xiàn)出來；再到具體的省份和城市，內(nèi)容細(xì)化到具體風(fēng)險事件的發(fā)生情況，如電信安全監(jiān)管維度，呈現(xiàn)電信詐騙使用的偽基站的位置，以及發(fā)送詐騙短信的數(shù)量等；最后細(xì)化到城市中的機構(gòu)和建筑，呈現(xiàn)具體機構(gòu)的運行情況和具體高風(fēng)險企業(yè)所在建筑進行實時監(jiān)控。

3. 產(chǎn)品演示視頻

https://v.qq.com/x/page/d0742kep4k1.html

結(jié)語

潘洛斯團隊是基于 DNA 設(shè)計中心下的大數(shù)據(jù)可視化團隊，成員來自于 MIG 安全和醫(yī)療部門，早期專注于 To C 端的產(chǎn)品設(shè)計，過去一年里隨著公司戰(zhàn)略的變化和部門業(yè)務(wù)方向的變化，我們逐漸開始把產(chǎn)品設(shè)計的重心和思考放在了 To B、To G 領(lǐng)域，不斷做著嘗試和探索。以前做 To C 的時候我們關(guān)注的更多是 DAU、轉(zhuǎn)化率、日活、滿意度這些和產(chǎn)品體驗相關(guān)聯(lián)的指標(biāo)，滿足絕大多數(shù)互聯(lián)網(wǎng)用戶的訴求是我們首要去解決的問題?，F(xiàn)在做 To B、To G 領(lǐng)域的設(shè)計，我們更多思考的是如何包裝我們現(xiàn)有的業(yè)務(wù)能力，能夠通過更加簡單、直接、有效的方式觸達給我們的客戶，讓他們更容易理解像騰訊這樣擁有海量數(shù)據(jù)和算法能力的互聯(lián)網(wǎng)公司如何幫助他們進一步提升他們的業(yè)務(wù)效率和產(chǎn)出，給這個社會創(chuàng)造更多的價值，這也是騰訊多年來想要承擔(dān)的社會責(zé)任之一。

文章來源：優(yōu)設(shè)

藍藍設(shè)計( m.ieapo.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

2018年如自己所愿，終于有機會可以嘗試下數(shù)據(jù)大屏的可視化設(shè)計，但是想象總歸是美好的，新手上崗第一次總是那么不太如意，陌生而又熟悉著。在做過幾次嘗試后，自己又私下里翻閱了一些關(guān)于數(shù)據(jù)大屏方面的設(shè)計文章，好的設(shè)計圖片。有很多不足，也有很多剛開始做的時候沒有注意到的點，這次整理作品，也順便把大概的設(shè)計流程整理了一下。給自己的一個復(fù)盤總結(jié)，也是一次設(shè)計分享。

文章來源：UI中國

藍藍設(shè)計( m.ieapo.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

剛?cè)胄械男率衷O(shè)計師容易出現(xiàn)一個問題，接到需求就開始設(shè)計，最后出現(xiàn)的界面和原型幾乎一模一樣，唯一的區(qū)別就是上了色，加了圖片和圖標(biāo)，最后提交審核時老板反饋，“這個界面看上去太“平”了，你在這里加個背景色吧；這個圖標(biāo)太小，你再放大一點；這個位置你在加點裝飾……”。

這主要原因還是界面沒層次導(dǎo)致的，雖然老板對設(shè)計不太清楚，但是關(guān)于業(yè)務(wù)邏輯我們的設(shè)計稿是否表達清楚，重點是否突出這個他最清楚了。

那么如何才能提高界面層次呢？我們可以從兩個方面入手，在設(shè)計前我們需要考慮突出內(nèi)容層次的方法；在設(shè)計中需要考慮突出視覺層次的方法。

目錄

一、突出內(nèi)容層次的方法

• 將相關(guān)聯(lián)的元素進行組合

• 確認(rèn)內(nèi)容優(yōu)先級，將優(yōu)先級高的放在前面

• 確認(rèn)重要內(nèi)容，將其差異化設(shè)計

二、提高視覺層次的方法

• 利用線、面、留白將模塊進行分割

• 利用大小、投影、背景圖突出視覺層次

• 利用顏色對比提高視覺感受

• 利用文字對比提高界面的可閱讀性

  
  

  
  

一、突出內(nèi)容層次的方法

當(dāng)一個界面信息量比較大時，層次感好的界面用戶進來能快速的獲得想要的信息，同時最終達到產(chǎn)品的目的。而層次感差的界面用戶看半天也不知道要做什么，看一會也就走了。因此良好的視覺層級是界面成功的關(guān)鍵。在設(shè)計前我們需要將相關(guān)聯(lián)的元素進行組合；確認(rèn)內(nèi)容優(yōu)先級，將優(yōu)先級高的放在前面；確認(rèn)重要內(nèi)容，并將其差異化設(shè)計。

1.將相關(guān)聯(lián)的元素進行組合

在設(shè)計前，產(chǎn)品原型圖已經(jīng)將我們的元素進行了分類組合，但是他們更多的是考慮邏輯、功能上的層次，而如何有一個清晰的內(nèi)容層次呢？設(shè)計師可以利用《格式塔心理學(xué)》中的接近性原則將相關(guān)聯(lián)的元素組合在一起，不相關(guān)的拉開距離，同時形成一定的規(guī)律和節(jié)奏，這樣會讓用戶閱讀起來更輕松。

            

需要注意的是，界面中的間距需要滿足一定的規(guī)律和節(jié)奏，比如模塊之間的間距大于標(biāo)題到內(nèi)容的間距；在內(nèi)容中不相關(guān)聯(lián)的內(nèi)容間距大于相關(guān)聯(lián)的間距，如下圖所示。              

?     

天貓個人主頁的個人信息區(qū)排在最前面就是遵循了用戶的瀏覽習(xí)慣；其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內(nèi)容；最后是我的福利排在了第三位這是產(chǎn)品想給用戶看的內(nèi)容。

京東金融的我的頁面用戶的資產(chǎn)信息排在最前面，他首先是遵循了用戶的瀏覽習(xí)慣，同時也是用戶想要看到的內(nèi)容，其次是功能入口區(qū)排在了第二的位置這是產(chǎn)品想給用戶看的內(nèi)容，最后是福利大禮包排在第三位這也是產(chǎn)品想個用戶看的內(nèi)容。

2.確認(rèn)內(nèi)容優(yōu)先級，將優(yōu)先級高的放在前面

將相關(guān)聯(lián)的信息整理之后就需要確認(rèn)模塊的優(yōu)先級了，由于用戶的瀏覽順序是自上而下的，因此我們需要將優(yōu)先級高的模塊放到前面。

那么優(yōu)先級如何判斷呢？大家可以從三個方面去考慮，第一是遵循用戶的瀏覽習(xí)慣；第二是用戶想看的內(nèi)容；第三是產(chǎn)品想要用戶看的內(nèi)容，如下圖所示。

            

天貓個人主頁的個人信息區(qū)排在最前面就是遵循了用戶的瀏覽習(xí)慣；其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內(nèi)容；最后是我的福利排在了第三位這是產(chǎn)品想給用戶看的內(nèi)容。

京東金融的我的頁面用戶的資產(chǎn)信息排在最前面，他首先是遵循了用戶的瀏覽習(xí)慣，同時也是用戶想要看到的內(nèi)容，其次是功能入口區(qū)排在了第二的位置這是產(chǎn)品想給用戶看的內(nèi)容，最后是福利大禮包排在第三位這也是產(chǎn)品想個用戶看的內(nèi)容。

3.確認(rèn)重要內(nèi)容，將其差異化設(shè)計

在設(shè)計時我們需要知道，優(yōu)先級高的模塊不一定重要程度就高，因此我們還需要確認(rèn)模塊的重要層級，同時利用背景、布局等方式進行差異化設(shè)計，用起用戶注意，如下圖所示。

            

網(wǎng)易嚴(yán)選中的新人專享禮和品牌制造商直供就采用了差異化設(shè)計，職工類模塊采用的是普通的宮格式布局，新人專享禮采用添加背景的方式，加深了模塊的縱深感，對比其他模塊更加突出。

大麥網(wǎng)中的特色模塊和其他模塊也采用了差異化設(shè)計，特色模塊采用拼圖的方式設(shè)計，其他模塊采用列表的方式進行設(shè)計，用戶進入頁面首先就能夠看到這個模塊，提高用戶接受信息的效率。

土豆視頻個人主頁的列表部分也采用了差異化設(shè)計，消息提醒、我的收藏、觀看記錄、我的緩存這四個用戶常用的功能采用宮格式布局，其他不常用的我的會員、客戶與反饋、設(shè)置采用列表式結(jié)構(gòu)，這樣也能夠提高用戶操作速度。

二、提高視覺層次的方法

當(dāng)然內(nèi)容層級確定了顯然不夠，我們還需要考慮突出界面的視覺層次，這樣用戶才能夠清晰舒適的瀏覽我們的界面。那么提高視覺層次的方法有哪些呢？在設(shè)計中，我們可以利用線、面、留白將模塊進行分割；利用大小、投影、背景圖等突出視覺層次；利用顏色對比提高視覺感受；利用文字對比提高界面的可閱讀性。

1.利用線、面、留白將模塊進行分割

大家記得在設(shè)計前我們已經(jīng)對界面中相關(guān)聯(lián)的元素進行了組合，組合之后就可以利用線、面、留白的方式，將不相關(guān)聯(lián)的元素進行分割，提高界面的視覺層次，從而提高用戶的瀏覽和操作效率。

            

線分割：是最為基礎(chǔ)的分割方式，其優(yōu)勢是占用空間小、分割感弱，多用于列表、Feed流中。需要注意的是，分割線顏色設(shè)置需要非常淺，避免模塊之間強烈的分割感，比如橘子娛樂的列表就是采用若隱若現(xiàn)的線，讓列表中的內(nèi)容更規(guī)整。

面分割：也可叫背景欄分割，其優(yōu)勢是占用空間小、可操作性高，同時能夠更好的區(qū)分不同模塊之間的關(guān)系，多用于模塊和模塊之間的分割，比如轉(zhuǎn)轉(zhuǎn)個人主頁的模塊采用面分割瀏覽性更強。

留白分割：是iOS11發(fā)布之后興起的以留白或間距的方式進行分割，其優(yōu)勢是無強烈的分割感，界面清爽，多用于比較有規(guī)律或以大圖為主的模塊之間的分割，比如轉(zhuǎn)轉(zhuǎn)主頁下方的賣二手還錢、買實惠好貨等，其內(nèi)容部分都較為規(guī)則，采用該方式較為合適。

2.利用投影、大小、背景圖突出視覺層次

為了突出界面的視覺層次，我們還可以通過投影、大小、布局等增加界面的對比，從而突出重要信息。

            

投影：是界面對比較常用的一種方式，其優(yōu)勢是提升界面的空間感，改變視覺次序，通過投影大小的變化還可營造不同的空間關(guān)系，多用于卡片風(fēng)格的設(shè)計中，比如Keep均是采用卡片風(fēng)格的設(shè)計，添加投影后讓界面視覺層次更突出了。

大?。?/strong>是大眾最為熟知的對比方式，其優(yōu)勢是通過大小對比能夠很快的拉開視覺層次，同時能夠很好的引導(dǎo)用戶瀏覽路徑，比如ofo黃色的大按鈕遠(yuǎn)遠(yuǎn)都能看見，該頁面就一個目的掃碼用車。

背景圖：往往不如投影和大小常用，但是它的使用可以將模塊從其他樣式中年凸現(xiàn)出來，多用于banner、推薦等重要模塊中，比如美圖秀秀的推薦模塊，該模塊可以說是美圖的核心模塊。

3.利用顏色對比提高視覺感受

顏色是最容易感知到的對比方式，通過顏色我們可以明確哪些是重要信息，在使用中我們可以通過色相、明暗、飽和度上進行對比，其多用在按鈕、重要信息、導(dǎo)航、背景板中。

            

自如首頁上的租房、服務(wù)、旅行采用對比色進行強調(diào)對比，進入頁面用戶就能夠清楚這三塊是是界面的核心功能，同時引導(dǎo)用戶關(guān)注右側(cè)的具體服務(wù)信息。

淘票票首頁中的按鈕、引導(dǎo)提示、標(biāo)簽欄選中均用了紅色進行強調(diào)對比，很容易引起用戶的注意，讓用戶看一眼就知道如何操作。

招商銀行首頁中的話題PK采用對比色進行強調(diào)對比，很容易引起用戶操作的興趣。

4.利用文字對比提高界面的可閱讀性

文字的層次感往往和字體大小和明暗有關(guān)，其中字體大小是提高文字信息層級的重要手段，在文字排版中如果文字之間的層次不清晰，那么一定是大小的對比不夠，在UI中字體大小對比往往在4-8px較為適合，如下圖所示。

            

當(dāng)字體大小對比適合之后就需要通過通過字體的明暗突出主要信息，弱化次要信息，從而提高界面的可閱讀性，如下圖所示。

            

在UI設(shè)計中我們往往都設(shè)定了字體規(guī)范，這樣不僅能夠達到設(shè)計統(tǒng)一，同時也有很好的對比性，常用字號為40, 36, 32,28,24, 22(px)，比如優(yōu)酷的星球頁面，通過字體大小，顏色深淺的對比，讓用戶首先看到重要信息，弱化次要信息。

            

三、總結(jié)

在界面設(shè)計中為了降低用戶的理解成本，突出重點內(nèi)容，讓用戶使用起來舒適，就需要有個清晰的內(nèi)容層次和視覺層次。

在設(shè)計前我們需要考慮將相關(guān)聯(lián)的元素進行組合；確認(rèn)內(nèi)容優(yōu)先級，將優(yōu)先級高的放在前面；確認(rèn)重要內(nèi)容，將其差異化設(shè)計。

藍藍設(shè)計( m.ieapo.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。