表格淺談，多多指教
讓我們先來回顧一下表格的基本構(gòu)成，最上面的為表頭，橫為行，縱為列，內(nèi)容區(qū)每一組展示數(shù)據(jù)區(qū)域為單元格。
表格的設(shè)計，雖然看似簡單，但是作為用戶最常用的組件之一，我們需要對視覺和交互的精準把握，才能保證用戶在使用表格時更加。
這里我推薦表格的"四維自檢法“，對我們設(shè)計的表格是否合理，做出一個標準的判斷。
分別是：信息降噪、呼吸適中、易讀、詳情查看。
信息降噪：分別對表格內(nèi)容和視覺層面進行重要性梳理，剝離不重要的元素，使表格輕量化；
呼吸適中：保持內(nèi)容和元素之間合適的間距，使表格頁擁有一個好的呼吸感，將給用戶營造一個舒適的操作環(huán)境；
易讀：通過對需求內(nèi)容的解讀，對內(nèi)容形式加以分類辨別，做出可讀性最強的樣式；
詳情查看：b端系統(tǒng)往往伴隨著表格數(shù)據(jù)類目龐大的問題，通常會采用另一種形式去展示全部信息。
當表格的字段非常重要時，一定要將字段全部展示出來讓用戶更清晰的了解數(shù)據(jù)。
如果你的用戶只需要了解部分字段，那么全部展示是沒有必要的，只需在展示最重要的字段即可。
不同用戶想看的的信息側(cè)重不同，有時候我們無法準確判斷用戶看重哪些字段，還可以讓用戶自定義展示字段。
當我們?nèi)ピO(shè)計表格的時候，通常會發(fā)現(xiàn)表格需要承載的信息量是非常大的，有時候為了表現(xiàn)出字段的準確含義，在定義字段名稱時往往會非常的長。但是當這些字段同時出現(xiàn)在一個表格里時，過長的字段名稱，又會顯得冗余，讓本就不大的頁面空間更加雜亂。
所以當我們設(shè)計表格的時候，我們可以分析字段名稱，對字段名稱做精簡，看看是不是少一個字用戶就無法理解字段的含義。
當字段名稱過長，又必須展示，才能有效的理解字段含義時。我們可以定義一個專有名詞代替，并且在字段名稱后使用添加字段說明的形式，來對字段加以說明。
這樣一來用戶既可以清晰的理解字段含義，又可以在有限的頁面空間下獲取到更多的數(shù)據(jù)信息。
早期表格的設(shè)計，出發(fā)點主要以擬物形式，以最接近現(xiàn)實表格的樣式去設(shè)計。
但是隨著互聯(lián)網(wǎng)的普及度加深，極簡的表格設(shè)計，使界面更加輕盈，讓用戶更加專注于數(shù)據(jù)內(nèi)容。
去除縱向列的分割線，僅以淺色的橫向分割線區(qū)分行，但是要注意分割的顏色不能過于淺而缺乏辨識度，部分人群對顏色的辨識度會偏低，顯示器的硬件性能也會影響顏色的可辨識性。
表格設(shè)計中一定不要使用過多的顏色區(qū)做狀態(tài)或操作的區(qū)分，過多的顏色細分會使表格變得更加混亂，影響用戶體驗。
對狀態(tài)的區(qū)分，僅用輕量的顏色區(qū)分即可，操作欄保持主色按鈕色。
了解單元格的結(jié)構(gòu)，以及實現(xiàn)單元格的基本邏輯，有助于我們更好的去把控我們的設(shè)計。
單元格內(nèi)的可控尺寸包含：單元格高度、文字字號、文字/段落行高、文字上下間距。
我們基于視覺呼吸感，賦予各個元素合適的尺寸，我在這里給出一套參考方案：
文字字號 = N
文字行高 = 1.5N
上下間距 = 1.2N
單元格高度 = 內(nèi)容高度 + 上間距 +下間距
首先我們要了解列的兩種類型，第一種是定寬列，第二種是自適應(yīng)列。
a.定寬列
顧名思義就是它的寬度是固定的，比如：第一列我們設(shè)置寬度為200px，第二列我們設(shè)置為300px，五六七列分別設(shè)為100px，那么我們這個列表就的寬度就等于200 + 300 + 100*3 = 1100px，在任何分辨率尺寸下你的這個列表都會保持這個寬度不變。
b.自適應(yīng)列
就是列會隨著分辨率變化而產(chǎn)生寬度的變化，比如：列表有五列，我們定義列表的寬度為界面寬度的50%，假定界面寬度為1200px，那么列表寬度就為600px，而每一列的寬度則為120px。此時我們將界面的寬度縮小到600px時，那么列表的寬度就為300px，而每一列的寬度則為60px。
在實際設(shè)計案例中，我們往往會面臨由于每一列的內(nèi)容不同，所需要的寬度也就不同，我們希望在列不多時可以保持寬度自適應(yīng)，但是如果每一列都做成自適應(yīng)列的話，內(nèi)容多的列無法展示全內(nèi)容，內(nèi)容少的列空間又會很大。
所以，固定列 + 自適應(yīng)列的綜合運用，可以讓我們更好的實現(xiàn)我們想要的設(shè)計方案。
c.列的結(jié)構(gòu)
然后，我們一起來了解列的結(jié)構(gòu)。每一列分為內(nèi)容區(qū)和左右間距區(qū)，在固定列里面內(nèi)容區(qū)和左右間距區(qū)都是保持不變的。但是在自適應(yīng)列卻不同，它的內(nèi)容區(qū)是隨界面分辨率變化而變化的，左右間距區(qū)的寬度是保持不變的(在代碼里間距區(qū)被叫做Padding)。
d.固定列
當表格字段數(shù)量不確定時，通常我們會為自定義列的內(nèi)容區(qū)寫一個最小值(min-width),以確保字段很少時可以自適應(yīng)寬度，字段較多時仍然能保證完整展示表格數(shù)據(jù)，不影響對內(nèi)容的閱讀。
當表格的列過多又必須全部展示時，固定必需固定的列(如姓名、任務(wù)名稱、操作項等)，其他字段橫向滾動。
基于人的慣性瀏覽順序，設(shè)計每列合理的對齊方式，能夠輔助用戶更的完成工作。
a.標題和內(nèi)容：一般采用左對齊，更的瀏覽順序；
b.有長短不一的數(shù)字時(序號除外)：右對齊，方便比較 ;
c.操作項一般放在尾列：右對齊；
從心理學(xué)的角度講，人對未知事物會產(chǎn)出恐懼情緒。我們在設(shè)計表格的時候，要考慮到表格的各種展示情況，非特殊情況不出現(xiàn)單元格空白。
沒有數(shù)量用“0”表示，沒有該項內(nèi)容用“-”表示。
表格是一種可以承載大量數(shù)據(jù)的組件，當數(shù)據(jù)行數(shù)很多時我們通常會選擇分頁器，使用分頁器有哪些優(yōu)點：
a.快速查看：通過分頁數(shù)據(jù)加載緩解服務(wù)器壓力；
b.清晰易讀：由于界面的空間是有限的，通過分頁展示數(shù)據(jù)，有助于緩解用戶的閱讀壓力；
c.靈活便捷：如果客戶想在一頁展示很多數(shù)據(jù)，可以通過分頁器自行選擇，還可以了解到數(shù)據(jù)的總數(shù)目。
當界面空間有限、表格列數(shù)很多時，如果表格的操作項過多，會占用很多頁面空間，需要有選擇的展示，將低頻操作項收起，用點擊更多按鈕去觸發(fā)選擇。
如果是1.0的產(chǎn)品，我們可以和產(chǎn)品經(jīng)理溝通，分析每個功能按鈕的優(yōu)先級。
如果是上線的產(chǎn)品，我們還可以通過按鈕點擊PV(頁面成功訪問次數(shù))，來了解按鈕的使用頻率，做出按鈕優(yōu)化。
如果產(chǎn)品沒有特殊需求，那么默認最近創(chuàng)建的在最上面。
可以用帶有排序的表頭，讓用戶自定義排序。
如果表格的內(nèi)容項很多，我們通常會在表格上只展示部分重要數(shù)據(jù)，而其余數(shù)據(jù)放在詳情頁面展示。
作為詳情頁面的入口，通常會有兩種設(shè)計方式：
a.將詳情按鈕放在操作項里
b.將首行的名稱做成可點擊樣式，點擊跳轉(zhuǎn)至詳情
如果詳情內(nèi)容不多，沒有新開頁面的必要，我們可以采用展開行、彈窗、抽屜的形式，但是要注意盡量減少過多的樣式，給用戶增加疑惑感。
如果詳情的內(nèi)容很多，而且編輯的需求，建議采用新開頁的形式。
建議根據(jù)詳情頁信息量的多少，以此采用展開行、彈窗、抽屜、新開頁的形式。
數(shù)據(jù)過濾是表格頁很重要的組成部分，包含搜索、篩選、標簽頁。
這一部分的主要作用是幫助用戶，梳理表格數(shù)據(jù)信息，精準定位所需的數(shù)據(jù)項。
模糊搜索是指在用戶搜索意圖不明確時，搜索引擎將用戶的查詢與待檢索的內(nèi)容進行模糊匹配，找出與查詢相關(guān)的內(nèi)容。模糊搜索無法理解用戶的查詢意圖，返回的結(jié)果中可能包括了一大批用戶不想要的信息，所以在使用模糊搜索時一定要結(jié)合自己的實際場景，慎重使用。
優(yōu)點：只要有相關(guān)的內(nèi)容都會被檢索出來，減少了精準搜索帶了的記憶負擔
缺點：容易把相關(guān)的信息也帶出來，例如檢索手機號，把相關(guān)編碼也匹配出來
搜索是指用戶在搜索時，針對某一數(shù)據(jù)字段搜索，來查找所需要的數(shù)據(jù)。根據(jù)業(yè)務(wù)場景不同，我們會查找某一字段，或者是用標簽切換不同字段來查找。
優(yōu)點：搜索匹配精準度高
缺點：每次只能對單一條件進行搜索
篩選器主要是針對內(nèi)容較少的字段進行查找的一種方式， 通過篩選器的選擇可以快速定位所需的數(shù)據(jù)，取消用戶輸入的過程，提升查找效率。一般篩選有兩種形式，第一種是下拉篩選，第二種是平鋪式篩選。
下拉篩選就是將需要篩選的內(nèi)容放置于選擇器當中，通過點擊選擇器下拉，來選擇需要篩選的內(nèi)容。
優(yōu)點：空間利用率高，起到了很好的收納作用
缺點：無法直觀看到所有的篩選項
平鋪篩選就是將篩選項的內(nèi)容，直接展示于頁面之上，通過點擊選擇的方式直接進行篩選?；蛘呖梢酝ㄟ^自定義內(nèi)容的篩選。
優(yōu)點：操作效率高，篩選項一目了然，支持輸入更多篩選條件
缺點：空間利用率低，不適合選項太多的情況
當數(shù)據(jù)內(nèi)容需要的篩選類目過多時，如何合理的擺放，才能提高用戶的使用效率。
a.信息排序：基于用戶使用場景，以目標導(dǎo)向為依據(jù)，將高頻的篩選項排列到前面，低頻的篩選項置于后面
b.默認折疊低頻篩選項：當篩選項過多時，會極大的占用界面空間，使用戶在閱讀數(shù)據(jù)時產(chǎn)生非常不好的用戶體驗，通過展示高頻篩選項、隱藏低頻篩選項，將更好的提升用戶體驗。
c.所有篩選項都很低頻：以點擊高級篩選按鈕的形式觸發(fā)，將全部篩選項置于氣泡或者彈窗之中。
如何判定篩選項的使用頻率呢？
通常會有兩種方式：
第一種是給篩選項增加數(shù)據(jù)埋點，這樣一來就可以通過對用戶點擊行為的分析了解到篩選項的使用頻率；
第二種是用戶調(diào)研，通過問卷或者面談，了解到用戶的真實使用需求。
標簽頁又叫選項卡，在組件中我們通常叫Tabs，指的是分隔內(nèi)容上有關(guān)聯(lián)但屬于不同類別的數(shù)據(jù)集合。
在使用標簽頁時，有一點我們要特別注意，通常在B端設(shè)計中，我們會把標簽頁的位置定位在最常用的一個選項。
如果是訂單一類的分頁，我們還可以將數(shù)據(jù)條數(shù)，展示在標簽右側(cè)，用來幫助用戶快速了解到待辦數(shù)據(jù)量。
數(shù)據(jù)操作即對表格的數(shù)據(jù)進行操作，首先我們對數(shù)據(jù)操作進行分類。
按控制范圍分:
a.單行操作
b.批量操作
c.全局操作
按操作屬性分：
a.新增數(shù)據(jù)
b.編輯數(shù)據(jù)
c.刪除數(shù)據(jù)
d.業(yè)務(wù)處理
第一步，先判斷控制范圍
第二步，判斷擺放位置
第三步，優(yōu)化信息層級
以上是操作項和篩選項較多的情況，那么不多時，我們還是要合理利用空間，靈活設(shè)計
以上就是《如何設(shè)計表格？》的全部內(nèi)容了，后續(xù)還會努力更新更多B端設(shè)計分享！
與君共勉
轉(zhuǎn)自：站酷
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
復(fù)雜的應(yīng)用多種多樣，支持的服務(wù)和功能也千差萬別，但是無論如何呈現(xiàn)，此類復(fù)雜應(yīng)用的設(shè)計都是非常挑戰(zhàn)設(shè)計師的設(shè)計功底的，需要設(shè)計師了解業(yè)務(wù)，了解用戶，并且能夠通過設(shè)計更好地提供服務(wù)。
復(fù)雜應(yīng)用大多情況下是偏專業(yè)和B端的一些UI界面，它們大多出現(xiàn)在桌面端使用環(huán)境，并且終端用戶類型多樣，涉及流程、鏈條、業(yè)務(wù)也大多呈現(xiàn)出多變復(fù)雜的特征。這篇文章，來自UX設(shè)計領(lǐng)域的存在NNGroup，作者為凱特·卡普蘭。
我們之前將「復(fù)雜應(yīng)用」界定為特定專業(yè)領(lǐng)域當中，需要經(jīng)過廣泛培訓(xùn)之后使用的，有著非結(jié)構(gòu)化目標、非線性工作流程的任何應(yīng)用程序。這個概念可能聽起來有點抽象，不過這么說你可能會 更容易理解：從科學(xué)研究到專業(yè)人員，諸如金融分析師，它們常用的那些專業(yè)軟件應(yīng)用。這類應(yīng)用通常有著這些特點：
盡管不同的復(fù)雜應(yīng)用之間差異很大，但是他們的共同點是，專業(yè)的從業(yè)人員對于這類工具有著極強的依賴性。
考慮到設(shè)計師和開發(fā)者在面對這類工具的時候的挑戰(zhàn)，我梳理總結(jié)了 8 個復(fù)雜應(yīng)用的設(shè)計原則和指南。
很多研究表明，對于復(fù)雜的應(yīng)用和工具，用戶更加青睞可以立刻上手開始使用而不受它復(fù)雜度影響的那類工具。
與大量的教程、文檔、幫助和設(shè)置說明相比，能夠立刻開始的任務(wù)和項目，對于用戶有著莫大的吸引力。這種現(xiàn)象被稱為「活躍用戶悖論」。
雖然在專業(yè)領(lǐng)域當中，倚靠摸索和試錯學(xué)習(xí)是不恰當也不安全的，但是一定程度的邊做邊學(xué)是必須的，因為不可能在培訓(xùn)和手冊當中涵蓋所有的使用場景。
所以，在設(shè)計的時候應(yīng)該提供「跳過教程」的直接上手的偏好設(shè)置，同時進行相應(yīng)的安全性設(shè)置，避免新手的莽撞操作導(dǎo)致?lián)p失。比如可以限制這個階段的用戶執(zhí)行長流程多任務(wù)的操作，讓控制面板實時顯示操作結(jié)果或者預(yù)覽結(jié)果，這樣用戶無需執(zhí)行全部操作就可以知道大概的結(jié)果。
在 Salesforce 控制面板當中，就可以實時預(yù)覽面板編輯的效果。
絕大多數(shù)用戶都不是進階的專家級用戶，他們在絕大多數(shù)時候會使用基礎(chǔ)但是效率沒那么高的操作和執(zhí)行方案。很多用戶形成習(xí)慣之后，通常不會主動做出改變，而這在日積月累之后導(dǎo)致大量的時間浪費，效率低下。
值得一提的是，這個時候依賴冗長的文檔和教程其實很難達成效果，更合理的方式是結(jié)合用戶所處的上下文環(huán)境，通過界面工具提示的方式，適時地告知用戶「有更方便的方法」。
通常，可以使用懸停提示，或者是彈出式工具提示來實現(xiàn)這一功能。
ArcMap 是一款地理信息系統(tǒng)類工具，它通常會通過上下文環(huán)境下的信息引導(dǎo)，來幫助用戶了解技巧。
復(fù)雜的應(yīng)用程序，通常會有很多功能是分散的而非線性的，不同的功能組合起來可以實現(xiàn)特定的功能。在這類工具當中，用戶日?？赡芤膊皇呛艽_切知道最終的目標是什么，而需要通過數(shù)據(jù)分析來逐步推進，同時，在知道確切目標的情況下，也應(yīng)該可以遵循不同的路徑靈活地達成目標。
設(shè)計師這些應(yīng)用的時候，設(shè)計師應(yīng)該避免使用固定、唯一、 僵化的實現(xiàn)路徑，迫使用戶必循嚴格按照某一固定路徑來做事情。一方面，允許用戶跳過某個步驟，或者回滾到更早的路徑，另一方面，允許用戶遵循不同的方式和路徑來達成目標。
比如萬事達卡的自助服務(wù)就可以通過交互式的圖表來引導(dǎo)用戶完成不同的任務(wù)。
復(fù)雜的任務(wù)，通常意味著它需要很多步驟，不同的環(huán)節(jié)，而在實際的應(yīng)用場景中，某個分析步驟耗費幾個小時甚至幾天，都是有可能的。在高度復(fù)雜的現(xiàn)實生活中，某個步驟可能會換人接手，可能會因為硬件、 網(wǎng)絡(luò)等問題而暫停甚至丟失，這也意味著「可追溯性」是很重要的。
所以，在這樣的復(fù)雜應(yīng)用當中，應(yīng)該允許用戶在使用過程中，可以便捷清晰地記錄、保存、 導(dǎo)出內(nèi)容和記錄，允許用戶中斷，中斷后可以恢復(fù)特定的任務(wù)。在任務(wù)進行過程中可以進行注釋、保存相關(guān)的說明。
在決策建模軟件TreeAge 當中，用戶可以在分析和建模過程中進行開放式的注釋，可以后續(xù)在底部快速訪問這些筆記。
復(fù)雜的應(yīng)用通常還會面臨一個狀況，就是工具本身的不足，用戶需要在多個工作空間上使用工具和內(nèi)容的時候，它需要具備切換的功能。對于不具備的功能，應(yīng)用程序應(yīng)該允許使用第三方的應(yīng)用來作為補充。
比如當軟件不支持某個操作的時候，應(yīng)該允許用戶從線上的其他數(shù)據(jù)庫中獲取并導(dǎo)出數(shù)據(jù)來使用，可以依托外部文檔作為支持，允許用戶在應(yīng)用中做注釋和評論。
減輕工作負擔的一個要點，是盡量使用通用的API、接口和標準，盡量兼容行業(yè)標準軟件，比如 Excel、Powerpoint ，盡量使用標準格式，等等。
微軟的商業(yè)分析軟件 PowerBI 就提供了標準化的導(dǎo)出和復(fù)制功能，非常方便
復(fù)雜應(yīng)用通常旨在保持泛用性。使用場景多樣，多種不同的功能，一家汽車生產(chǎn)廠家，可能會和蜜蜂養(yǎng)殖機構(gòu)采用同樣的工具和軟件來監(jiān)測機器故障。但是，這種泛用性的另外一面，就是混亂性。復(fù)雜的應(yīng)用可能會同時兼顧到基礎(chǔ)型的小白用戶和進階型的專家用戶，而后者用到的功能很小概率會被基礎(chǔ)用戶用到。
所以，設(shè)計者需要在不降低功能性的情況下，基于應(yīng)用場景、 用戶需求來進行簡化和優(yōu)化，在保持功能完整易用的前提之下，降低復(fù)雜度和混亂度。
分階段和層級展現(xiàn)就是一種降低混亂度但是不影響功能性的一種常見策略。當用戶進行到特定任務(wù)、特定階段、特等級別之后，再呈現(xiàn)特定功能，是有效的設(shè)計方法。
即使降低了混亂度，在復(fù)雜應(yīng)用當中，信息量可能依然是過載的。通常，對于這種情況可以通過區(qū)分信息層級的主次來進行快速的區(qū)分，不過，從交互上來說，這可能依然不夠。
對于諸如控制面板一樣的界面，用戶可能需要時刻查看面板上的信息，需要了解次級信息但是又不能離開界面，這就體現(xiàn)出主次信息之間的過渡呈現(xiàn)的重要性了。
一般而言，使用類似與懸停顯示的方式，能夠比較柔和地將次級信息呈現(xiàn)出來，允許用戶查看詳細的定量數(shù)據(jù)。下面這個案例當中就是，懸停顯示更多次級信息。
復(fù)雜應(yīng)用通常在界面上包含由大量的信息，而這個時候關(guān)鍵性的數(shù)據(jù)如果不在視覺上做突出顯示，會被用戶錯過。通過視覺區(qū)分、提示警報的方式，讓用戶及時注意到，才有可能規(guī)避可能存在的問題。
值得注意的是，讓關(guān)鍵信息和元素凸顯的方式，并不一定非得是使用鮮艷的色彩和較粗的字體，簡單的放大呈現(xiàn)，使用圖形化的元素輔助提示，或者是提供足夠的留白都可以達到目的，就像下面的案例一樣：
復(fù)雜的應(yīng)用多種多樣，支持的服務(wù)和功能也千差萬別，但是無論如何呈現(xiàn)，此類復(fù)雜應(yīng)用的設(shè)計都是非常挑戰(zhàn)設(shè)計師的設(shè)計功底的，需要設(shè)計師了解業(yè)務(wù)，了解用戶，并且能夠通過設(shè)計更好地提供服務(wù)。
文章來源：優(yōu)設(shè) 作者：Kate Kaplan
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
5W1H 這種分析方法，是比較宏觀的分析工具。它的應(yīng)用是針對整個項目的開展來進行，幫助我們圍繞產(chǎn)品需求有計劃有邏輯性的制定解決方案。
在這個框架下，就方便我們決定要引入哪些其它分析方法或者理論內(nèi)容，例如 SWOT、KANO、AB TEST、RMF 等工具。
也因為我們對整體的認識更清晰，決定了我們應(yīng)用理論和其它分析模型的精細度、細節(jié)方法。讓設(shè)計師在項目處理過程中可以更靈活，更專業(yè)，更游刃有余。
很多網(wǎng)站仍然在使用老舊的頁面設(shè)計，比如國內(nèi)一些企業(yè)官網(wǎng)，萬年不變的相類似的模板，外國的則是hero頁面，帶CTA按鈕，三欄式的布局。這些設(shè)計不能說是不好的設(shè)計，很實用，用戶能夠預(yù)測展示的內(nèi)容，也容易找到需要的內(nèi)容。但是正因為可預(yù)測，用戶沒有新鮮感，沒有期待，所以我們找了一些不僅打破常規(guī)，也依然有良好用戶體驗的網(wǎng)頁設(shè)計。
藍藍設(shè)計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設(shè)計公司，公司對UI設(shè)計的追求一向很高，致力于為卓越的國內(nèi)外企業(yè)提供卓越的手機app/安卓ui設(shè)計、軟件界面設(shè)計、網(wǎng)站設(shè)計，用戶研究、交互設(shè)計服務(wù)。
接下來是精彩的UI設(shè)計賞析
北京藍藍設(shè)計團隊來自清華美院，工作多年，行業(yè)經(jīng)驗豐富，專業(yè)性很強。我們是熱愛設(shè)計，設(shè)計不僅是我們的專業(yè)，我們的職業(yè)，還是我們的愛好。每一個藍藍設(shè)計的設(shè)計師都希望自己的設(shè)計越來越好，以高標準，敬業(yè)用心的態(tài)度、專業(yè)的技藝得到客戶的認可。為此，我們不惜代價，愿意額外的付出時間、精力，去學(xué)習(xí)、去嘗試、去研究、去探索。工作賣力，玩的開心。做好卓越的界面設(shè)計，成為這個領(lǐng)域的資深專家，幫助客戶取得成功，是我們的目標。
藍藍設(shè)計秉承設(shè)計優(yōu)秀，不斷超越的理念，誠信敬業(yè)、專業(yè)耐心的工作作風，一直堅持注重用戶心理體驗及“設(shè)計與營銷”等領(lǐng)域的理論與實踐相結(jié)合。10余年專注努力，300+案例磨練。我們在ui創(chuàng)意設(shè)計，用戶體驗與交互設(shè)計，各種類型軟件界面設(shè)計，國際化標準和流行趨勢，進行過不斷的學(xué)習(xí)和實踐。藍藍設(shè)計提供的是可以信賴的ui設(shè)計服務(wù)，我們內(nèi)部有一套管理要求，比如去客戶現(xiàn)場每周一次的檢視和溝通、內(nèi)部提案會議、每天下班前的整理反饋成果發(fā)郵件、隨時溝通的qq、電話，階段性的匯報和進度記錄整理。多勞多得的獎勵機制，客戶滿意度評價獎勵機制，鼓勵大家用心、平和、耐心、勤奮、創(chuàng)新的做事.
（以上圖片均來源于網(wǎng)絡(luò)）
（精美流程圖設(shè)計）
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
更多精彩文章：
ui界面設(shè)計之網(wǎng)站設(shè)計案例欣賞(一)
超贊的創(chuàng)意頁面排版設(shè)計，打造“視”不可擋的網(wǎng)頁設(shè)計
2020又過大半了，去年這個時候我們研究了目前國際大廠在使用的一些趨勢-晶白，點線底紋，光感，那么到了今天又有哪些新的趨勢映入眼簾呢，你還在使用那套舊的設(shè)計風格來做設(shè)計，今天帶大家來看看今年哪些性格值得我們學(xué)習(xí)呢？
什么是液態(tài)視覺
參加過去年UCAN的同學(xué)應(yīng)該對于這個水的主KV印象深刻，當時是以水，宇宙概念做的整個視覺。整個視覺最讓人深刻的莫過于這個畫龍點睛的水滴液態(tài)效果。
整個水滴流動感，運用到整個KV各個地方，背景還有底紋等等，印象深刻。
在2020年，液態(tài)視覺毫無疑問是當前最受關(guān)注的視覺風格之一。這種效果看起來像流動的各種液體，在設(shè)計中不僅可以很強的吸引人眼球，同時無論是作為背景元素，還是裝飾都讓人過目難忘。
液態(tài)視覺除了視覺感官層面會讓你記憶深刻，它的整個視覺概念也可以講很多故事，比如你可以說整個設(shè)計概念，是圍繞”水“來設(shè)計，水是流動的，水也是生命之泉，能賦予很多產(chǎn)品很強的概念，所以也就是為什么今年會被很多大型KV所運用的原因。同時這種流動感也可以比如宇宙萬物，生命不息，也可以運用在很多大型的科技發(fā)布會上。
所以作為設(shè)計，今年我們勢必要去關(guān)注這個趨勢和理念，嘗試如何去運用到我們產(chǎn)品中去。
液態(tài)視覺的情感感受
1、生命力
使用過siri的朋友對這個效果應(yīng)該不會陌生，液態(tài)視覺一個非常直觀的感受就是具有生命力，可以隨機的發(fā)生各種各樣的變化，正是如此，被很多語音產(chǎn)品在頁面中使用。
在很多科技類產(chǎn)品，智能功能這塊都會看見這種風格的運用，所以假如你今天需要設(shè)計一款智能，很未來的產(chǎn)品，這種液態(tài)風格設(shè)計一定需要去關(guān)注。
比如這款科技類產(chǎn)品，在啟動頁面時候，就直接跳出一個類似水滴的機器人，用智能語音和你對話，然后隨著人機交互，它會變成不同的形態(tài)。
2.流動運動感
液態(tài)視覺另外一個特點就是具有流動感運動感，在很多智能家居中被廣泛運用，比如圖中這個智能水壺頁面設(shè)計，隨著水溫度的變化，顏色和形狀都會發(fā)生變化。
在很多發(fā)布會中，營造一些比較大氣的感覺，或者宇宙場景時候經(jīng)常運營到這個風格，在空間上和視覺上都有方向和動態(tài)效果。
這組海報設(shè)計，就非常有方向感和宇宙未來感，整個圖形都朝著一個方向走向，這也是其他圖形元素很難表達的風格特點。
GlebKuznetsov的作品中這個動態(tài)效果，隨著液態(tài)效果的流動，整個畫面呈現(xiàn)出非常有程序的水流動效果。
3.科幻未來感
液態(tài)效果另外一個視覺感受就是未來感和科技感，因為它造型的變化，抽象圖形的表達，給人很神秘，抽象的視覺感受。
如上圖，通過將流動的圖形，進行旋轉(zhuǎn)，形成蟲洞感覺，不由自主想起宇宙和未來感。
液態(tài)視覺的技法特點
1.質(zhì)感柔軟呈現(xiàn)透明
液態(tài)風格特點雖然視覺沖擊力強，但是視覺表現(xiàn)上，柔軟和透明是非常大的一個特點。整體的材質(zhì)比較輕，加上透明效果運用，整體會非常的輕盈。通常人工智能頁面場景運用比較多。
2.色彩豐富大膽漸變
液態(tài)風格另外一個特點是什么。色彩豐富，大膽的漸變色，形成很強的視覺沖擊力。
整個色彩類似彩虹，或者霓虹燈反射效果，這也是它在設(shè)計中能吸引人很重要的一個原因。
Kikk的官網(wǎng)設(shè)計，和Ucan有些神似，也是采用的的一個液態(tài)的玻璃球，配色大膽的漸變在視覺表現(xiàn)和沖擊力讓都讓人印象深刻。
3.塑料質(zhì)感運用
塑料質(zhì)感：液態(tài)視覺視覺質(zhì)感豐富，質(zhì)感也很大膽，比較常用的有塑料質(zhì)感，配合燈光，如上圖就是運用是塑料質(zhì)感，配色彩色的漸變，非常夢幻。
這種塑料質(zhì)感不止是在設(shè)計中用到，在時尚攝影中也被經(jīng)常使用。
4.玻璃質(zhì)感運用
玻璃質(zhì)感的運用，一般會運用玻璃這種效果，出現(xiàn)在畫面中，隨著玻璃的折射效果進行變換，玻璃的質(zhì)感和平面這種強反差的設(shè)計，讓你過目不忘。
玻璃質(zhì)感的折射效果，結(jié)合后面文字的透出，很好的將這種液態(tài)融合效果運用到了。
在越來越多的國外設(shè)計中，都經(jīng)常看見這種玻璃液態(tài)圖形和平面設(shè)計的融合。
5.水的質(zhì)感運用
水的質(zhì)感，毋庸置疑，但是這個水的質(zhì)感一般是運用氣泡的表現(xiàn)形式，再結(jié)合折射效果，整個視覺水泡就是核心視覺元素。
Ucan的主視覺效果，就是采用類似的手法，這類設(shè)計很巧妙，同時簡約又不失大氣。
6.點線面結(jié)合運用
除了塑料，扁平質(zhì)感以外，點線的運用在液態(tài)設(shè)計中非常多，比如上圖的OPPO和colo的海報設(shè)計，就是運用了流動變化的線條，讓整個設(shè)計呈現(xiàn)出簡約高科技之美。
用線成為整個設(shè)計主體，通過流動的線勾勒出一幅場景，在科技類產(chǎn)品中運用較多。支付寶很多理財產(chǎn)品都曾經(jīng)運用過類似風格。
在界面中運用
天貓雙11的很多場景中，其實都有用到液態(tài)設(shè)計元素，比如雙11的潮流盛典舞臺設(shè)計，就是運用的液態(tài)當元素，整個畫面非常潮。
在AI人工智能的產(chǎn)品設(shè)計中，液態(tài)設(shè)計經(jīng)常被廣泛使用，無論是智能語音設(shè)計，還是說智能家居是使用，都能看見它運用的影子。
這組機器學(xué)習(xí)的網(wǎng)站設(shè)計，通過液態(tài)設(shè)計，講玻璃元素設(shè)計成動態(tài)的方式非常的逼真。整個設(shè)計給人空間和未來感展現(xiàn)。
這個液態(tài)網(wǎng)站的設(shè)計，大膽的漸變，流動的液態(tài)效果，讓整個頁面充滿了時尚感。
液態(tài)設(shè)計除了一些抽象元素，一些3D的元素也可以使用，整體呈現(xiàn)出來的效果，也非常的有吸引力。當然得結(jié)合設(shè)計整體來平衡。
目前來說液態(tài)設(shè)計在界面中運用，一般在科技網(wǎng)站，AI或者機器人場景比較多，一般液態(tài)會呈現(xiàn)多種變化趨勢。
在平面中運用
在平面設(shè)計中案例比較多，目前很多商業(yè)設(shè)計中都運用到了一個液態(tài)的圖形配合一些幾何圖形，干凈利索的文字都能搭配出不錯的視覺效果。
這組海報，看似簡約但是充滿了設(shè)計感，除了液態(tài)的核心元素，字體運用，板式空間的利用都體現(xiàn)出設(shè)計師極高的功底。
在韓國很多藝術(shù)展的設(shè)計中，抽象的幾何圖片配合液態(tài)的動態(tài)變化。整體非常強的視覺沖擊。
如果你今天做設(shè)計，找不到感覺了，不如放棄下你之前的設(shè)計套路。嘗試一下新的設(shè)計思路，說不定可以打開不一樣的視角。
在品牌中運用
今天除了頁面是動態(tài)的，在很多時候品牌LOGO也是動態(tài)的液態(tài)的，會變化，如上圖這個logo他會隨著不同的方向去旋轉(zhuǎn)變化。LOGO一定要是靜態(tài)的么？不可以是動態(tài)的？甚至液態(tài)么，我覺得一定有可能會出現(xiàn)液態(tài)的圖形。
電信OI公司的logo就是液態(tài)呈現(xiàn)的，他的變化有幾十種展示方式。
整個圖形以明亮，形狀變化的“氣泡”為液態(tài)容器，可根據(jù)客戶的聲音改變LOGO的顏色和形狀。
或許在未來，液態(tài)的LOGO會成為一種新的主流，只是作為新時代的設(shè)計師，我們必須要去了解和關(guān)注。
最后
趨勢是變化的，唯一比變的就是變化，作為處在互聯(lián)網(wǎng)中的設(shè)計師，我們身邊的一切都是變化的，身邊的人，身邊的事兒，甚至是商業(yè)模式都在變化，學(xué)會擁抱變化， 并且讓自己持續(xù)的成長和變的更好，是每個設(shè)計師都要學(xué)習(xí)的。
文章來源：站酷 作者：我們的設(shè)計日記
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
扁平化網(wǎng)頁設(shè)計的表現(xiàn)大多體現(xiàn)在配色、字體以及布局排版方面，這三樣結(jié)合得當都能制作出漂亮的網(wǎng)站。在國內(nèi)很多企業(yè)網(wǎng)站的布局架構(gòu)幾乎是一樣的，最多就是LOGO和一點顏色變化，看不出什么特色和創(chuàng)新。
作為設(shè)計師，應(yīng)該多花點心思在創(chuàng)新上，比如網(wǎng)頁上的布局，其實它是可以變化多樣的，正如今天為大家分享yi xie布局排版好看的網(wǎng)頁設(shè)計作品，大家可以參考這些布局的設(shè)計，從中獲得一些靈感。
（以上圖片均來源于網(wǎng)絡(luò)）
（精美流程圖設(shè)計）
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
更多精彩文章：
ui界面設(shè)計之網(wǎng)站設(shè)計案例欣賞(一)
網(wǎng)頁中超過95%以上的信息都是通過文字的形式呈現(xiàn)。 然而，頁面文字并非毫無章法的隨意呈現(xiàn)。事實上，更具可讀性、視覺效果以及獨特排版和布局的網(wǎng)頁文本設(shè)計，更能吸引用戶，提升用戶愉悅度。這也是為什么越來越多的設(shè)計師日益重視網(wǎng)頁排版設(shè)計的重要原因。
BS界面是基于瀏覽器的界面，隨著人們對于用戶體驗要求的不斷提高，BS界面的設(shè)計要求也越來越高，
接下來為大家分享一下我收集到的案例：
（圖片均來源于網(wǎng)絡(luò)）
點擊查看更多UI/UE設(shè)計案例??????
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
更多精彩文章：
網(wǎng)頁中超過95%以上的信息都是通過文字的形式呈現(xiàn)。 然而，頁面文字并非毫無章法的隨意呈現(xiàn)。事實上，更具可讀性、視覺效果以及獨特排版和布局的網(wǎng)頁文本設(shè)計，更能吸引用戶，提升用戶愉悅度。這也是為什么越來越多的設(shè)計師日益重視網(wǎng)頁排版設(shè)計的重要原因。
BS界面是基于瀏覽器的界面，隨著人們對于用戶體驗要求的不斷提高，BS界面的設(shè)計要求也越來越高，
接下來為大家分享一下我收集到的案例：
（圖片均來源于網(wǎng)絡(luò)）
點擊查看更多UI/UE設(shè)計案例??????
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
更多精彩文章：
每天，世界上有40億人在城市中穿行，這個不斷增長變化的群體占據(jù)了世界人口的一半還多。了解人們?nèi)绾纬鲂幸约俺鲂械难葑儗τ诟纳莆覀兊某鞘?、環(huán)境和數(shù)十億人的生活至關(guān)重要。我們創(chuàng)建了 Uber Movement，來幫助大家增進理解。
視頻地址：https://youtu.be/bszvEIMVsIc （需翻墻）
目前，Uber已在全球700多個城市提供服務(wù)，所有出行數(shù)據(jù)不僅能幫助我們提高服務(wù)質(zhì)量，也有可能幫助到城市規(guī)劃師，以及那些渴望提高城市建設(shè)水平的人。Uber Movement允許用戶以多種方式查看數(shù)據(jù)：用戶可以查看某個日期某次出行的平均耗時，也可以查看某個區(qū)域不同日期范圍內(nèi)的平均耗時，或者可以對比同一個區(qū)域不同的兩個行程的耗時。
圖1：從華盛頓市中心出發(fā)到各地所需的出行時長
圖1中的截圖展現(xiàn)了從華盛頓市中心到達城市其他區(qū)域的平均耗時（在2016年3月16日鐵路運輸因維修而暫停服務(wù)）。截圖a中顯示了晚高峰的耗時情況，截圖b顯示了兩周前鐵路運輸未中止的耗時情況，截圖c則比對了兩個時段下的數(shù)據(jù)，指示出鐵路服務(wù)暫停對路面交通帶來的嚴重影響。如圖示，在上述情況下，晚高峰時段從1400 K St NE區(qū)到1500 Kearny St NE區(qū)的平均出行時間增加了67.8％。
對于需考慮在哪里新增公交線路的公共交通機構(gòu)，以及那些判別什么時候主干道需要進行道路養(yǎng)護的城市機構(gòu)，都能夠通過這些數(shù)據(jù)了解到什么時候減少車道會對交通的影響最小，應(yīng)向駕駛者提供哪些替代路線。
為了讓這些數(shù)據(jù)有價值，必須讓它們有使用價值。這就需要數(shù)據(jù)可視化的加持了。作為負責 Uber Movement 的產(chǎn)品設(shè)計師，我需要確保我們分享的數(shù)據(jù)是盡可能清晰易懂的。
我們遇到了一個有趣的問題：如何展示兩個不同卻又有關(guān)聯(lián)的可視化元素?！笗r長熱力圖」展現(xiàn)了在一個特定的日期（例如，2016年1月11日星期一下午）下，從任一起始點到某個位置的耗時（以分鐘為單位）；也可以是一個跨度長達幾個月（例如，2016年3月至5月的工作日早晨）的平均耗時。這個熱力圖使用了相鄰色，基于相同的顏色來調(diào)整色調(diào)由亮至暗（如下圖1所示，淺藍色至深藍色）。
「比對熱力圖」能夠讓用戶對比相同路線不同時段下的平均耗時。這里需要凸顯信息的對比度，哪一個時段下的耗時更少，少多少？對于該熱力圖，我們使用了對比色（如圖2）來表現(xiàn)數(shù)據(jù)由0至兩極（快與慢）。如果差值為零，則表示兩種情況下的耗時相同。我們企圖通過兩個對比的顏色盡可能的凸顯差異。
我們的用戶會在這兩種熱力圖中連續(xù)反復(fù)切換，所以我們需要將這兩種模式從視覺上明確區(qū)分出來。
圖2：早期設(shè)計的5階色（左側(cè)單位為絕對耗時，右側(cè)單位為相對耗時比）
在早期的設(shè)計中（如圖2），5階相鄰色（由淡綠色至藍色）被用來表現(xiàn)路程的絕對耗時，而5階對比色（由綠至淡黃再到紅色）則用來表現(xiàn)兩種條件的對比。
初期嘗試使用五個顏色梯度，但在可用性測試中發(fā)現(xiàn)地圖的色彩辨識度低（見下圖3）。主要有以下幾個問題：
顯而易見，可用性測試的參與者難以從地圖判斷出耗時，特別是當?shù)貓D縮放聚焦在市中心時，也難以區(qū)分兩種模式（耗時熱力圖/對比熱力圖），見圖3。
圖3：西雅圖的出現(xiàn)時長
圖3，以早期的設(shè)計效果（5階相鄰色）查看從西雅圖市中心至其他區(qū)域的平均耗時，截圖a 展現(xiàn)了西雅圖所有區(qū)域的耗費時長，顏色讓區(qū)塊看起來“糊在一塊兒”。截圖b則展現(xiàn)了縮放聚焦至市中心區(qū)域時的效果，難以區(qū)分不同區(qū)域。
通過多步的探索實驗，我將這個復(fù)雜的設(shè)計難題拆解為幾個不同的小挑戰(zhàn)，并驗證不同的方案，最終獲得一個色彩系統(tǒng)達到易讀性最理想的熱圖效果。
1.通過相鄰色和對比色兩個樣本有效區(qū)分耗時熱力圖和對比熱力圖
由于同時應(yīng)用相鄰色與對比色，所用的配色就必須是“四色系”配色方案以明確區(qū)分。（譯注：tetradic color 的翻譯可能不合適，根據(jù)定義，其為一種大膽的配色方案，四種顏色對立均等地分布在色輪的四個方向上。）我使用了 Uber Movement 的品牌色（#2473BD）作為相鄰色的基準色，然后使用 Paletton.com 列舉了幾組“四色系”配色方案，將四種顏色分配為兩對互補組合。
圖4：為實驗準備的色階方案
2.根據(jù)時長間隔等比或是梯度增加色組的色彩階層數(shù)
早期設(shè)計從5階色彩范圍開始（如圖2、3），兩種模式的熱圖都產(chǎn)生了一種“糊在一塊兒”的漸變效果。我們希望這個系統(tǒng)可以滿足不同體量的城市，從市中心到外圍區(qū)域的平均耗時跨度從30分鐘到1.5小時不等。僅使用5種顏色來表現(xiàn)0至1.5小時，顯然不足以讓用戶有效辯識地圖上的時間跨度。
我實驗性地將色彩范圍的階層從5增加到9，11，13。時間間隔分別以等比增加與梯度增加羅列（梯度增加以30分鐘為總時長）。
表1：5、9、11、13色階方案（左側(cè)為等距增加，右側(cè)為非等距增加）
之所以選擇了梯度增加，是因為根據(jù)我們與城市規(guī)劃者的溝通，了解到他們是基于「交通分析區(qū)（TAZ）」這種交通規(guī)劃模型來進行分析的，它將每個區(qū)域以人口密度劃分。城市區(qū)域的人口密度相比郊區(qū)會高很多?；谑袇^(qū)人口密度高，在市區(qū)對交通狀況進行定義時，以每5分鐘為間隔相比在郊區(qū)更有效。
顏色組通過 Chroma.js顏色助手計算生成。通過單顏色的變體給予一種連續(xù)性（見圖5）。圖中左側(cè)（方案1）使用了單色系，右側(cè)（方案2）則通過不同色調(diào)的顏色組合增加色組內(nèi)的對比度。
圖5：用于實驗的2個色階（左側(cè)為淡色系，右側(cè)為多色系）
3.嘗試通過提升對比度去除掉區(qū)間的漸變效果
我將不同的顏色方案放到測試環(huán)境中去看看實際效果。為了去除漸變效果，在不受時間值和透明度影響的情況下，使用了彩色比例尺上的離散色值（見圖6右側(cè)的效果）。這樣處在相同色彩尺度區(qū)間的區(qū)域看起來合并了，能夠很好地辨別出區(qū)域之間耗時的異同。
圖6：采用離散色值消除漸變色。（從左側(cè)變?yōu)橛覀?cè)）
早期的配色方案是基于「耗時」調(diào)整的色值，并且使用了20%的透明度，由此顯示出一種「漸變效果」，導(dǎo)致鄰近區(qū)域過于相近，用戶難以根據(jù)顏色判斷數(shù)值差異。新的配色方案則取消了以上兩點，這使得相同時間的區(qū)域合并，清晰的色帶使其更易讀。
我還開發(fā)了個程序用來計算鄰近色組的對比度（見下方表2），方案2配色中的9階色彩范圍表現(xiàn)出最佳的平均對比度，其次是11階。考慮到平均路程耗費時長在不同城市會有較大的差異，方案2中的11階色彩能提供最好的擴展性與可讀性。與早期方案相比，新方案的對比度提高了30%。
從上面的圖表可以看到，方案2配色有更高的對比度。其中，顏色階次越少，對比度也越高。
4.在測試環(huán)境中對比顏色方案
基于以上的結(jié)果，我將方案1（單色系）排除了。我們將方案2放到測試環(huán)境中查看了兩種間隔取色策略的效果。（譯注：這里的兩種策略指的是上面圖表1呈現(xiàn)的兩種取色方案。一種是例如每10分鐘遞進一個色階，等分；另一種則是會變化，例如前30分鐘每5分鐘遞進一個色階，超過30分鐘則每10分鐘遞進一個色階。）
表2：鄰近色組的對比度計算
下圖7展示了波士頓城整體區(qū)域的熱圖效果，讓我們再看看聚焦到市中心的效果如何。
圖7：波士頓城整體區(qū)域的熱圖效果
圖8更進一步地確認了「變化時間間隔取色」提供了更高的對比度。
圖8：「變化時間間隔取色」后的效果
5.對配色色階進行微調(diào)
在這一系列的實驗之后，才明確了這個方案（方案2中的11階色彩）屬最佳效果。能夠很好地滿足視圖中大跨度時間差的呈現(xiàn)。不論是城市的整體縱覽或是聚焦在市中心區(qū)域，都能提供最佳的對比度。
我們的內(nèi)部團隊對實驗進行了評審和測試，并最終敲定了色彩范圍（見圖表1），結(jié)果將在近期發(fā)布。
隨著越來越多的用戶在 Uber Movement 中探索他們的城市，我們也在不斷的學(xué)習(xí)與迭代，讓數(shù)據(jù)更有效地為大家所用。
數(shù)據(jù)可視化的最終目的還是信息溝通。當我們試圖清晰地傳達事實時，創(chuàng)作物的美學(xué)不是附屬品，而是一種內(nèi)在價值。美感不只是粉飾。當數(shù)據(jù)可視化被合理地創(chuàng)造時，它因效用而美。
我們以一種微小的方式，通過不斷試錯與探索，試圖讓人們以一種全新的視角看看這個世界。它是有效的，也即是美的。
文章來源：UXRen 作者：Dawei Huang
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.yvirxh.cn