手機UI中的交互是保持產(chǎn)品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。
APP UI設(shè)計一直在變化，就像網(wǎng)頁設(shè)計一樣，不停的創(chuàng)作新鮮、友好的產(chǎn)品，設(shè)計師要跟上這個趨勢，最好的方式就是多看優(yōu)秀案例，下面大家一起來看看今天的精選，建議訪問官網(wǎng)查看更詳細的展示哦！
手機UI中的交互是保持產(chǎn)品鮮活生命力的源動力。好的交互可以幫助用戶快速地獲得反饋，認知布局，增強體驗感和沉浸感。這里為大家整理了12款優(yōu)秀并富有創(chuàng)意的交互作品，為你的產(chǎn)品設(shè)計注入靈感。
--手機appUI設(shè)計--
（以上圖片均來源于網(wǎng)絡(luò)）
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
更多精彩文章：
編輯導(dǎo)讀：當(dāng)各大電商平臺忙著雙十一的時候，拼多多似乎是個獨特的存在，不慌不忙，圍觀在旁。拼多多為什么不重視雙十一？他們主要在忙什么？文章從這兩個問題出發(fā)，對此展開了分析解讀，一起來看看~
孫悟空是石頭縫里蹦出來的。阿里系幾位P8Plus的朋友和阿德哥聊時說，拼多多也是石頭縫里蹦出來的！
“打京辦”成立這么多年，沒承想打出個拼多多。剛剛發(fā)布的拼多多Q3財報顯示：首次單季度盈利，第三季營收142億元；GMV達1.45萬億，同比增長73%；活躍買家達7.31億……
在資本市場上，拼多多迅速趕超京東300億美元達1600億美元市值，成為國內(nèi)僅次于阿里、騰訊、美團的第四大互聯(lián)網(wǎng)公司。
自2014年起，投資界便開始流傳“電商已是死賽道”的共識，拼多多的崛起給了投資界一記響亮的耳光，也再次說明了“長江前浪推后浪，江山代有才人出?！?/span>
與當(dāng)年打京辦、投蘇寧等手腕比，似乎阿里對拼多多已無招可施，重啟聚劃算、推淘寶低價版眼看也只是“補課動作”。而拼多多，卻正在暗暗部署更多領(lǐng)域，圈內(nèi)人說，“誰如果小看黃錚的野心，就等承認自己是一個傻X”是同樣的邏輯。
“摁不住的拼多多！”阿里的多位朋友如是說。
今年的雙11因為“你懂的”原因而顯得波瀾不驚，除了天貓交出4982億元、京東交出2715億元的答卷之外，似乎乏善可陳……
“拼多多天天都是雙11！”
拼多多的朋友告訴阿德哥，所以他們不希罕宣布成績。
當(dāng)然，這并非拼多多的官方回應(yīng)，官方回應(yīng)說，拼多多更在意消費者的購物體驗。拼多多的Slogon是，多實惠，多樂趣。
一個小混混有了另立山頭的志向后，并非馬上另立山頭，他首先做的，不是去激怒原有的老大，而是，開辟自己的新陣地，帶自己的小弟。
拼多多只是不公布成績，并非沒有參與“雙11”盛宴。
曾國藩說，聰明的人都懂得“藏拙”，但只有少數(shù)人懂得“藏鋒”。
沒有滿減、蓋樓、升級列車、養(yǎng)貓……只有簡單的“低價”，拼多多副總裁陳秋說，本次雙11，拼多多的一切優(yōu)惠都將以最簡單的方式面向用戶，消費者不用做滿減計算題，看到的即是最優(yōu)價。
前幾天，夫人非要去郵局給小侄子寄一堆童裝，這與阿德哥的習(xí)慣大相徑庭?？傻搅肃]局，除了服務(wù)的眼神不對之外，價格真讓我驚喜：30多斤一大箱的衣服，郵寄費30元。
總說國企服務(wù)沒跟上，可價格也真是“良心價”啊?！白怨耪媲榱舨蛔?，總是套路得人心”，黃崢說。
總是低價得人心！
阿德哥曾做過了多次田野訪問，得出兩個基本結(jié)論，一是老家很多親朋基本都知道淘寶，但大都卻正用拼多多；另一個是阿里、京東多年的鐵粉，居然瞬間被拼多多“拉走”。
“618”期間，一個朋友在京東購買售價1099元的Beats solo3藍牙耳機，已準備在京東下手的他，突發(fā)異想去拼多多“多看了一眼”，499元。你沒看錯，不要599元！
這個朋友今天已是拼多多的優(yōu)質(zhì)用戶，幾個月時間里，貢獻了近三萬元的GMV。
打開拼多多APP，限時秒殺、斷碼清倉、XX特賣、9塊9特賣……不要小看這樣的戰(zhàn)陣：因為大量的特價版塊，外加重頭推出的“百億補貼”，拼多多給用戶展示出的，可不就是天天雙11嘛？
而其背后的玄機則在于：通過不斷上新的各種大促，拼多多對于品牌的露出與銷量拉動，早已遠超傳統(tǒng)電商“泛賣貨”模式，它一改小商家陪煉大玩家的傳統(tǒng)模式變成了“讓更多的商家可以雨露均沾”。
如果非得去探尋一下拼多多的崛起路徑，吃瓜瓤的多半會說，沒有淘寶就沒有今天的拼多多，沒有微信也沒有今天的拼多多。
這可以視為正確的廢話。
當(dāng)年抗美援朝的路上，也曾有不少志愿軍睡著了。
移動互聯(lián)網(wǎng)大潮來臨的時候，互聯(lián)網(wǎng)的生態(tài)發(fā)生了全新的變化，拉長時間線，誰臨陣換了大將，誰展開了整風(fēng)運動？
江山代有才人出，丁磊的知音，段永平的弟子，黃崢當(dāng)立。
簡而言之，阿里為中國的電商事業(yè)立下了汗馬功勞，基本讓國人實現(xiàn)了在“消費互聯(lián)網(wǎng)”端的揚眉吐氣；而騰訊的QQ、微信，則讓國人實現(xiàn)了網(wǎng)絡(luò)“非主流意見市場”上聚集了最多的人。
創(chuàng)業(yè)，天時、地利、人和。黃崢不會都得，但都掙得了。
淘寶“開卷考試”帶來了最初的商家和貨品，微信“熱鬧人群”帶來了交易場景，砍價、拼單激發(fā)了社交流，拼多多，用了不到三年的時間，創(chuàng)造出了“新電商速度”。
隨后是C2M新品牌計劃，百億補貼的大品牌計劃，而快速上市帶來的則不僅是高光，更是贏得了“黃金時間”。
按照傳統(tǒng)電商資本套路，拼多多三季實現(xiàn)單季贏利之后，還有一年到一年半的“高增可虧損”黃金時間。換而言之，拼多多依然可以繼續(xù)實現(xiàn)補貼、營銷推動，而不必太在意贏利。
這樣的時間窗口，縱觀天下電商，唯拼多多有之。
有疑問的人，不妨多看看拼多多今年的前二季財報的營銷費用率，答案擺在那兒呢。
恐怖的是，黃崢的野心并非只在“實物電商”，據(jù)說，在拼多多，更多的大殺器正在路上。
上天并非偏心，了解黃崢的人，知道，他只是大器晚成，而非天縱其才。
并非拼多多不重視雙11，而是黃崢不重視，一是因為拼多多已上了軌道；二是因為黃崢最近只關(guān)注另一件事——賣菜。這便是多多買菜。
疫情期間，拼多多便推出了線下團購工具“快團團”，協(xié)助各地商家收集社區(qū)需求，從而實現(xiàn)在線下單。
此前8月，多多買菜正式上線，開始與興盛優(yōu)選、美團買菜展開直接競爭，先是APP端出現(xiàn)多多買菜頻道，更是迅速推出同名小程序與“多多買菜門店端”服務(wù)號：采取的是與本地商超合作，線上賣菜、線下提菜的路徑。
與別家合作前置倉自建供應(yīng)鏈模式不同的是，多多買菜采取了只幫“合作商家”在線賣菜的方式，換而言之，多多買菜把實惠送給了合作商家，而它想要的似乎只是“用戶”。
在這一邏輯下，拼多多采取了極為激進的補貼方式，以更高方式補貼團長，打出的旗幟是10億量級，除此之外，還采取了“三高”戰(zhàn)術(shù)：高補貼拉新、高頻率回訪、率入駐。
賣菜熱不熱？
阿里、騰訊、美團、滴滴、字節(jié)跳動盡數(shù)入局，而當(dāng)前跑得最猛的是拼多多——多多買菜。
多位競品人士告訴阿德哥，多多買菜團隊更加年輕，除了在品控方面并未實現(xiàn)良好管控之外，其犀利程度、其執(zhí)行力，遠超阿里鐵軍。
騰訊陣營拉出了興盛優(yōu)選、食享會；而阿里系除了為十薈團、你我您合并之后的新十薈團打通阿里供應(yīng)鏈之外，更是在近期有了新動作：菜鳥驛站團購接入了大潤發(fā)的商超，盒馬推出了盒馬mini和盒粉群，據(jù)傳零售通事業(yè)部亦正在籌備新的社區(qū)團購部門。
實際上，今年的互聯(lián)網(wǎng)，除了5G軟硬概念之外，最大的賽道是賣菜，它超過了前幾年前輩造出的“新零售”概念。
今年，以賣菜為核心的生鮮賽道上，目前已宣布和匯聚的資金已超過200億元。
黃崢似乎看準了這條賽道，而現(xiàn)在的增量搏殺，僅僅是開始。
“此一時”的策略，是黃崢鐵了心要拿下僅比外賣吃飯稍弱的剛需——買菜，既高頻，又具備想像力。
要知道，首先撬動農(nóng)村及五環(huán)外的，是拼多多。而拼多多C2M端的大成，其實在農(nóng)產(chǎn)品，賣空一個地方的農(nóng)產(chǎn)品，早已在拼多多持續(xù)實現(xiàn)。
而在未來嫁接進自己的供應(yīng)鏈，顯然在邏輯上已是必須。而當(dāng)務(wù)之急，是拿下更大規(guī)模的“增量”用戶。
黃崢絕非魏延，僅僅是有反骨，他也更不會是鄧艾、鐘會，他是司馬一族。
黃崢如是說，我認為最好的利用營收的方式就是投資R&D、基礎(chǔ)設(shè)施、用戶認可度、品牌知名度。重要的是，
培養(yǎng)人們的消費習(xí)慣，讓人們以拼多多為最主要的消費平臺。
黃崢之野心，蒼天可鑒，近在咫尺的數(shù)據(jù)是：年活躍買家已增至7.313億人，第三季度平均月活躍用戶為6.434億人。
與之對應(yīng)的是，阿里最近的數(shù)據(jù)是：年活躍買家7.57億，2020年9月，中國零售市場移動月活躍用戶8.81億人。
有人在意ARPU值、GMV，但拼多多似乎更在意客單量、復(fù)購率和用戶數(shù)。
依阿德哥判斷，電商格局正在乾坤大挪移。
嗯，了不起的蓋茨比，摁不住的拼多多。
文章來源：人人都是產(chǎn)品經(jīng)理 作者：韓志鵬
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
亞馬遜作為一個知名的電商平臺，它的成功背后卻有一個很難讓人理解的設(shè)計邏輯：成功的設(shè)計不一定是美觀的。為什么會這么說呢？本文將從四個維度展開分析，希望對你有幫助
在這個流量為王的短視頻時代，人人皆可拍視頻。對于短視頻創(chuàng)作團隊來說，腳本是提率、保證主題、節(jié)省溝通成本的重要工具。但腳本的制作并不簡單，也嚇跑了許多準備拍攝短視頻的創(chuàng)作者。其實，對于短視頻小白來說，寫劇本并不難用，本文作者就通過這3大黃金原則，教你寫好一個抖音短視頻腳本。
當(dāng)你在設(shè)計表單時，是否對文本框和表單的規(guī)則有疑惑？本文的一些簡單的規(guī)則將幫助你完成設(shè)計用戶希望完成的表單。
上圖是表單的發(fā)展歷程，由石刻上的表單到紙質(zhì)表單再到電腦上輸入的表單。印刷式的表單已存在多年，我們可以從其設(shè)計中學(xué)到一些技巧。
一、文本框剖析
文本框允許用戶在界面中輸入文本。它們通常顯示在表單和對話框中。文本字段組件設(shè)計應(yīng)為交互提供明確的可見性，使字段在布局中好發(fā)現(xiàn)，填充且容易理解。
這些是基本文本字段的重要元素：
1.容器-可交互輸入文本的區(qū)域
2.輸入文本-輸入文本字段
3.標簽文本(標題)-告訴用戶給定表單字段中屬于什么信息
4.占位符文本-是所需信息的描述或示例，在用戶輸入文本后會被替換
5.幫助提示或驗證文本（可選） -提供其他上下文或驗證消息
6.頭部圖標（可選） -描述文本字段所需的輸入類型
7.尾部圖標（可選） —對輸入的文本的附加控制，例如清除，隱藏/顯示等
二、文本框類型
它們大多數(shù)基于基本文本框，為了更好地展示特定類型的信息而做的演變，例如輸入信用卡號的文本框。以下是我們創(chuàng)建的整個UI中最常用的輸入類型的一些示例：
為收集的數(shù)據(jù)提供正確的文本框類型，將幫助用戶以正確的格式輸入信息，并避免錯誤，從而使填寫過程盡可能簡單。
可以通過提供視覺上的變化來傳達文本框的狀態(tài)。輸入文本字段可以具有以下狀態(tài)之一：未激活，懸停，激活，禁用，校驗，報錯。大家在做表單設(shè)計時最好的做法就是遵循這些狀態(tài)的變化，不要挑戰(zhàn)已經(jīng)形成的用戶思維模型。
通常，文本框的標題有三種常用的位置可選擇：頂部，左側(cè)對齊和右側(cè)對齊。采用哪種樣式將取決于表單的主要目標和表單的大小，組件庫以及要設(shè)計的平臺。它們各自具有一些優(yōu)點和缺點。
我已經(jīng)根據(jù)大型設(shè)計研究的研究結(jié)果進行了匯總，最開始的Material design指南中流行的下劃線輸入并不是最佳選擇。有趣的是，同一項研究表明，用戶更喜歡帶有圓角的輸入。
當(dāng)用戶不熟悉所要填寫的內(nèi)容時，這是一個不錯的選擇
優(yōu)點：標題易于拓展；充分利用垂直空間
缺點：標題和相應(yīng)的輸入內(nèi)容之間的距離過長，而且不一致的距離會增加文本輸入的完成時間
與左對齊的標題相比，完成時間快將近兩倍
優(yōu)點：文本的標題和輸入內(nèi)容的位置更緊密，減少了了眼睛的運動次數(shù)，從而縮短了完成時間
缺點：難以快速掃描表單并了解所需的所有信息
這是在大多數(shù)情況下最快的時間和最全面的選擇。在移動端上效果很好，因為它們不需要很多水平空間。
優(yōu)點：能夠讓用戶單一眼球移動即可了解輸入標題和輸入文本，能夠更快的完成
缺點：需要更多垂直空間
為表單中的所有文本框都使用相同的輸入長度會使它們在視覺展現(xiàn)上令人愉悅，但是卻很難完成填寫。
輸入信息后文本框內(nèi)占位文本的消失，會對用戶的短期記憶產(chǎn)生壓力。沒有標題，用戶將無法在提交表單之前檢查他們提供的所有信息。如果您需要極簡的表單設(shè)計，則可以使用“Material design”浮動標題的方法。
表單內(nèi)的占位符文本有時會使用戶感到困惑，最好在字段外使用提示文本。
使用自動完成功能幫助解決部分查詢功能，在用戶的輸入框中，用戶可以按Enter或“右箭頭鍵”使用它。
使用自動聯(lián)想值搜索相關(guān)的關(guān)鍵字和建議使用的內(nèi)容列表。列表以下拉彈層形式顯示多個建議列表。
預(yù)填充字段并使用智能默認值。通常，您可以通過IP或地理位置輕松檢測用戶所在的國家和城市。根據(jù)最常見的方案進行分析，我們一般可以定義默認情況下應(yīng)選擇的內(nèi)容。
提供上下文信息。為了用戶做出正確的決定或避免錯誤，用戶在進行轉(zhuǎn)帳時將需要一些其他信息，例如帳戶余額，如果能夠從上下文中獲取這些信息，就請及時給出。
“實時校驗”是在用戶瀏覽表單時實時檢查用戶輸入的有效性，而不是在用戶提交表單時一次性檢查全部輸入：
驗證消息顯示在靠近輸入的區(qū)域，并一起顯示
不要太過于激進的方式提示錯誤消息，應(yīng)該告訴用戶如何解決問題，而不是責(zé)怪他們
當(dāng)字段在用戶完成輸入之前就被標記為無效時，請避免“提前驗證”
考慮使用“正向校驗”，可以增加一種愉悅感和成就感
它將消除視覺和認知負擔(dān)，并且看起來更簡單。
不要將全名和日期之類的文本分成多個字段
不要多次詢問相同的信息
使用標簽和提示復(fù)制以盡可能地縮短它
我們僅展示基本要點，通過逐步顯示信息的方式來幫助用戶管理信息的復(fù)雜性，在用戶需要的時候再展示出來。比如加個開關(guān)按鈕把不重要的信息隱藏。
使用條件邏輯能夠根據(jù)用戶的答案，自動顯示或隱藏某些字段，并可以在表單中t跳過頁面。這種方法不僅可以減少字段數(shù)，而且可以使填寫過程更具個性化和對話性。
簡化復(fù)雜表單的最簡單方法之一就是開始對相關(guān)字段進行分組。格式塔心理學(xué)中有多種分組原則，可以使項目感覺相關(guān)：接近度，相似度，連續(xù)性，閉合性和連通性。將數(shù)十個非結(jié)構(gòu)化字段分組為幾個可管理的集合將顯著提高表單的可用性。
有時即使刪除了所有不必要的內(nèi)容，某些表單也會很龐大。將大型任務(wù)分解為一系列較小的任務(wù)看起來容易得多，并促使用戶將填寫過程進行到最后。
顯示步驟條，以視覺方式傳達用戶的進度，這可以提高滿意度并激發(fā)用戶繼續(xù)填寫的動力
不要過于細化表單，太多的步驟將無濟于事，只會惹惱用戶
對關(guān)鍵信息進行匯總以減輕用戶的焦慮，最后需要進行復(fù)查
一列布局為用戶創(chuàng)建了一條清晰的完成路徑。使用多列表單布局的后果包括：用戶跳過他們實際要輸入數(shù)據(jù)的字段；將數(shù)據(jù)輸入到錯誤的字段中；或者只是想暫停一下而可能導(dǎo)致放棄。
如果表單足夠大，可以分成多個步驟，則應(yīng)該為它分配一個單獨的，清晰明確的空間。顯示常規(guī)導(dǎo)航或任何會破壞表單填寫過程的鏈接/按鈕，只會造成混亂。我也建議不要在小型彈出窗口中使用多步驟表單。
Android或iOS提供了幾種不同的鍵盤類型，每種類型的鍵盤都旨在促進不同類型的輸入。為了簡化數(shù)據(jù)輸入，在編輯文本字段時顯示的鍵盤應(yīng)適合該字段中的內(nèi)容類型。注意鍵盤將出現(xiàn)的位置。為了避免不必要的頁面滾動，請將文本字段放在上方區(qū)域。
允許用戶取消隱藏密碼，而不是要求他們輸入兩次密碼，這對于生成密碼的應(yīng)用程序也將更有效
始終顯示密碼要求，并顯示用戶在滿足填寫條件方面的進度。嘗試簡化對用戶的要求
使用強度計量條以鼓勵用戶創(chuàng)建更強的密碼
文章來源：站酷 作者：ZZiUP
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
不知道各位鐵子們的朋友圈是啥樣，反正我的朋友圈幾乎被vivo刷屏了；嚇的我趕緊看了看微博和知乎這個號稱 “前蘋果設(shè)計師操刀” 的系統(tǒng)到底有什么不一樣。
瀏覽了幾十篇相關(guān)文章和報道，好評如潮，我根據(jù)這些輸入總結(jié)了如下幾個特性：
OriginOS參考了原生安卓、iOS和Windows 10的交互特點，將傳統(tǒng)安卓的抽屜、桌面、小部件整合起來，按用戶的使用習(xí)慣和用戶行為感知形成一個叫做TimeLine的時間流動線。
在OriginOS原子界面中，vivo希望用戶不再區(qū)分桌面、抽屜和插件，而是根據(jù)自己的實際需要在桌面安排想要的內(nèi)容。這個內(nèi)容可能是APP圖標、可能是APP小部件、也可以是系統(tǒng)插件?？傊?，根據(jù)用戶的行為，在桌面展示用戶需要的東西。
在安卓設(shè)計規(guī)范之外，vivo發(fā)明了一個叫做“華容網(wǎng)格體系”和“原子組件”的新規(guī)范。這一規(guī)范可以看到Windows 10和iOS 14的影子。這一規(guī)范從生態(tài)角度來說，跨越十分激進，想做到理想化的狀態(tài)，需要全行業(yè)來支撐這些組件具備更寬泛的信息展示能力。
坦誠地講vivo屬實付出了很多，在細節(jié)的追求上甚至可以跟當(dāng)年的錘子有點一拼了，但站在用戶體驗的角度上，我斗膽潑個冷水～
Origin？這是個什么，經(jīng)受了9年義務(wù)教育和4年高等教育的洗禮，我居然讀不出來，是我不行還是藍廠陽春白雪？不難看出，藍廠另外一個號稱“OS”的funtouch，我用了幾分鐘的時間才知道是“放他吃”啊！
對比下MIUI，colorOS和flyme已經(jīng)弱爆了，更別提 “充電2小時5分鐘，通話5分鐘2小時” 這種神級文案了，所以我奉勸vivo放下包袱，說點人話。一個用戶都讀不出來的名字，又怎么談用戶體驗?zāi)兀?
我很是認同OriginOS的最大亮點就是華容網(wǎng)格，官方號稱“通過不同尺寸磁貼的自由變化和放置，形成每個用戶獨有的行為驅(qū)動邏輯和動線設(shè)計”，極大的鼓勵用戶自定義桌面，表面看“用戶自定義”是用戶體驗的，但這就好比把你拋在大草原里騎馬，哪都能去，去哪都行，因為并沒有一條路可以走…圖圖新鮮還行，但最終我還是不敢走。WindowsPhone當(dāng)年的界面就是這種情況，官方動態(tài)配圖看好的不行，可是對用戶有著極大的審美要求，排列的不好可真是相當(dāng)丑。
再有一點，這個網(wǎng)格系統(tǒng)讓我想起了魅族Flyme的smartbar：
Smart bar 是魅族在旗艦手機 MX2 發(fā)布時推出的一項操作解決方案。它智能整合系統(tǒng)返回鍵和菜單鍵，使其與軟件功能欄合二為一?！暗讬凇弊笥曳謩e顯示返回與菜單鍵，中間三個空位留給軟件功能按鈕。如果軟件功能按鈕過多，Smart bar會將其自動放進菜單欄。雙層變單層，優(yōu)先的屏幕顯示區(qū)域被更好的釋放，上下點擊也不會出現(xiàn)誤操作，而且界面更美觀，風(fēng)格也更加統(tǒng)一。
本身是好心，但需要第三方來適配，無形中加大了第三方的工作量，顯然vivo還不具備像蘋果一樣的號召力來牽動生態(tài)內(nèi)的伙伴來搞這個。
△ colorOS
想比OPPO的“無邊有界”，vivo沒有一個統(tǒng)一的視覺語言來Cover，你能看到三種形式“扁平”“擬物”“新擬態(tài)”共存其中，特別是今年在Dribbble流行起來的“新擬態(tài)”，完完全全的概念設(shè)計居然被搬到系統(tǒng)上？真是大跌眼鏡。甚至你可以看得到這是 “Fluent Design” “Metro” 和 “Materia design” 的結(jié)合體，就是沒有一點蘋果的影子，所以說是前蘋果設(shè)計師操刀，我是有點質(zhì)疑的…
△ 微軟 Fluent Design
以圖標為例，上圖展示了3種截然不同的風(fēng)格，在一個設(shè)計師的眼里這可能是個設(shè)計還原的事故。我理解的設(shè)計語言應(yīng)該有一個完整的世界觀，像Fluent Design一樣，ta是對自然世界的高度抽象和概括，并不是僅僅為了好看，反觀OriginOS，一個系統(tǒng)里二次元和三次元搞起了曖昧，就像初音和擎天柱談起了戀愛一樣讓人難以接受。
在交互方面，點擊OriginOS桌面的擊交互池圖標，就能直接在桌面上自由調(diào)整交互形式。要知道，以往vivo每款新機都可能更換一套手勢邏輯，現(xiàn)在OriginOS把選擇權(quán)交還給了用戶：用戶可以按照自己的習(xí)慣，在26種不同組合當(dāng)中選擇更適合自己的手勢操作組合。
但這又跟錘子的“大爆炸”和“一步”類似，你說這事是個問題吧，但也不是那么大的問題，導(dǎo)致費了大心思又獲得不了市場的局面。
最有意思的莫過于雙系統(tǒng)并行了，OriginOS和Funtouch可以自由切換，有點像我做設(shè)計不知道哪個方案更好事出了灰度大法一樣。這種做法無疑讓我覺著整個OS團隊對自己作品信心的折扣，既然是自己認為最好的，那又何必在意批評呢，放松一點，大膽一點。
不過吐槽歸吐槽，不足歸不足，vivo能有覺悟來下定決心搞搞系統(tǒng)這事還是值得鼓勵的，明顯可以看得到細節(jié)上下的功夫，也明顯可以感覺vivo是從用戶體驗的角度出發(fā)，盡量不讓APP綁架用戶，最大化的把剛需搬到你能看得到的地方，所以還是要給vivo一個贊！今天的發(fā)布也才是第一步，相信未來OriginOS可以做的更好！
文章來源：優(yōu)設(shè)
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
2020又過大半了，去年這個時候我們研究了目前國際大廠在使用的一些趨勢-晶白，點線底紋，光感，那么到了今天又有哪些新的趨勢映入眼簾呢，你還在使用那套舊的設(shè)計風(fēng)格來做設(shè)計，今天帶大家來看看今年哪些性格值得我們學(xué)習(xí)呢？
什么是液態(tài)視覺
參加過去年UCAN的同學(xué)應(yīng)該對于這個水的主KV印象深刻，當(dāng)時是以水，宇宙概念做的整個視覺。整個視覺最讓人深刻的莫過于這個畫龍點睛的水滴液態(tài)效果。
整個水滴流動感，運用到整個KV各個地方，背景還有底紋等等，印象深刻。
在2020年，液態(tài)視覺毫無疑問是當(dāng)前最受關(guān)注的視覺風(fēng)格之一。這種效果看起來像流動的各種液體，在設(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)品，智能功能這塊都會看見這種風(fēng)格的運用，所以假如你今天需要設(shè)計一款智能，很未來的產(chǎn)品，這種液態(tài)風(fēng)格設(shè)計一定需要去關(guān)注。
比如這款科技類產(chǎn)品，在啟動頁面時候，就直接跳出一個類似水滴的機器人，用智能語音和你對話，然后隨著人機交互，它會變成不同的形態(tài)。
2.流動運動感
液態(tài)視覺另外一個特點就是具有流動感運動感，在很多智能家居中被廣泛運用，比如圖中這個智能水壺頁面設(shè)計，隨著水溫度的變化，顏色和形狀都會發(fā)生變化。
在很多發(fā)布會中，營造一些比較大氣的感覺，或者宇宙場景時候經(jīng)常運營到這個風(fēng)格，在空間上和視覺上都有方向和動態(tài)效果。
這組海報設(shè)計，就非常有方向感和宇宙未來感，整個圖形都朝著一個方向走向，這也是其他圖形元素很難表達的風(fēng)格特點。
GlebKuznetsov的作品中這個動態(tài)效果，隨著液態(tài)效果的流動，整個畫面呈現(xiàn)出非常有程序的水流動效果。
3.科幻未來感
液態(tài)效果另外一個視覺感受就是未來感和科技感，因為它造型的變化，抽象圖形的表達，給人很神秘，抽象的視覺感受。
如上圖，通過將流動的圖形，進行旋轉(zhuǎn)，形成蟲洞感覺，不由自主想起宇宙和未來感。
液態(tài)視覺的技法特點
1.質(zhì)感柔軟呈現(xiàn)透明
液態(tài)風(fēng)格特點雖然視覺沖擊力強，但是視覺表現(xiàn)上，柔軟和透明是非常大的一個特點。整體的材質(zhì)比較輕，加上透明效果運用，整體會非常的輕盈。通常人工智能頁面場景運用比較多。
2.色彩豐富大膽漸變
液態(tài)風(fēng)格另外一個特點是什么。色彩豐富，大膽的漸變色，形成很強的視覺沖擊力。
整個色彩類似彩虹，或者霓虹燈反射效果，這也是它在設(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)運用過類似風(fēng)格。
在界面中運用
天貓雙11的很多場景中，其實都有用到液態(tài)設(shè)計元素，比如雙11的潮流盛典舞臺設(shè)計，就是運用的液態(tài)當(dāng)元素，整個畫面非常潮。
在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)出來的效果，也非常的有吸引力。當(dāng)然得結(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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
「輕量化」是近兩年來設(shè)計圈一個比較火的話題，什么是輕量化？從字面意思上來看「輕量」的反義詞就是臃腫、拖沓，反映到產(chǎn)品設(shè)計中就是界面內(nèi)容過載，操作步驟繁瑣。如果非要用一個字來定義，那就是“多”，內(nèi)容多，步驟多。
我們需要清楚，“多”來自于用戶的主觀感受，我們無法給出一個具體的數(shù)據(jù)指標來判定到底是不是“多”。用戶會在什么時候覺得多呢？日常生活經(jīng)驗告訴我，當(dāng)對方覺得你沒用的時候，你就會顯得多余。如果這個界面中的每一個功能對于用戶來說都是高頻操作，那么用戶是不會嫌多的。所以「輕量化設(shè)計」的主要思路可以歸納為：在用戶不需要你的時候不要出來瞎得瑟。
場景
問題來了：用戶什么時候需要我？首先我們應(yīng)該從功能層面入手，因為產(chǎn)品是一個個功能的組合體。頁面內(nèi)容臃腫問題的源頭是功能過載，在這個問題上，很多設(shè)計師吐槽自己扮演的是一個背鍋俠的角色。其實我也不想在這個頁面里塞這么多東西，但是這些功能我們必須展示給用戶啊，要不然用戶都不知道還有這個功能。
要解決這個問題，我們需要引入「場景」的概念。什么是場景？我們可以將場景理解為「外部環(huán)境」。
外部環(huán)境影響用戶的感知，感知決定了用戶的行為。只有身處于特定的場景，用戶的行為才會被觸發(fā)。在有網(wǎng)場景下，用戶啟動網(wǎng)易云音樂，進入的是首頁。在無網(wǎng)場景下，用戶進入的是我的音樂。因為有網(wǎng)，用戶“聽新歌”行為的可能性更大，無網(wǎng)聽已經(jīng)下載好的歌曲。
功能也是一樣，用戶需要這個功能，但并不是每一個場景都需要這個功能。有些比較冷門的功能，用戶只有在特定的場景才會想起使用，那么我們就可以只在那個特定的場景中展示該功能。
我們看一下兩款競品的歌曲播放界面，我們可以很明顯的發(fā)現(xiàn)，酷我音樂的界面更加簡潔明了。當(dāng)然你可能會說，那是因為酷狗音樂給用戶提供了更多的功能。
其實并沒有，兩款產(chǎn)品提供的功能都是一樣多的。只是酷我音樂做了場景化區(qū)分，以K歌功能為例，酷我音樂的處理方案是：當(dāng)用戶點擊查看歌詞的時候才會展示“K歌”的話筒圖標，因為當(dāng)用戶查看歌詞的時候，提醒引導(dǎo)用戶去K歌更加合適。
這個方案的確可以簡化界面元素，但是也帶來了另一個問題：如果用戶不查看歌詞，那就不知道原來還有k歌功能，無法給K歌功能做到有效的引流。的確如此，沒有一個完美的設(shè)計方案，任何一個設(shè)計方案都無法做到可以兼顧各方的利益。設(shè)計師的作用就是盡可能去發(fā)現(xiàn)和解決界面中最主要的矛盾點，而不是所有的矛盾點。
我們再來看一個歌曲播放界面的例子，現(xiàn)在很多產(chǎn)品都提供了AI電臺功能，所謂AI電臺就是根據(jù)你的聽歌記錄，分析你的喜愛，據(jù)此來給播放你可能感興趣的歌曲。我們之前聽歌需要手動搜索相關(guān)信息，在搜索結(jié)果（歌曲、專輯、歌單等）里查找。AI電臺的出現(xiàn)大大節(jié)省了用戶的操作步驟，那么我們來思考一個問題：與常規(guī)的場景相比，在AI電臺里播放的歌曲，界面上我們應(yīng)該做哪些改動？
AI電臺模式最大的區(qū)別就是隨機性。因為這歌是根據(jù)你的喜好隨機推薦的，你不知道會聽到這首歌，也不知道這首歌后面有哪些歌。這個就導(dǎo)致了播放模式這個功能很雞肋，蝦米音樂的AI電臺就沒有提供切換播放模式功能。
1 列表循環(huán) ：我都不知道列表里有哪些歌曲，怎么循環(huán)？
2 隨機播放 ：現(xiàn)在不就是隨機播放嗎？
3 單曲循環(huán)：這是唯一一個用戶有需求的場景；
其實AI電臺推薦的歌曲也是有歌單的，用戶點擊播放列表圖標就可以看到。這里提供了切換歌曲模式的功能，讓用戶看到了播放列表才可以選擇歌曲模式。
入口
當(dāng)我們確定了功能的最適用場景，我們接下來的任務(wù)就是如何合理的設(shè)計功能的入口。
1）入口分類
不同的層級的功能，在界面中的展示方式是不一樣的。這里我們可以分為三類：常態(tài)類、更多類和隱藏類。
比較重要的功能一般都在界面中有常態(tài)的入口，而優(yōu)先級比較低的功能，我們會選擇使用臨時視圖來承載，入口放到“更多”類按鈕里，用戶需要點擊才能查看。
優(yōu)先級的功能在界面中沒有實體的入口，需要用戶的手勢來觸發(fā)。例如，在抖音中，用戶長按視頻可以喚起三個功能：保存、收藏和不敢興趣。這三個功能抖音做的如此隱蔽，就是希望用戶不去使用。
1 保存：為什么保存到手機看？來抖音看吧
2 收藏：既然喜歡這個視頻，為什么只收藏不轉(zhuǎn)發(fā)一下，讓更多人看到
3 不感興趣：emmmm
2）入口分類
哪怕是同一個功能，位于不同的場景，我們也要對入口樣式做出調(diào)整。例如，在音頻類產(chǎn)品中，為了方便用戶在不同的場景都可以快速的進入播放界面，會在界面底部加上播放條。
但是我們也可以發(fā)現(xiàn)上圖中企鵝FM播放條的空間利用率很低，有大面積的留白。那么到了二級頁面，我們可以嘗試修改播放條的樣式，減少對界面內(nèi)容的遮擋。
類似的處理方式還有淘寶，當(dāng)用戶在首頁下滑一屏左右，那么底部欄原首頁圖標變成了火箭，用戶點擊火箭可以直接返回至頂部，不用額外新增一個浮動按鈕作為入口。
總結(jié)
以上就是我個人對于「輕量化」設(shè)計的簡單思考和總結(jié)，如果您有不同的意見或者看法，歡迎留言或者加群討論。
轉(zhuǎn)自-站酷
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
地圖基礎(chǔ)知識及通用設(shè)計原則
Part 1. 地圖的發(fā)展
地圖作為記錄地形傳遞路線信息的載體，在人類文明中一直扮演著重要的角色。其承載形式一直緊跟著時代技術(shù)的發(fā)展而變化，從石板、動物皮革，到絲綢、紙張。當(dāng)互聯(lián)網(wǎng)走進千家萬戶，地圖也步入電子化時代。
相較于紙質(zhì)地圖，電子地圖優(yōu)勢顯著：更新速度快、獲取信息效率高、更清晰、可交互等。電子地圖（后文簡稱地圖）的出現(xiàn)也影響著人們的出行方式，尤其當(dāng)智能手機普及，我們可以隨時查詢地點、發(fā)起導(dǎo)航，再也不需要提前記下高速出口和轉(zhuǎn)向路口了。
Part 2. 地圖在滴滴的重要性
滴滴擁有網(wǎng)約車、代駕、騎行、公交、自駕導(dǎo)航等眾多業(yè)務(wù)，是一站式出行平臺。而地圖作為承載出行服務(wù)的重要載體，橫向支撐著各業(yè)務(wù)線的發(fā)展。以網(wǎng)約車業(yè)務(wù)為例，調(diào)研結(jié)果顯示絕大部分乘客都會關(guān)注并使用地圖。
隨著各業(yè)務(wù)線對體驗的要求不斷提升，單一的地圖模式已經(jīng)不能滿足業(yè)務(wù)訴求及用戶需求，需要進一步細分場景、精細刻畫地圖樣式，于是地圖的設(shè)計也變得愈發(fā)重要。
Part 3. 解構(gòu)地圖
地圖承載的信息種類復(fù)雜、數(shù)量巨大，初期可能會找不到設(shè)計切入點。我們可以先了解下它的定義和實現(xiàn)方式，或許就能從中找到答案。
定義：地圖是依據(jù)一定的數(shù)學(xué)法則，采用地圖語言，經(jīng)過制圖綜合來表示地球表面的圖形。
實現(xiàn)流程：
采集真實世界的地點信息，經(jīng)過編譯轉(zhuǎn)化成數(shù)據(jù)
數(shù)據(jù)信息中包含了地點的坐標、分類、名稱等
數(shù)據(jù)經(jīng)過渲染形成可視化雛形地圖
雛形地圖經(jīng)過設(shè)計最終變成策略完整、視覺美觀的電子地圖。
結(jié)合“從雛形到完整地圖”這一步流程的實現(xiàn)方式，進而可將地圖拆分為基礎(chǔ)層、策略層和感官層。幫助各職能角色找到對應(yīng)切入點。
基礎(chǔ)層，指的是地圖的數(shù)據(jù)和能力。數(shù)據(jù)大家已經(jīng)有所了解了，能力指的是引擎渲染能力、定位能力、圖像識別能力等。有了數(shù)據(jù)及各類能力作為基礎(chǔ)，才能設(shè)計出信息精準、交互明確的地圖。
策略層，則指的是如何使用這些基礎(chǔ)數(shù)據(jù)和能力。地圖數(shù)據(jù)量非常龐大，無法全部展示，需要結(jié)合不同的場景及用戶需求，有重點的呈現(xiàn)。
感官層，便是我們給數(shù)據(jù)穿上的衣服，會根據(jù)品牌調(diào)性、對應(yīng)場景訴求等去設(shè)計最終的配色、圖標等。
解構(gòu)地圖后，我們不難看出，感官層是設(shè)計側(cè)需要關(guān)注的重點層級。
Part 4. 地圖設(shè)計原則
面對如此復(fù)雜的地圖信息，為了梳理出清晰的思路，我們會對地圖元素進行分類：根據(jù)數(shù)據(jù)的類別和呈現(xiàn)狀態(tài)，可拆分為點、線、面三類元素。
點元素：地名、POI*等。數(shù)量龐大，是城市規(guī)模的體現(xiàn)，尤其POI信息，它是地圖中顆粒度最細的位置信息。
線元素：道路、地鐵線、水系線、鐵路線、航線、邊界線等。線元素呈現(xiàn)了道路的走向、區(qū)域的劃分等，描繪出了城市的樣貌。
面元素：陸地、草地、湖泊海洋、AOI*。面元素以色塊形式出現(xiàn)，很大程度上決定了一張地圖的色調(diào)。
*名詞解釋：POI, Point of Information的縮寫，即“信息點”。一個POI可以是一棟房子、一個商鋪。
*名詞解釋：AOI, Area of Interest的縮寫，即“信息面”。指的是區(qū)域狀的地理實體，如醫(yī)院、小區(qū)等。
- 核心設(shè)計原則
從定義可以看出，地圖是一種特殊的圖形語言，是以上所有元素的集合體。相比我們所了解的UI設(shè)計、運營設(shè)計，地圖有屬于自己的設(shè)計原則。以下為大家總結(jié)了一些核心的原則：
1、符合制圖學(xué)和公眾認知
地圖發(fā)展到現(xiàn)在已經(jīng)成為了一門學(xué)科，我們會發(fā)現(xiàn)即使語言不通，拿到一張地圖時也能看懂，這是因為有制圖學(xué)和公眾認知在規(guī)范著地圖設(shè)計。如地圖默認北向上、草地水系基本遵循物理世界的顏色、省界線是實線、停車場圖標大多用P來代表等等。符合制圖學(xué)和公眾認知，大大降低了用戶的學(xué)習(xí)成本和記憶負擔(dān)，使地圖可以作為一種世界通用語言流通起來。
2、保證識別度
地圖屬于信息類工具，其上出現(xiàn)的元素均需清晰可識別，保證可讀性是最基本的設(shè)計原則。所以在設(shè)計時會限制顏色對比度、最小字號等，而具體規(guī)則會根據(jù)場景確定。
3、清晰有層次
地圖的層次清晰包含了兩個方面：信息主次清晰，視覺具有整體性。
信息主次清晰，地圖信息龐雜，沒有主次關(guān)系會影響用戶的讀圖效率。在設(shè)計時需要考慮元素本身的特點、重要性，可通過顏色、icon/文字大小、線形寬窄等表達。做到同類元素有關(guān)聯(lián)性，不同元素有差異性。同時，信息主次也會根據(jù)比例尺的變化有所調(diào)整。
視覺具有整體性，在滴滴的業(yè)務(wù)場景中，地圖通常作為最底層組件出現(xiàn)，上層還會有很多業(yè)務(wù)組件。因此在設(shè)計時需克制用色，既要保證地圖中各元素之間的區(qū)隔度，又要保證地圖整體與其他業(yè)務(wù)組件拉開視覺層級。這樣才能更好的突出當(dāng)前業(yè)務(wù)模塊的重點，提升整體的使用效率和體驗。
4、細分地圖模式
地圖在各業(yè)務(wù)模塊中應(yīng)用廣泛，用戶需求也不盡相同，設(shè)計時需要根據(jù)使用場景區(qū)分不同模式。以網(wǎng)約車場景為例，業(yè)務(wù)信息始終處于上層，地圖用來幫助用戶定位、快速發(fā)單。因此，網(wǎng)約車場景的地圖整體性強、色調(diào)偏冷、視覺層級后退，能更好的搭配網(wǎng)約車模塊的整體設(shè)計，保證用戶的操作效率。
5、具有品牌特性
品牌調(diào)性一直是滴滴設(shè)計層面非常關(guān)注的原則，品牌基因貫穿了所有產(chǎn)品，始終具有獨特的視覺風(fēng)格。遵循品牌的視覺語言，使地圖可以更好的融合到產(chǎn)品中，保證了設(shè)計的統(tǒng)一性。
文章來源：站酷 作者：CDX創(chuàng)意設(shè)計中心
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
標簽: 交互設(shè)計 交互設(shè)計公司 用戶研究公司 共情設(shè)計
為大家梳理一個web表格設(shè)計框架，希望能夠給大家?guī)硗暾牟灰粯拥膬?nèi)容。全文12,598字 ，預(yù)計閱讀30分鐘，建議收藏。
在網(wǎng)頁或桌面端為載體的B端產(chǎn)品和生產(chǎn)力工具中，越來越多的設(shè)計師需要和數(shù)據(jù)打交道，查詢和處理數(shù)據(jù)的能力是當(dāng)前正在設(shè)計的大多數(shù)產(chǎn)品的關(guān)鍵要求之一，表格被公認為是展現(xiàn)數(shù)據(jù)最為清晰、的形式之一，也是世界上最常用的用戶界面工具，其重要性不言而喻。
表格，展示行列數(shù)據(jù)，既是一種可視化交流模式，又是一種整理數(shù)據(jù)的手段。表格幫助我們組織和展示信息，同時保證信息的可讀性，從大量信息中找到所需內(nèi)容；通過合理布局，感知不同信息間的關(guān)聯(lián)與區(qū)別，進行分析和比較；對數(shù)據(jù)進行排序、搜索、分頁、自定義操作等復(fù)雜行為。
表格的行元素和列元素行和相交就會形成一個簡單的二維表，行，列元素的空間組合就確定了一個個單元格。常見的表格布局有水平型、垂直型和矩陣型三種基本布局，分別強調(diào)行、列、單元格。
水平型會弱化列的存在，強調(diào)行信息的連貫性，適用于用戶閱讀信息時是從左到右，然后自上而下逐條掃描。垂直型是通過強化列的視覺特征來突出不同列信息的對比。矩陣型的表格有均勻統(tǒng)一的分割線，單元格比較明顯，適用于列信息較多而沒有足夠空間用留白來分割信息的表格，同時我認為單元格合并的情況也屬于矩陣型。
還有比較常用的表格類型層級型：
層級表
是表達結(jié)構(gòu)性關(guān)系的表格，表現(xiàn)得如同樹的分支，所以又叫樹列表。每一個條目可展開或折疊包含的更詳細的行信息，也包含嵌套子表格。
層級表并不如矩陣表直觀，但通過結(jié)構(gòu)化的組織方式逐級展示表的數(shù)據(jù)內(nèi)容，讓整體信息架構(gòu)一目了然，非常適合大型數(shù)據(jù)表。
結(jié)合層級表的使用場景，多以查看為主，編輯需求較少。
同時還有特殊的表格類型，圖表型與卡片型：
圖表型
除了在單元格中引用圖表之外，很多時候都會提供圖表/表格視圖切換，便于用戶從圖形角度查看、分析自己關(guān)注的數(shù)據(jù)。有時也會有“圖表+表格”的形式，這時候，表格往往只作為明細放在頁面底部。大量的表格也會導(dǎo)致視覺的單調(diào)。
卡片型
可以用卡片的形式來展示信息，將信息以組的概念呈現(xiàn)，單張卡片內(nèi)的信息按優(yōu)先級進行排列。此外，卡片彼此之間又形成一個整體。
卡片是一種承載信息的容器，對可承載的內(nèi)容類型無過多限制，它讓一類信息集中化，增強區(qū)塊感的同時更易于操作；卡片通常以網(wǎng)格或矩陣的方式排列，傳達相互之間的層級關(guān)系。適合較為輕量級和個性化較強的信息區(qū)塊展示。
注：在有限的表格空間內(nèi)需注意卡片信息之間的間距，若卡片信息過長可做截斷處理。
在實際工作中，上述表格類型還有可能互相結(jié)合，以更好的達到相應(yīng)的分析目的。
比如垂直–層級，矩陣–數(shù)據(jù)立體表等。
從視覺結(jié)構(gòu)的表現(xiàn)角度，個人將“表格”的構(gòu)成分為：標題、表上方篩選操作區(qū)、表頭、表體、底欄。由表頭、表體構(gòu)成內(nèi)部區(qū)域，由標題、篩選操作、底欄構(gòu)成外部區(qū)域。
標題是對表格信息內(nèi)容的整體概括，可包含數(shù)據(jù)來源及屬性(日期、地區(qū)等)，以便用戶對表格內(nèi)容有整體認知。給數(shù)據(jù)表格起一個清晰簡明的標題，與其他的設(shè)計同等重要。有了好的標題，表格就可以獨立使用，如果導(dǎo)航菜單層級清晰，同樣能起到標題的作用。標題作為最重要的識別元素，默認展示在左上角。
這里特指位于表頭的上方的操作區(qū)域，包含篩選，操作按鈕等其他操作。篩選區(qū)包含模糊搜索和條件篩選，按鈕分為增刪改和其它業(yè)務(wù)處理操作，合理設(shè)計篩選區(qū)可以大大提高用戶的效率。
表頭對數(shù)據(jù)性質(zhì)的歸類。表頭按慣例要對數(shù)據(jù)的簡況做出反映，如被調(diào)查者的性別、年齡、學(xué)歷、收入、家庭成員組成、政治背景、經(jīng)濟狀況等。表頭的字段名稱應(yīng)當(dāng)符合人們的思維習(xí)慣，保證用戶理解。如果有需要解釋，則在字段名稱旁邊加說明小圖標(小問號)。表頭在這里也能指列行標簽，是對所屬行或列數(shù)據(jù)的描述。
除了容納行/列標簽之外，表頭也可以進行排序、搜索、篩選等。
表體是表格的主體內(nèi)容，具體信息數(shù)據(jù)內(nèi)容的填充區(qū)域，由一個個基礎(chǔ)的單元格組成，單元格是表格呈現(xiàn)數(shù)據(jù)信息的基本單位，可以是計數(shù)、百分比、均值、"-"等任何數(shù)據(jù)。表體包含數(shù)據(jù)，分割線，背景，單元格數(shù)據(jù)可進行點擊操作，如鏈接跳轉(zhuǎn)(項目或者商品等)、展開嵌套表的子集信息(子表格)、操作按鈕(查看編輯)等。
表尾一般是統(tǒng)計類數(shù)據(jù)，例如合計、平均數(shù)等。表尾使用頻率較少，且重要性明顯不如表頭，我就把它歸到表體這類。
底欄在表格最下方，主要展示正文中的數(shù)據(jù)量或單頁數(shù)據(jù)的概覽信息，也常提供統(tǒng)計功能，供用戶了解總體進展。底欄一般放統(tǒng)計信息、分頁控件、備注說明、操作按鈕(加載更多)等內(nèi)容。
底欄最常見的元素就是分頁，分頁可以放在頭部或底部，常見的還是放到底部，分頁固定能省去用戶需要翻到頂部或底部進行操作的麻煩。分頁可分為整體頁碼平鋪式、全功能版、簡易版等，需要根據(jù)不同的場景選擇最優(yōu)的設(shè)計方案，比如有的時候并不需要定點跳轉(zhuǎn)。
無限滾動可以替代分頁，但對于功能優(yōu)先的應(yīng)用未必適用。下圖為查看更多按鈕，比較少見：
同時，在選中操作的下，操作按鈕也可以位于底欄，在未選中時操作置灰。
采用格式一致外觀，突出有利于對象識別的關(guān)鍵信息。
合適的填充和邊距對于視覺設(shè)計至關(guān)重要，既包括保證數(shù)據(jù)單元格之間的留白，又包括單元格內(nèi)部留白，以保證易讀性，當(dāng)創(chuàng)建表格設(shè)計規(guī)范并嚴格遵循后，就可以創(chuàng)建視覺一致的表。表格本身應(yīng)具有最小寬度，在不同畫面中寬度應(yīng)可以增長到整個空間，所以每個列也需具備最小寬度。如果頁面寬度小于表格，那么表格應(yīng)水平可拖拽。
數(shù)據(jù)合適的位置排列能夠提升數(shù)據(jù)的瀏覽效率和準確度。對齊能夠很好的形成視覺引導(dǎo)線，會讓表格更加規(guī)范易理解，給用戶視覺上的統(tǒng)一感，視線流動更順暢，讓用戶快速的捕捉到所需內(nèi)容。
正如連續(xù)律所描述的，人們傾向于把那些經(jīng)歷最小變化或阻斷的直線或圓滑曲線知覺為一個整體，傾向于使知覺對象的直線繼續(xù)成為直線，使曲線繼續(xù)成為曲線。在界面設(shè)計中，將元素進行對齊，既符合用戶的認知特性，也能引導(dǎo)視覺流向，讓用戶更流暢地接收信息。
數(shù)字應(yīng)該右對齊
在表格中，諸如金額、數(shù)量等數(shù)值排列時，通常采用“右對齊”方式，既方便用戶快捷讀取數(shù)據(jù)，還可以使用戶進行縱向數(shù)據(jù)對比。數(shù)字是從右向左讀的，是因為我們對比數(shù)字時，首先看個位，然后十位、百位。當(dāng)個位數(shù)值對齊時，我們就可以快速查看前面的數(shù)值，比較多個數(shù)據(jù)的大小。因此，表格的數(shù)字應(yīng)當(dāng)右對齊。
當(dāng)我們常用的字體如果不同數(shù)字寬度不一致時，會導(dǎo)致千位分隔符不在一條直線上，所以要選擇數(shù)字等寬的字體，等寬的數(shù)字在同一豎線時更容易對比。
文字信息左對齊
因為我們閱讀文字信息是從左向右讀，如果不采用左對齊，會降低瀏覽文字的效率。
混合型文本左對齊
當(dāng)數(shù)字、文字、字母組成混合數(shù)據(jù)時，標題和正文左對齊，使用了一個視覺起點。
在實際工作中，主流框架組件，表格列數(shù)據(jù)對齊同時針對分割線，雖不是完美中的對齊，但開發(fā)成本低。
不論何種對齊方式，都需要考慮到該字段可能存在的極端情況。如：普通文本若過長，可在鼠標懸停狀態(tài)時單元格展開列出全部字段信息。
一般表格具有的顏色盡可能少。顏色和可讀性是密切相關(guān)的，要合理的使用顏色，普通表盡量使用簡單的背景色和點綴色。背景色方面，除了行/列交替顏色(可以區(qū)隔內(nèi)容，引導(dǎo)視線)、懸停高亮底色(便于準確辨別光標所在行)等處理方法，還可以對表頭表尾進行視覺區(qū)分。但不能增加過多顏色以引起混亂。
分割線顏色盡量不要與背景色相差太大。當(dāng)字體選擇深灰色，背景為淺白色時，邊框選擇淺灰色，這樣可以減少我們視覺疲勞，不會使表格看起來令人生畏。
表頭標簽應(yīng)該簡煉準確，以達到節(jié)省表頭空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數(shù)據(jù)本身。當(dāng)然對于產(chǎn)品而言，先能把事情說清楚，再考慮文字的簡潔性。
當(dāng)數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時候，使用多級表頭來體現(xiàn)表頭與數(shù)據(jù)的層次關(guān)系，如下圖：
當(dāng)數(shù)據(jù)有看不懂或生僻的信息時，用戶期望有人告訴他為什么會這樣，就需要在表頭標簽后加上小問號，鼠標懸停彈出說明文字的提示框。
不需要表頭
如果表格數(shù)據(jù)可以自我解釋，表頭就可以不需要。電子郵件的表格是一個好例子，郵件主題，發(fā)送者，發(fā)送日期都區(qū)別度高不會混淆的。當(dāng)然有的情況表頭是不能去掉的，例如有兩個不明確的日期，這時候你就需要定義一個表頭。
所有行按邏輯排序，比如按風(fēng)險由小到大，將最安全的操作放最前面；或按照信息時間排序，由新到舊，以創(chuàng)建時間進行排序，即創(chuàng)建的排在最前面。
行高是非常重要的參數(shù)，直接影響著閱讀體驗。較小的行高承載更多信息，讓用戶無需滾動鼠標即可看到更多數(shù)據(jù)，但會降低掃描效果，導(dǎo)致視覺解析錯誤。適宜的行高使得數(shù)據(jù)更易于被閱讀，但這不代表行高越大越利于閱讀。
設(shè)置行高的原則：
A.單行數(shù)據(jù)顯示時，數(shù)據(jù)顯示緊湊、有序。
B.多行數(shù)據(jù)顯示時，弱化表格形式，提供豐富的視覺展現(xiàn)。
因此，對于單行顯示的表格，建議行高為字體高度的2.5倍到3倍；對于多行顯示的表格，建議內(nèi)容區(qū)到上下邊框的距離略小于文字高度。當(dāng)然，也可以提供切換按鈕讓用戶自己控制顯示密度。
斑馬線又稱作間行換色、隔行變色、行的交替樣式。它能讓行間界限更為明顯，同時加強視覺流的橫向引導(dǎo)，避免在閱讀表格時出現(xiàn)迷失情況，要注意兩種顏色不能反差過大。另外，可以根據(jù)實際情況選擇是否與邊框同時使用。
有時為了強調(diào)行內(nèi)信息的連續(xù)性，可去掉單元格的縱向分割線，僅使用橫向分割線和底色分割，使橫向信息更加連續(xù)通暢，以提升閱讀效率。
表格還可以通過顏色來指示狀態(tài)，顏色指示可以幫助用戶識別哪些行可能需要特別注意的行數(shù)據(jù)。
同時可以對行內(nèi)信息進行擴充，進一步弱化表格形式，豐富各類信息的視覺呈現(xiàn)，同時兼顧行與行之間的關(guān)鍵信息的對比，如上文表格布局提到的圖表的使用。
盡量減少列的數(shù)量，關(guān)注用戶需要的必要信息。當(dāng)數(shù)據(jù)列過多時，要分清主次列，非重點、輔助性信息可以通過次級入口來解決，如固定重要列(主體名稱/操作列)，次級列在表格中間區(qū)域左右拖動。
列寬嚴謹?shù)奶幚矸绞接腥N。第一，通過柵格，由列的數(shù)量決定列寬，主流框架組件一般是這種；第二，可以固定部分列的寬度，其余列則按百分比處理；第三，在固定寬度的基礎(chǔ)上，允許用戶自由拖動調(diào)整列寬的大小。（當(dāng)然我覺得不要太拘泥這個，合適就好）
為便于用戶對數(shù)據(jù)進行對比分析，可以在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化等數(shù)據(jù)處理結(jié)果，減少用戶數(shù)據(jù)加工的過程，直達用戶獲取信息的目標(需要明確用戶目標)，提高用戶的閱讀速度。
一般列的強調(diào)是配合列排序功能使用的，如點擊率、訪問量的排序。有時會使用不同粗細的縱向分割線或不同底色對列信息進行區(qū)隔，增加同類信息的對比性。
其中的關(guān)鍵區(qū)別在于數(shù)字的大小。數(shù)據(jù)的度量單位無需重復(fù)，一般在表頭標識清楚即可。
一般指空數(shù)據(jù)或零數(shù)據(jù)的情況，空白單元格容易造成用戶困惑甚至誤解，用戶會搞不清楚到底是沒有數(shù)據(jù)，還是數(shù)值為零？正確做法是，對于數(shù)據(jù)為零的單元格，要填上0，且小數(shù)點后位數(shù)、單位，都要與上下數(shù)據(jù)格式保持一致；對于沒有數(shù)據(jù)的單元格，通常是用“－”表示。
B端后臺數(shù)據(jù)類型較多，最好能為空數(shù)據(jù)做出釋義，可以在“列標簽”或底欄給出解釋文案。
單元格的寬度根據(jù)列中字符的長短自動變化寬度，超過該列寬可以省略顯示，末尾以"..."顯示，鼠標懸停時出現(xiàn)氣泡顯示完整內(nèi)容。
比如用戶重點關(guān)注數(shù)據(jù)狀態(tài)、某些數(shù)據(jù)的上升和下降等，可用符號進行標識，幫助用戶快速定位到目標信息。
水平分隔線，能顯著減輕表格在垂直方向的視覺重量，內(nèi)容更加條理清晰，便于用戶對比查看數(shù)據(jù)。
垂直分隔線，在表格中使用適合的對齊方式后，那么就可以省略；數(shù)據(jù)量級比較大的表格，列之間過于緊密時建議保留，可以使用較淡的分隔線，將不同列數(shù)據(jù)區(qū)分開來，提升瀏覽速度。
下圖采用了同時使用水平和垂直分隔線：
如果在表格中使用適合的對齊方式，分隔線就是多余的。但由于表格數(shù)據(jù)量級不同，即使要用，分隔線也要淡，不能妨礙快速瀏覽。
在web端，表格的的數(shù)據(jù)內(nèi)容超過一定“數(shù)量”時需要提供翻頁功能，這個“數(shù)量”由表頭的高度、表格的行間距、目標用戶群體的顯示設(shè)備的配置等因素來決定，原則是不要超過一屏，考慮到每個用戶的使用習(xí)慣，可以讓用戶自定義每頁的顯示的數(shù)量。相比于跨屏翻頁而言，向下滾屏?xí)憷谙挛?strong style="outline:0px;margin:0px;padding:0px;">控制表內(nèi)容中展開比較了無線滾動與分頁。
分頁控件內(nèi)容 ：用戶自定義每頁顯示的數(shù)量，當(dāng)前頁碼(行數(shù))，全部數(shù)據(jù)的頁數(shù)(行數(shù))，向前翻頁，向后翻頁，到達第一頁，到達最后一頁等。
當(dāng)用戶的數(shù)據(jù)未超過一頁時，可以隱藏翻頁控件。翻頁按鈕不可用時，須給出置灰態(tài)或不可點擊。
分頁控件做為篩選數(shù)據(jù)的一種方式，通?？梢越Y(jié)合排序、篩選等其它控件一起使用，來提升用戶的操作效率，如網(wǎng)易的郵箱，翻頁與日歷結(jié)合使用，對于有大量郵件數(shù)據(jù)的用戶來說，查閱郵件的效率更高。
除了無限滾動，還有第三種翻頁方式，鼠標點擊“加載更多”按鈕以查看更多數(shù)據(jù)。
干凈的表格使人愉悅。特別是在處理大量數(shù)據(jù)時，巨大的數(shù)據(jù)量會增加用戶的壓力，因此要減少視覺干擾。刪除不必要的分隔符與背景，去除陰影等。信息內(nèi)容的有效傳達是表格設(shè)計的本質(zhì)，讓用戶注意力聚焦在核心內(nèi)容上。所以，做減法設(shè)計就顯得可貴了。
實現(xiàn)簡化的方法是適當(dāng)刪減。如果畫面視覺很糟糕，請刪除輔助信息、不常用的控件和分散注意力的樣式，但要小心刪除必要內(nèi)容。“簡單并不意味著沒有雜亂，這是簡單的結(jié)果。簡單性在某種程度上基本上描述了對象和產(chǎn)品的目的和位置。想設(shè)計出一個井然有序的產(chǎn)品。這并不簡單?！?- Jonathan Ive
這必須是在數(shù)據(jù)允許的情況下。水平分隔線能顯著減輕長表格在垂直方向的視覺重量，加快數(shù)值的對比效率。但如果在表格中使用適合的對齊方式，豎直分隔線就是多余的。它們最大的貢獻就是縮減元素之間的距離，明確了單元格范圍。即使要用垂直分割線，也要淡，不能妨礙快速瀏覽。
不使用斑馬線，使用不同底色區(qū)分指示不同類型的數(shù)據(jù)是有必要的，但是用來區(qū)分同一類數(shù)據(jù)，斑馬線在很多時候又是沒有必要的，因為水平分割線已經(jīng)明顯區(qū)隔了。
省去分隔線，對于較小的，動態(tài)性較小的表，可以省去所有分隔線，并獲得醒目的外觀。當(dāng)然，這更多是數(shù)據(jù)量不大且易分辨的情況。
運用彩色表達組織或含義可能會增加誤解，并且引發(fā)視覺障礙者的易用性問題。普通表格一般使用顏色代表狀態(tài)或進度。
其他圖形元素，如星號、三角、圓點、對勾、叉等，雖然能夠幫助組織數(shù)據(jù)、更直觀的傳達信息，但要注意數(shù)量，物極必反，要注意克制這些元素的使用。
優(yōu)秀的表格交互給予用戶操控感，不讓其迷失在數(shù)據(jù)中。提供便捷的過濾篩選組件，配合鼠標懸停、點擊、框選等操作，方便用戶查看更多數(shù)據(jù)信息，快速定位目標數(shù)據(jù)，或根據(jù)特定規(guī)律對數(shù)據(jù)進行排序、突出、降維等處理。當(dāng)我們將這些組件與交互動作結(jié)合，用一些習(xí)以為常的交互去操縱表格時，用戶將更清晰、有信心、提效率。
篩選和搜索是用戶目標數(shù)據(jù)的好方法，這是一項基本功能，可讓用戶從默認的表格數(shù)據(jù)輕松獲取要查找的內(nèi)容，在數(shù)據(jù)量較大的表中特別有用，一般位于表上方的操作區(qū)域或表頭區(qū)域。
當(dāng)表格的數(shù)據(jù)量較大時，可在表上方操作區(qū)域增加對象搜索或數(shù)據(jù)分類來提升用戶查找效率，且能同時使用。提供多維的篩選和排序，是增加用戶效率的有效方式。
輸入搜索框輸入用戶關(guān)心的內(nèi)容，既可以實時篩選，也可以點擊觸發(fā)，一般須支持模糊查詢，否則用戶必須記住所有內(nèi)容，才能查出要找的目標項，成本過高。也有特殊情況，如保密性較高的賬號密碼列表查詢需輸入。
無論手動查詢還是自動查詢，如果查詢條件是組合的幾個，那么一般是填好全部篩選條件再讓用戶點擊查詢按鈕。因為如果用戶要查詢的表格數(shù)據(jù)具有多個屬性且相互聯(lián)系時，組合條件的查詢顯然是更合理的。
如果篩選操作是單個條件獨立查詢，各個篩選條件都是相互獨立的，那么最好填好一個條件便自動查詢。
篩選條件有時候既需要匯總數(shù)據(jù)的，又需看單一條件下的數(shù)據(jù)，比如狀態(tài)包含“待付款、待發(fā)貨和待收貨等”，此時則是做成Tab單選較好，如下圖所示。
放置在表頭標簽上的篩選，受列內(nèi)容的影響，一般做單次篩選。通過對表頭標簽旁按鈕的點擊，使用戶更快捷進入到自己的篩選條件中。通常，表單越左的列數(shù)據(jù)越重要的，也是篩選頻率與需求最高的，因此高頻的篩選場景基本可以得到滿足。
垂直滾動時，固定表頭可以讓用戶明白當(dāng)前單元格數(shù)據(jù)信息的屬性和含義，體現(xiàn)界面友好性。當(dāng)數(shù)據(jù)列差異不大，用戶不能直接根據(jù)表格數(shù)據(jù)分辨類型時，尤其需要固定表頭。當(dāng)表頭有操作時，固定表頭更能提升使用效率。
數(shù)據(jù)列表相當(dāng)龐大而復(fù)雜的時候，使用固定表頭可以幫助用戶區(qū)分列與屬性。
當(dāng)呈現(xiàn)大量數(shù)據(jù)時，表包含的列數(shù)超出了該表的最大寬度，水平滾動就無法避免。第一列(前幾列)或操作列固定能更方便信息的對比與操作?；谖覀冏x取信息的方式，從左到右放置關(guān)鍵列。最左側(cè)的列會引起最多的關(guān)注，當(dāng)我們感興趣時，才會查看其他列，它會影響用戶閱讀所需時間與精力。
在大型表格中，我們才可以水平滾動，最好是尋找可替代方案。表格中文本為什么這么長？能減少字數(shù)嘛？可以將文本換至第二行以減少水平寬度嗎？能否為過長的文字選擇別名嗎？可否用圖形條目取代？是否可以采取工具提醒？是否可以安排在窗口或?qū)υ捒蚶铮?
一般有兩個解決辦法：文本換行，對它縮排；在單元格區(qū)域截斷文本，在提示中顯示完整文本。方法一意味著我們要增加表格高度，且每行高度可能不同；方法二，如果不同文本內(nèi)容的頭幾個字一樣就存在問題了。但這兩種方法都比水平滾動好。
表格初始有一個默認排序，也叫初始排序。但有時，用戶希望將表格中某一行位置換到另一位置。
拖放似乎很簡單。就是抓住某個元素把它放到另一個地方而已。可是，事實上，拖放過程涉及到了大量細節(jié)，在拖放期間，需要處理許多特定的狀態(tài)。
用戶在拖動模塊時，頁面整體布局基本保持不變。因為移動的不是模塊，而是插入條。插入條指明了放置模塊時的目標位置。常用于數(shù)據(jù)量較小，有拖曳排序需求的場景。又可以運用在多個表一起的情況。
穿梭表格
就是多表格拖拽的情況。比如左側(cè)的表格內(nèi)容可拖拽至右側(cè)列表框，同時支持表內(nèi)上下拖拽更換位置順序，也可直接選中對象在兩欄中按鈕移動，完成拖拽行為。
那如何讓用戶知道可拖拽呢？
增加意向符號；改變光標樣式；增加被拖拽對象臨時性底色，突出顯示。
如何讓用戶知道怎么拖拽到哪里？
被拖入?yún)^(qū)域應(yīng)增加插入位置符號，可以明確指出放置模塊的目標位置，減少用戶困惑，也可以對放置操作發(fā)生后的頁面外觀提前給出預(yù)覽。同時設(shè)計時考慮上下左右兩個方向的拖拽運動分別可以觸發(fā)什么結(jié)果，超出表格范圍拖拽對象消失。
被拖動對象應(yīng)呈現(xiàn)為輕微透明的樣式？應(yīng)該顯示為完全不透明？或者改為使用縮略圖表示？我認為這三種方法都可以。透明效果也會讓更多表格內(nèi)容對用戶可見，有助于用戶預(yù)覽最終放置后的結(jié)果。從而方便用戶查看頁面，也會表明該模塊處于一種特殊模式中。透明可以表明相應(yīng)被拖拽對象尚未定位，或者說正處于過渡狀態(tài)。
排序又分為降序和升序，比如，事件相關(guān)的表格，默認時間降序排列；風(fēng)險相關(guān)的表格，默認安全降序排序。
表頭排序可以輔助用戶快速挖掘出需要關(guān)注的信息，發(fā)現(xiàn)數(shù)據(jù)信息之間的關(guān)系，一般可按數(shù)字大小、文字拼音順序、字母順序等其它數(shù)據(jù)特征進行排序。如果表格中不是所有數(shù)據(jù)都能排序時，則需要標識出可排序操作的列，一般采用三角箭頭做為標識，實時反饋當(dāng)前操作狀態(tài)。
可伸縮列
由于存在多個數(shù)據(jù)標題和列，我們只能根據(jù)表格的寬度來展示數(shù)據(jù)。在某些情況下，表格可允許用戶選擇他們關(guān)注的列，在其固定寬度基礎(chǔ)上，讓用戶可以自由拖動列寬邊緣以調(diào)整列寬。
自定義選擇列
由于數(shù)據(jù)報表，往往需要滿足各種不同的角色在不同場景下的需求，因而在表格數(shù)據(jù)顯示上，一般采取寧多勿少的原則，即盡可能提供詳細的數(shù)據(jù)，由此會數(shù)據(jù)指標過多，難以在表內(nèi)完整展示，導(dǎo)致需要水平拉伸，降低了表格的可讀性。
針對上面這個問題上，可將所有的指標名稱羅列在表格上方，并提供多選操作，在默認情況下僅展示最常用、最重要的幾個指標（如下圖）。這樣能讓用戶在表格上方看到所有指標名稱，避免了原來需要水平拖拽而導(dǎo)致指標瀏覽不全的情況。其次，用戶可以根據(jù)自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。
B端后臺通常會對應(yīng)不同的角色及不同的需求，可讓用戶根據(jù)自己的需求來定義表格的展示列及列的順序。同時系統(tǒng)應(yīng)記住用戶上一次自定義列的設(shè)置。
控制行高
較小的行高讓用戶無需滾動頁面就能查看到更多的數(shù)據(jù)，但可掃描性的效果易導(dǎo)致視覺迷失。這就是為什么許多成功的數(shù)據(jù)表設(shè)計包含了控制行高(顯示密度)的功能。
樹形表
行也可以結(jié)構(gòu)化分為不同的類別，前面提到了層級表/樹形表，可以嵌套子表格，展開和折疊?？刹僮靼粹o一般位于各級行標題左側(cè)，具有獨特的視覺效果并具有擴展或折疊的功能。單擊表中的類別標題會在類別的展開或折疊狀態(tài)之間切換。展開與折疊也將極大的影響行內(nèi)容顯示。
分頁可以將表內(nèi)容信息劃分成獨立的頁面來顯示。
優(yōu)點：
1.良好轉(zhuǎn)換：當(dāng)用戶是在結(jié)果列表中查找特定信息而不僅僅瀏覽信息流時，分頁就是好的選擇。你會知道表格總量與當(dāng)前頁的準確數(shù)量，能夠決定在哪里停下或者去哪里。
再次尋找特定數(shù)據(jù)時，分頁方案讓我們能夠大概定向到目標數(shù)據(jù)位置。用戶可能難以記錄目標數(shù)據(jù)頁數(shù)字，但一般能記錄大概范圍，而頁碼鏈接能讓用戶更容易到達那里。
2.掌控感：無限滾動就像個無止境空間——無論你滾動多久，你會感覺永遠結(jié)束不了。當(dāng)用戶知道可用行數(shù)量時，他們可以自己主觀做出決定而不是被動滾動。同樣的，當(dāng)用戶能夠看到結(jié)果的數(shù)量時，他們將能夠預(yù)估他們查看表數(shù)據(jù)大概要花費多長時間。
缺點：
額外的動作：在分頁方案中，用戶要到達下一頁表內(nèi)容，就必須點擊分頁控件上的按鈕跳轉(zhuǎn)，等待表格新內(nèi)容的加載。
表格無限下拉加載使用戶在數(shù)據(jù)內(nèi)容面前一直滾動查看。向下滾動的時候不斷加載新內(nèi)容，雖然十分方便與誘人，但不是什么場景都適用。
優(yōu)點：
1.瀏覽：無線滾動提供了一個的方法讓用戶瀏覽表數(shù)據(jù)信息，而不必等待表格新內(nèi)容的加載。當(dāng)用戶并不特意尋找特定的內(nèi)容時，他們需要通過查看大量內(nèi)容找到自己中意的信息。
2.體驗更好：用戶使用滾動能獲得比點擊分頁有更好的體驗。滾動行為要比點擊更快更容易，對于那些連續(xù)且冗長的內(nèi)容，無限滾動要比把分頁的有更好的易用性。尤其在表格區(qū)域狹小時，使用無線滾動更能節(jié)省空間。
缺點：
1.受限性能：頁面加載速度是良好體驗的一切。尤其是表格計算數(shù)據(jù)時需注意使用無限滾動，緩慢的加載速度會造成用戶的不耐煩與離開。用戶在一個表格頁面中越向下滾動，就會加載更多的內(nèi)容，當(dāng)數(shù)據(jù)量過大時，結(jié)果就是頁面性能越來越低。
2.位置丟失：無線滾動同分頁相比，沒法標記當(dāng)前位置且不能再隨意回到之前位置。一旦離開，就會丟失當(dāng)前的瀏覽記錄，如果要回到上次的位置，必須得重新滾動去尋找。當(dāng)用戶有這種行為的話，無線滾動就會讓用戶產(chǎn)生困擾厭煩。尤其當(dāng)你刷新頁面時發(fā)現(xiàn)自己又回到表格頂部，不得不重新滾動等待結(jié)果的加載以繼續(xù)查看。
3.信息缺失：滾動條并沒有反映出實際數(shù)據(jù)量。假設(shè)快要接近底部了，當(dāng)受到引誘滾動條再滾動一點點時，結(jié)果卻會發(fā)現(xiàn)表格數(shù)據(jù)量又刷新了。從一個可用性的角度來說，打破滾動條的正常使用規(guī)則對用戶來講是糟糕的。
一般來說，無限滾動適用于在數(shù)據(jù)有限且信息重復(fù)的表格，有利于內(nèi)容探索。分頁則適用用戶在尋找特定信息及瀏覽記錄，易快速訪問。
表格內(nèi)容的取舍要建立在對業(yè)務(wù)的了解之上，盡量精簡指標，隱藏不必要信息，減少干擾，避免無主次的鋪出所有信息。不要讓用戶一次性接收過于龐大的信息量，建議默認只展示用戶所必須的信息，其他次要信息通過展開下拉等方式展示，為輔助信息提供深層入口。
展開行允許用戶無需打開新頁面在表格內(nèi)即可查看附加信息，防止用戶迷失。
表格中打開表格，表格組節(jié)把相關(guān)的行組合在一起，并且能夠收縮和展開，各組節(jié)層級要有樣式區(qū)別。如有需要，在每個組節(jié)里可以顯示數(shù)據(jù)概要信息。
包括模態(tài)彈窗和非模態(tài)彈窗，模態(tài)彈窗是僅支持打開一個彈窗進行詳細查看，非模態(tài)彈窗是可以同時打開多個，并允許拖動彈窗位置進行信息對比。
模態(tài)允許用戶留在表格視圖中，且更多地關(guān)注附加信息和操作：
非模態(tài)彈窗對于主動使用的用戶來說可能很有用，可以通過一系列操作，比較不同行數(shù)據(jù)的細節(jié)：
可以通過視圖切換查看更多細節(jié)，比如在“表格”和“左列表+右詳情”之間切換，或者提供“只看文本，看文本和縮略圖，只看縮略圖”幾種查看方式。相比彈窗減少了頁面層級和隔離感。單擊行鏈接將表格轉(zhuǎn)換為左側(cè)的列表項目和右側(cè)的其他詳細信息，這讓用戶能夠解析大型數(shù)據(jù)集，而且在涉及到多個項目時不會丟失位置。
編輯表格數(shù)據(jù)在大眾化的Web應(yīng)用程序中并不常見。不過，在企業(yè)級Web應(yīng)用程序中，表格則占據(jù)統(tǒng)治地位。此時，最常見的用戶需求，就是想要像使用Excel一樣實現(xiàn)表格編輯。畢竟Excel早已成為編輯網(wǎng)格數(shù)據(jù)的一種標準。
表格數(shù)據(jù)的操作大體可分為顯性與隱性。顯性操作，指操作選項顯示在行內(nèi)，直觀明了；隱性操作，當(dāng)鼠標懸停時或勾選才顯示操作選項，界面簡潔明快，可減輕空間壓力，減少干擾。
操作項一般存在于行數(shù)據(jù)最后，為固定列，或表上方位置，兩者對應(yīng)多種操作場景。
單行數(shù)據(jù)操作
文字按鈕操作項一般不多于三個時，圖標按鈕不多于四個時，操作項跟在行條目后面；當(dāng)超過時，建議將操作折疊收起，點擊更多彈出多個操作選項。當(dāng)操作按鈕致灰時，鼠標選中可顯示原因。
如果行操作不那么重要，或者說行操作過于啰嗦影響用戶閱讀時，可使用隱形操作，鼠標在行區(qū)域懸停時，可對當(dāng)前行背景作出區(qū)分，或放大懸停區(qū)域，同時行尾出現(xiàn)可操作按鈕，進行行操作。如谷歌郵箱：
批處理操作
對于數(shù)據(jù)批量操作的場景，建議將操作放到表格上方，與復(fù)選框操作配合使用。批處理操作模式允許用戶對一行或多行對象執(zhí)行操作，并在選中復(fù)選框后激活表上方操作按鈕，如刪除、批準、拒絕、復(fù)制之類的操作，這將節(jié)省用戶時間，避免重復(fù)對多行進行相同操作。
表格上方的所有篩選或搜索按鈕可能會因操作按鈕出現(xiàn)過多而暫時隱藏，如果空間限制導(dǎo)致操作按鈕排列不下，則使用“更多操作”按鈕。
二次確認提示：對于用戶操作結(jié)果給出提示窗反饋，用戶點擊「刪除」后，直接操作；出現(xiàn)提示框告知用戶操作成功，并提供用戶「撤銷」的按鈕；用戶進行下一個操作或者15s內(nèi)不進行任何操作，提示框消失，用戶無法再「撤銷」。
在執(zhí)行某些無法撤銷的操作時，點擊刪除后，出現(xiàn)模態(tài)彈窗進行二次確認，在當(dāng)前頁面完成任務(wù)。同時禁止濫用模態(tài)彈窗進行二次確認，就既打斷用戶心流（無法將上下文帶到彈出框中），也無法避免失誤的發(fā)生。
數(shù)據(jù)較多時，單個選擇數(shù)據(jù)費時費力。單選框是只能單選，而復(fù)選框是能選擇單個、多個或全部選擇項，而實際上純粹的單選很少見，所以建議一般場景下在表格最左側(cè)加上復(fù)選框，如前面說到的批量操作，多選后，就可以批量操作。點擊選框所在行的局部能讓整行被選中，每個選定的行都接受突出顯示處理，這種做法可增大點擊區(qū)域減少界面的混亂。
具體設(shè)計時，可以按照數(shù)據(jù)類型進行選擇，如郵件已讀、未讀等。
可進行選擇的表格需告知用戶已選數(shù)據(jù)量，在翻頁時是否允許跨頁選擇；全選是當(dāng)前頁視圖中的所有項目還是選擇表格中的所有項目。
針對于需要進行數(shù)據(jù)編輯的表格。表內(nèi)編輯能使數(shù)據(jù)更具可操作性，表內(nèi)編輯一般優(yōu)于彈窗。要啟動編輯功能，必須通過鼠標單擊，而非鼠標懸停。這樣就能確保整潔的網(wǎng)格顯示效果。假如是通過鼠標懸停來觸發(fā)，鼠標每經(jīng)過一個單元格就得顯示一個編輯框，那這種編輯模式就會干擾到不同單元格間的切換，會有多么煩人。
單元格編輯：針對單個，不連續(xù)的可編輯的單元格，為了讓功能更容易被發(fā)現(xiàn)，可以在單元格數(shù)據(jù)旁放置編輯圖標，這樣可編輯和不可編輯的單元格視覺對比就十分明顯。單擊該圖標即可觸發(fā)編輯，單元格內(nèi)出現(xiàn)輸入框，保存數(shù)據(jù)并退出。有了這個隨時可見的鏈接后，編輯功能就更容易被注意到了。
單元格編輯時，也可以設(shè)置整個單元格為熱區(qū)，以便用戶觸發(fā)。
覆蓋層編輯：點擊編輯圖標觸發(fā)；通過在頁面上方添加一層來放置編輯數(shù)據(jù)。雖然編輯期間也不會離開當(dāng)前頁面，但卻不是在頁面中直接實現(xiàn)編輯。而是把一個輕量級的彈出式覆蓋層（如對話框）作為編輯窗口。
選擇覆蓋層編輯而非行內(nèi)編輯的原因也很多。有時候，不可能把某個復(fù)雜的編輯任務(wù)安排在同一個頁面中完成，如果嵌入頁面的編輯區(qū)域太大，會因為把內(nèi)容過多地推向下方而損害頁面的整體感。
而其他情況下，也可以選擇中斷當(dāng)前頁面流，尤其是被編輯的信息本身非常重要時。覆蓋層能夠為用戶提供明確的編輯空間。提示如果有必要占用專門的屏幕空間放置編輯窗格，而且頁面的上下文對編輯任務(wù)也不重要，就可以考慮使用覆蓋層編輯。
行編輯：針對同一行標簽下的數(shù)據(jù)編輯。新增數(shù)據(jù)行后，視圖定位到新增的行并高亮顯示，讓用戶快速聚焦。幾秒后高亮消失，以免過度干擾用戶。
不過，表內(nèi)編輯圖標會涉及平衡頁面中視覺干擾的問題，如果功能及其提示在頁面中的數(shù)量過多，很可能造成功能的利用率下降。如果一行有多個編輯選項，則可以適當(dāng)使用彈窗編輯數(shù)據(jù)；如果表格有大部分單元格數(shù)據(jù)需要編輯，則可以全局編輯。 
全局表格編輯：點擊表格編輯按鈕，當(dāng)前表格所有可編輯的數(shù)據(jù)單元格內(nèi)顯示文本修改框或類似XLSX的角標，進入一種特殊得編輯狀態(tài)，不會給人直覺造成混亂。這一功能基本用于大面積需要填寫和修改時，如大型填寫報表。
大型數(shù)據(jù)表由于支持編輯數(shù)據(jù)處多，這種方法的另一個問題是容易填錯單元格，想象單元格的密集，用戶意外編輯錯誤也時有發(fā)生，這樣的話需要編輯/暫存/提交三個操作。如果發(fā)現(xiàn)編輯的內(nèi)容報錯可被更正，應(yīng)直接引導(dǎo)用戶更正；如果報錯內(nèi)容不可被更正，則告知用戶原因。
大型數(shù)據(jù)表如需減少與表格無關(guān)的視覺干擾，提供表格的沉浸式閱讀體驗，可提供全屏查看的入口，但應(yīng)注意可以讓用戶便捷的退出。全屏模式可以直接屏蔽掉頁面其它內(nèi)容，只留下表格區(qū)域，用戶通過ESC鍵或按鈕隨時退出全屏模式，學(xué)習(xí)成本較低。
當(dāng)表格數(shù)據(jù)為空時，在表格的空白內(nèi)容處加入可創(chuàng)建的快捷入口，引導(dǎo)用戶新建表格數(shù)據(jù)，或者導(dǎo)入數(shù)據(jù)。如下圖郵箱已發(fā)送郵箱為空時：
當(dāng)沒有創(chuàng)建訴求的，直接告之暫無數(shù)據(jù)。如數(shù)據(jù)是系統(tǒng)產(chǎn)生的，不是由用戶創(chuàng)建的，直接告之暫無數(shù)據(jù)，話術(shù)的表述則需與后臺文案的整體風(fēng)格保持一致。
個人關(guān)于web表格設(shè)計的看法基本寫完了，在總結(jié)歸納中也發(fā)現(xiàn)了自己平常設(shè)計表格中的其他問題。大多表格設(shè)計在不同場景中需要隨機應(yīng)變，沒有絕對的規(guī)范，只有相對的規(guī)范。我們要理解規(guī)范背后的原則，推導(dǎo)出適應(yīng)其他場景的規(guī)范。
文章來源：站酷 作者：小龍哈
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://sillybuy.com