這篇文章是對大部分產品都有的簽到功能的一些總結。
說到簽到，幾乎是互聯網產品的標配了，大家估計都很熟悉。但是簽到功能并不是所有的APP都合適的，出現這個總結的原因就是小伙伴在工作中遇到問題的一個吐槽。
場景：小伙伴公司在做一個記賬功能的APP，她發現原型中有個簽到功能
小伙伴：為什么要做簽到，對于我們的產品好像沒啥用？
產品經理：吸引用戶進入APP， 提升用戶活躍度呀。
小伙伴：你用啥吸引用戶，我們就一個記賬APP？
產品經理：用戶簽到，我們就給積分，積分高了等級就高了，他可以給別人看看他多牛逼！
小伙伴陷入了久久的沉默，然后就來和我吐槽了，什么“天才”會因為一個記賬APP的等級高覺得牛逼啊……
就像小伙伴公司做簽到功能的目的是為了提高用戶的活躍度，他的初衷我覺得是對的，但是沒有考慮到產品本身適不適合做簽到、以及給予用戶的獎勵是否能吸引用戶。
所有拋開產品本身談簽到的行為都是耍流氓，我是個正經人！會結合一些市面上的產品來總結一下簽到功能，其中包括為什么要做簽到？什么產品適合做簽到？簽到有哪些方式和類型？做簽到功能需要考慮哪些東西？若總結有不足之處大家友好交流呀。
什么是簽到？在生活中第一個想到的是上班打卡、小時候上學點名。這些簽到場景都有具體的時間限制、要按規定的方式進行登記并且伴隨著未完成簽到會有一定的“懲罰”。當簽到功能被用到APP中時，APP中的簽到通常是指產品通過一些獎勵強化用戶行為并促使用戶打開APP進行瀏覽、打卡。用戶為了得到獎勵再次簽到，達成閉環，產品用簽到來提升用戶活躍度和用戶粘性，繼而達到業務上的轉化。
APP簽到和現實簽到的差別：1、APP中的簽到擴寬時間維度（一天24小時都可以簽到、并且還可以補簽）；2、強化“獎勵”只要你簽到，我就給你獎勵；3、弱化了“懲罰”，大部分APP對用戶的簽到都是給予獎勵，個別APP也有懲罰機制，如早起打卡活動，如果未達到目標，用戶參與活動的錢就會被其他完成目標的用戶瓜分。
了解了什么是簽到后，接下來就是看我們的產品適不適合做簽到，并不是所有App都適合做簽到的，適合做簽到的產品通常都具有以下特點
當用戶希望從你的產品獲得實質利益或某種精神滿足的時候，你的產品就適合做簽到。比如內容、社區、電商、金融、游戲類型產品。
當用戶認為你的產品是一個工具，那么就不適合做簽到功能。如日歷、天氣、瀏覽器、翻譯等（還有小伙伴公司正在做的記賬APP），因為用戶使用工具類產品是在有需求的時候打開并在短時間內完成操作，在沒有需求的時候不會使用。
一般簽到常用于高頻服務，低頻的工具型產品就不適合做簽到。（有人肯定會想，微信也是高頻次為什么沒有簽到，因為用戶每天都會進行社交，好的社交產品不需要簽到就有很高的活躍度。微信這樣的產品并不需要簽到功能，畢竟大家每天都會打開微信吧……增加簽到就雞肋了）
了解你的產品適不適合做“簽到”后，接下來看看APP中，為什么要做簽到，也就是簽到的作用。能想到的有提高用戶活躍度、培養用戶習慣、匯集流量轉化業務、拉新等等。接下來從用戶和產品兩個角度來看為什么要做簽到。設計師在做設計前一定要先了解好做簽到需求的目的！需要了解不同的目的相對應的設計的側重點也是不同的。
簽到有一定的作用但是小聲逼逼：簽到不能決定一個APP的死活，對產品有多大的作用，本質上還是要看產品的核心功能，要想靠簽到救活一個APP，基本不可能（除非你是王多魚）
1）促活：通過獎勵來促使用戶每天使用產品。培養用戶的使用習慣。這個其實是大多數APP做簽到的目的，也是衡量簽到功能是否成功的重要指標；設計師在設計的時候，就要考慮獎勵的樣式呈現、簽到的方式、激勵點的設置、簽到的提醒等。
2）留存：一般簽到頁面為了提高留存率，在設計上可以展示第二天或者近7天登錄的獎勵（例如很多游戲的簽到頁），會吸引想要獎勵的用戶再次登錄。如果通過簽到讓用戶養成了每日簽到的習慣，那產品的留存率將提高；
3）拉新：通過簽到來滿足用戶的技能成長記錄與分享后得到他人的夸獎、認同的需求。從而刺激用戶對外分享，讓產品獲得更多曝光，某一定程度上也能拉新。如朋友圈經常能看到keep用戶的健身簽到圖、堅持背英語的簽到圖。
4）營收：讓用戶從簽到轉化達到營收是最重要的目的?，F在很多產品的簽到功能跟商城掛鉤，給予獎勵吸引用戶購買商品，一定程度上能拉升營收。設計師在設計的時候，就要考慮優惠券、兌換的設計怎么結合到簽到中，因為優惠券能促使用戶下單、積分加現金能增加禮品、道具等的收入。
5）會員體系：簽到有助于產品建立更加完善的會員積分系統，不同的會員等級，享受的待遇和優惠不一致。通過堅持打卡，來激勵用戶激活更高的會員等級。設計師在做簽到頁的時候就要考慮和會員等級怎么掛鉤，引導用戶。
6）品牌印象：這個目的就需要設計師在簽到頁增加品牌吉祥物或其他象征物，強化用戶對產品的印象。
簽到對用戶而言，是因為能夠用戶獲利，所以才會去簽到，獲利分為物質和精神兩種。
1）物質獎勵：即用戶可以獲得積分、兌換商品、優惠券、現金等（大部分有商城的APP常用的獎勵）
2）精神獎勵：即用戶自己的情感滿足（如keep打卡技能成長記錄與分享后得到他人的夸獎、認同的需求）、以及簽到獲得不同的會員等級與用戶權限、或者虛擬的獎章（如游戲勛章）、排行榜之類的。
在了解了我們的產品是否適合做簽到后，接下來了解要把簽到功能做好，需要從哪幾個點入手？（另外，在做這篇總結的時候，有大佬的簽到設計上了首推，大家可以結合大佬的設計一起看這個模塊，食用效果更佳）
把簽到功能加到APP里，在不影響主要功能使用的前提下，把簽到功能入口做的越明顯越好，這樣才能在更新后讓用戶更加容易發現，并且讓用戶在每天簽到時能夠更加快捷，不會因為進入的路徑過長或者過于復雜而讓用戶放棄
1）首頁金剛區圖標
這類的簽到功能相對獨立且內容強大，比較能吸引用戶，有的簽到就是常規入口，如：拼多多的現金簽到、京東的領京豆、飛豬的領里程。放在首頁的目的是為了曝光。
2）底部單獨tab
這類型多見于生鮮、超市之類的APP，簽到對其功能比較重要的產品。
3）首頁右下角懸浮球
首頁右下角的懸浮球是簽到快捷入口，未簽到情況下顯示，簽到完成則會消失（之前有遇到，沒找到就不配圖了）
懸浮球會遮擋一部分底部內容以及干擾用戶操作。友好用戶體驗就是當用戶向下滑動頁面的時候懸浮入口就會消失或者收納到頁面右側只露出一點，也就不會造成干擾的問題了。
4）個人中心的列表類、按鈕類
這類是很多APP會采用的簽到模塊入口，與個人中心模塊的其他列表的展現形式一致（圖標+文字）
5）彈窗類提示
一般使用的App并不是太多，在進入APP時，就會跳彈窗，想引導用戶去簽到，因為這類形式容易造成用戶不同程度的反感。（從我的彈窗總結就能看出大家多不喜歡彈窗了）
6）導航欄
簽到在導航欄上進行展示的時候，用戶是較為容易忽略導航欄上的簽到功能的，所以設計師通常會做成金幣、紅包、禮物的形式并加上動畫效果來用戶的注意。
7）個人主頁頂部小標簽/小按鈕
通常放置在用戶名邊上或者頂部，突出簽到的功能
1）寫死的界面（需要重新發版才能更改）
這種適合簽到頁面不復雜，不需要經常調整的
2）H5（可以在不發版的情況下進行替換）
適合經常改需求的產品，可以根據需求不斷更替（如有些電商產品會根據節日做不同的簽到樣式）
1）自動簽到
在APP中就是登錄即簽到，優點是用戶很便捷簽到成本低，缺點是放棄成本也隨之變低，不利于習慣養成和形成有效轉化。用戶一般對自動簽到的感知度較低，因為自動簽到通常顯示為：連續簽到X天，獲得XX積分。用戶不能明確感知獲利信息，如簽到獲取的積分能做什么，產品想要吸引用戶長期簽到很難。在設計的時候需要把簽到結果反饋給用戶又不能給用戶形成過多的干擾。
游戲類的自動簽到一登錄就自動簽到，并向用戶展示簽到得到的獎勵，并且會展示多天的，吸引用戶再次點擊進入產品
2）手動簽到
用戶要主動去點擊并獲取獎勵。手動簽到在設計的時候，為了簽到的效率，通常會把簽到按鈕放大處理，讓用戶可以快速找到簽到入口并快速完成操作。通常會除了簽到功能外，還會有簽到說明、規則、以及引導用戶進行轉化模塊。手動簽到盡量讓用戶長時間停留更有利于用戶停留和轉化，大部分電商產品都是手動簽到。手動簽到缺點是不能一步完成，用戶通常要付出操作成本。若簽到層級太深，用戶通常注意不到（所以需要在首頁做快捷入口）
1）連續簽到
需要用戶在一段時間內連續完成簽到不可間斷，斷簽后需要重新開始的計算方式。連續簽到我認為包含了每日簽到所以不單獨拆開說。連續簽到通常會故意設計成單次簽到的獎勵不如連續簽到的獎勵多，連續簽到所獲得的獎勵內容存在疊加與翻倍關系。每完成一個短周期，就可以獲得一個大獎，增強新鮮感，刺激用戶養成連續簽到的習慣。但這樣，一旦用戶斷簽，帶來的損失感也要比前一種大得多，用戶不一定愿意重新開始，而是會徹底放棄。可以在設計中加個每日提醒功能和補簽功能。
若產品打算使用連續簽到的方式，就需要考慮斷簽的情況下的設計
A 用戶斷簽就需要重新開始簽到
B 提供補簽，可以是用積分兌換、拉新，補簽的具體方法可以很多具體可以和公司負責運營的小伙伴商量，但是要補簽對用戶來說一定要付出的成本小于補簽后獲利成本，用戶才會完成補簽動作。
2）累計簽到
用戶在在APP內達到規定次數即認為簽到成功，可間斷。斷簽后依舊計算總天數。用戶每天簽到可以獲得當日獎勵，并且只要保證周期內達到規定次數就可以獲得額外獎勵。亮點：由于能連續簽到的用戶實在太少，累積簽到可以給用戶有緩和度，給用戶還能達到的心理暗示，會更容易讓用戶接受。
當產品要設置簽到周期通常就是連續簽到方式，常見的簽到周期為5天、7天、21天、一個月。很多APP都會選擇7天這個周期設置。選擇7天，因為我們平時上班、上學都是以周為單位的，比較容易被用戶習慣。
在簽到周期的最后一天會設置一個激勵點，設計師在設計的時候可以在第三天設置激勵點，把2個小部分，因為我們在上班的過程中通常把周三做為一個節點，過了周三后，就好像馬上周末了一樣，開心！讓用戶在較短周期完成簽到獲得獎勵，再通過小周期的疊加來培養用戶簽到習慣。激勵點的設置可以和數據結合分析，看哪天最容易斷簽，就在那天設置獎勵日，讓用戶看到獎勵打開APP實現連續簽到的目的。
簽到的獎勵反饋內容和產品希望培養的用戶行為直接相關，根據產品提供給用戶的獎勵，簽到可以分成以下幾種常見類型：
1）物資激勵簽到
就是只要用戶簽到，就給用戶物資獎勵，獎勵可以是優惠券、現金抵現、抽獎、兌換商品等，是大多數產品的簽到手段，模式簡單粗暴，大部分APP都是使用這種方式。這種簽到激勵往往耗時較長，且有一定的運營成本，獎勵的價值往往都比較低。同時過程中缺乏新意，且只能滿足用戶較低層次的需求。
有個有意思的簽到是網易云簽到，雖然這個產品簽到成功會有積分獎勵，但是最吸引用戶的是每次簽到后，網易云會推薦一首歌以及一些歌曲評論，身邊有堅持網易云簽到的小伙伴基本是奔著這個獎勵去的。
還有另一種物資激勵，如早起計劃這種類型的簽到方式，是先讓用戶付出少量的資金，周期簽到完成后可以瓜分獎金池里的資金。如果簽到失敗，你前面付出的資金就會被其他完成的小伙伴瓜分，這類簽到由自愿參與，在設計的時候，要列出挑戰成功獎勵、失敗的結果，利用用戶“厭惡失去”的心理讓用戶更加容易堅持下去，并且只要參與這個計劃，每天醒來第一件事，就是快打開我們的APP進行簽到。
2）精神激勵簽到
這類簽到，主要是利用等級、稱號、曝光率、成就感、認同感等一些自我實現和尊重的需求來刺激用戶使用。最典型的產品就是Keep的運動徽章，微博話題的簽到熱度排行、螞蟻莊園等等，但對于獲得獎勵的門檻往往要求較高（例如：keep要運動目標才可以簽到）。
3）體驗驅動簽到
這有的產品沒有“簽到”功能，但是產品本身自帶簽到，將“簽到”作為產品的一種屬性，使產品擁有了每天都需要被打開的原因，很好的提高了整個產品的活躍度。例如：網易蝸牛讀書，登錄即可領1小時免費時長就是這個產品的“簽到功能”，吸引很多用戶每天登錄雖然沒有簽到功能，但是將其內化成了用戶每天必須打開它的理由。做這種簽到的前提是產品能夠滿足用戶的某個需求，就像用戶如果沒有閱讀需求，這個免費時長就毫無價值和吸引力了。
4）游戲化簽到
很多平臺為了凸顯簽到的差異化，增強吸引力，游戲化簽到方式就應運而生了。相比普通的簽到方式，游戲化包含了更加豐富的內容和場景，更容易讓用戶上癮。對用戶而言，也不會有任務般的強迫感，用戶體驗相對更好。非常建議小伙伴們可以研究下游戲化簽到。
比較典型的就是種水果，用戶簽到達到一定周期后，平臺給你送水果。支付寶的螞蟻森林和養雞就是非常成功的游戲化簽到。比如我沉迷的養雞，就是通過養雞讓小雞產生愛心，每達到5顆愛心就可以讓一個人得到救助，以這種公益的方式吸引用戶使用支付寶（因為沒飼料了，使用支付寶付款后就會產生飼料）和達到店鋪賦能（還可以看店鋪獲得飼料）。
這個模塊展示常見APP簽到的幾種樣式
1）彈窗類
此類簽到通常在一個頁面內即可完成簽到操作，無需跳轉到其他頁面，此類簽到規則在游戲類app中也運用的較多，展示模式也跟游戲類app相似。
2）標簽類
標簽卡片式適合展示當天較為重要的獎勵數據，通常在當天簽到展示信息較多的時候使用。相比其它展示類型更加清晰明了。但不能看到隔天的獎勵，刺激用戶連續簽到。
3）時間進度類
A 時間軸平鋪類
時間軸平鋪類通常可以很明顯的看到時間進度，一般以時間軸進度條橫向平鋪的形式進行展示。周期通常為7天為并設置獎勵日，培養用戶簽到習慣。在知乎看到一個問答帖：為什么現在很多男生不追女生了？下面有個高贊的回答：看不到進度條。同理，大部分人沒能堅持簽到，是因為看不到進度條。
B 日歷平鋪類
頭部展示宣傳運營信息。彈窗類上的日歷展示會相對簡潔，日歷類跳轉頁通常在簽到邏輯較為復雜的情況下使用，能夠更好的呈現當月的簽到情況。
4）勛章類
在運動健身類、游戲類App中運用較多，當直觀看到獎章榮譽，對用戶有較強的激勵作用。
游戲形式有抓娃娃、地圖闖關、澆水種樹、建設小鎮等
了解完簽到的設計要點后，怎么運用到設計中？看兩個典型的，一個是標準的簽到的產品，一個是去除簽到字樣但有簽到概念的產品
京東的簽到瓜分京豆頁面，將拉新、留存、促活、轉化結合到一塊。這一套下來，用戶在參與這個活動時，保證了用戶這23天每天會打開一次（如果漏簽，用戶會拉新補簽）。
螞蟻森林就是游戲化的方式展現出來，去除了“簽到”字樣，但是依舊達到簽到功能的產品，用戶的參與度和留存度都很高，
用戶的典型路徑為：
進入螞蟻森林界面；
收取自己行為產生的能量（運動、支付、回收……）；
去好友的頁面收取他們的能量，或者幫他們收取即將消失的能量；
積累到一定數量后，種下真實的樹。獲得證書
1、螞蟻森林的簽到形式是收取能量（或收取好友能量），能量是你前一天的運動、支付產生的
2、獎勵是產品方替你種下一棵樹并獲得證書（這個是物資獎勵+精神獎勵）這是很強的精神獎勵（看周圍小伙伴沉迷于透能量，早上7點半定鬧鐘來偷我的能量就知道了）
3、簽到周期，能量3天不收會消散，這形成了一個簽到周期。獎勵是種樹，不同的樹苗所需能量不一樣，用戶可以自行選擇對其難度小的。能量種樹并領取證書就是激勵點的設置
4、可以收取他人能量形成社交聯系（我下次也要定鬧鐘去偷他的能量！），也會進一步提升產品的活躍和留存。
這個總結了簽到的定義、什么產品適合做簽到、為什么要做簽到以及做簽到要注意哪些要點，簽到確實不能決定一個產品生死，最終要看的還是產品本身的核心功能。但如果你用得好，雖不能雪中送炭，但一定可以錦上添花。希望小伙伴們在做簽到功能的時候，能提供給大家清晰的認知和方法?？赡艽嬖谝欢ǖ木窒扌?。這個總結也斷斷續續寫了兩周，希望能對大家有幫助。
文章來源：站酷 作者：是阿三三呀
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
使用互聯網產品過程中，會有很多因素造成操作錯誤或失誤，導致無法順利完成任務。因此產品的容錯性設計是交互設計中的重要內容。
用戶在實際使用互聯網產品的過程中，會有很多因素造成操作錯誤或者失誤，而導致無法順利完成任務，或者完成任務的效率很低。產品自身所具備的容錯能力對于各種使用場景的有效覆蓋，可以提升產品糾錯效率、降低用戶操作出錯概率，因此產品的容錯性設計是交互設計中的重要內容，也是提升用戶體驗不可忽視的一個環節。
容錯性概念源于計算機領域，容錯性是指計算機系統在發生故障的情況下，依然能夠保證系統正常運行。計算機這種保證系統正常運行的能力也被稱為容錯能力。
本篇內容我們討論的是容錯性在互聯網產品領域的內涵和意義。延伸到互聯網產品設計領域，容錯性的范疇更為寬泛，涉及產品對錯誤操作承載能力的多個方面，包括：如何降低用戶操作的出錯率，如何及時提供糾錯幫助，以及如何給用戶提供解決方案等內容。
「 即便你的產品90％的時間都運行良好，但是如果在用戶需要幫助時置之不理，他們是不會忘記這一點的。——《Getting Real》」
一個產品設計的無論多么簡單，用戶都難免在使用過程中因為各種原因而犯錯?；ヂ摼W產品面向的用戶群體是復雜多樣化，教育背景的不同，行為習慣的差異，復雜的使用場景，都會使得用戶的真實操作相比產品設計之初的預期有一定出入。此外，一些產品本身存在的因素，例如產品路徑復雜，邏輯不暢等，也有可能造成用戶無法順利完成任務，亦或是完成任務的效率低，出錯率高。產品在遇到錯誤如不能夠及時糾錯幫用戶挽回損失，會給用戶帶來不好的用戶體驗，也是產品的一種設計缺陷。因此設計師應具有良好的容錯性設計思維，盡量避免用戶錯誤操作的出現，當用戶出現錯誤操作時，幫助用戶識別、診斷，及時反饋問題所在，并提出有效的解決方案，幫助用戶快速從錯誤中恢復。最終達到使產品更可用、更易用的目的，給用戶帶來更優的用戶體驗，使用戶與產品的交流更加順暢。
互聯網產品的容錯設計可從用戶使用產品的三個階段來考慮，即操作前、操作中、操作后。可大致歸納為以下幾方面內容：首先在用戶操作前給予正確有效的引導；其次在重要的操作步驟給予用戶及時有效的提示；當用戶發生操作錯誤或失誤時及時為用戶糾錯并提供有效的解決方案；最后幫助用戶在錯誤發生后迅速回到正確狀態。
在用戶開始任務操作前給出用戶正確有效的提示，可減少錯誤操作的發生。需要注意的是，引導應盡量醒目且簡單易理解，確保能引起用戶注意，并且在用戶注意到后快速獲取信息，到有效的防錯幫助。
產品常見的引導主要針對兩種情況。第一種是針對于新手用戶的功能介紹，不同于曾使用過產品的用戶或者高級用戶，新用戶首次使用產品的過程其實是一個學習的過程，此時需要讓用戶快速了解產品核心功能及主要的操作，幫助他們更快地上手。
例如下圖導航APP新版本的新手引導【如圖1】，在用戶首次啟動產品時，產品用趣味性的圖文形式給用戶展示了打車、公交乘車、實時公交路線等功能的信息介紹，能夠讓新用戶快速熟悉核心功能，并在正式使用產品的過程中提升效率，降低出錯率。
圖1-導航APP新手引導
第二種情況是針對產品上線的新功能或者較大的功能變動而設計的初次引導，產品的功能改動可能會是用戶產生不同程度的陌生感，適當的提示可幫助用戶快速熟悉新功能點或頁面信息的調整。初次引導常見的方式有很多種，包括：遮罩式引導、彈窗式引導、氣泡、浮層式引導等等。
例如版本升級后的音樂APP【如圖2】，首頁使用情感化圖文設計加遮罩式的引導，可以有效將注意力集中到特定功能上，用戶進入頁面第一時間就注意到，確保了信息傳達的有效性。
圖2-新版首頁的遮罩引導
以上列舉的內容屬于狹義層面的引導，用戶尚處在被動接受引導的學習階段，在此階段引導的目的是提醒和防錯。從廣義的層面來講，我們可將對用戶的引導理解為”消減信息的不對稱性“，當用戶面對可影響其決策的因素時，給予用戶關鍵性的信息提示和說明，可以促使用戶做出正確的決策。
針對需要加工時間的特殊品類，如烘焙蛋糕，京東到家在用戶決策的關鍵頁面和步驟展示時效提醒【如圖3】，避免用戶在完成訂單信息填寫或結算后才發現商品的配送時間超出用戶的期望，會給用戶帶來極為不好的購物體驗。
圖3-京東到家頁面中的時效提醒
當用戶進行一些如修改、刪除、覆蓋等不可逆操作時，系統需要在用戶做出這類操作指令后告知其產生的后果，讓用戶自主決策是否選擇繼續執行。在此階段的提示需要注意從以下兩個角度考慮：一是提示的方式，二是提示的時機。
在用戶完成任務的操作路徑中，大部分產品首先會選擇以彈框的形式對用戶進行信息提示。彈框可以分為模態彈框和非模態彈框兩種大的類型【如圖4】，主要區別在于是否強制用戶進行交互操作。如何選擇合適的彈框形式對用戶進行提示，要依據提示信息的優先級和視覺權重的大小，同時要清楚不同類型的彈框適合的場景。
圖4-彈框分類
模態彈窗是較重的提示方式，在用戶進行重要且有風險的操作時可優先考慮使用。其優點是可以快速獲取用戶的視覺焦點，缺點是會打斷用戶當前的操作流程，用戶需要進行如單擊“確定”、“取消”、“關閉”按鈕等操作指令將該對話框關閉后才可繼續操作。
而非模態彈框屬于輕量級的提示方式，其優點是不強制用戶進行交互操作，或者用戶依然可以在頁面進行其他操作。彈框出現一段時間后會自動消失，所以但不利于承載過多文字信息。非模態彈框對用戶造成的干擾較小，但也因此容易被用戶忽視。
給用戶的信息提示還有一點不可忽視的是反饋時機，應確保用戶在關鍵的操作步驟得到及時的反饋，因為滯后的反饋可能會導致用戶因為某一個環節的錯誤操作不得不重復操作一遍之前的流程，或者要修改關的一系列信息。
【如圖5】中的登錄頁面，用戶登錄需要依次輸入手機號、密碼、圖片驗證碼，但如果用戶輸錯了密碼并不能馬上得到反饋，依然可以繼續填寫驗證碼，只有在全部信息填寫完之后點擊登錄，系統才會校驗密碼，并提示用戶密碼錯誤重新確認，用戶需要再次輸入密碼以及識別并輸入一次驗證碼。但如果系統驗證密碼可以提前到輸入圖片驗證碼的步驟之前，在用戶在得到密碼填寫錯誤提示后則可以停止操作后面的步驟，馬上修改密碼。
圖5-登錄頁面中的提示滯后
同時，盡量為用戶提供相應的解決方案，這樣可以提升糾錯信息有效性。BOSS直聘會因為手機儲存空間不足給用戶報錯，并且會告知用戶如何去管理儲存空間，以解決此問題【如圖7】。
圖6-多行表單報錯頁面
在產品設計中，為降低操作的出錯率，限制也是一種方式。在可能造成錯誤操作的入口適當設置操作障礙或者禁止操作，增加不可逆操作的難度，可以有效規避錯誤操作發生風險、減少誤操作概率。例如常見的頁面信息置灰、按鈕置灰的設計，可以有效避免用戶的誤操作。
此外通過讓控件、動作、選項等變得可見，盡可能減少用戶記憶負擔，把需要記憶的內容作為輔助信息提供給用戶，或幫助用戶自動完成信息填寫也可以幫助用戶快捷地完成既定任務，降低出錯率。例如【如圖8】在信息填寫的步驟，可在用戶已復制的內容和上傳的圖片中自動識別姓名、電話、地址等內容，并在用戶確認后自動幫用戶填寫對應信息，為用戶大大節省時間和記憶成本，快捷地完成既定任務，降低出錯率。
在用戶執行操作后，應盡可能的為用戶保留已操作的信息，以便在發生錯誤或失誤后可撤銷之前的操作。針對一些流程較為復雜的操作任務，記錄用戶在每一步驟的操作信息，讓用戶可以從出錯的步驟上及時恢復到正確的流程上，或恢復到距離錯誤操作最近的步驟，可有效的幫用戶挽回失誤。例如很多圖片編輯的APP都支持用戶撤銷當前的操作，在用戶對照片進行多編輯后頁面上會有回到上一步和下一步操作的按鈕，可讓用戶有機會恢復到上一步操作結果上。
圖9-圖片編輯頁面頂部切換上一步和下一步的操作按鈕
以上是關于互聯網產品中容錯設計的概念、重要性以及設計方法的一些闡述和思考。在產品設計的實際應用的中，可以模擬使用場景，對目標用戶使用產品的真實操作進行行為觀察，分析對比產品設計的操作路徑與用戶真實操作的差別，發現并收集用戶可能發生錯誤或失誤操作的關鍵步驟，驗證產品的容錯能力是否能達到有效覆蓋。同時，也要通過產品數據的對比分析得出用戶操作錯誤及失誤的真實原因，指導并提升產品容錯能力的設計優化，進而不斷提升產品的可用性和易用性。
文章來源：站酷 作者：DXC設計體驗中心
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
還記得今年年初大家追捧的 新擬物化（Neumorphism）風格嘛？這種風格最初在社交媒體上風靡，很大程度上，來源于資深設計師 Michal Malewicz 的文章《Neumorphism in user interfaces》，這篇文章透過 Medium 平臺，開始在各個設計師社區當中發酵，隨后被不少平臺預測為 2020 年會逐漸流行的一種視覺設計風格。
事實上，也確實有很多產品和 UI 界面跟進了這種設計風格。包括三星在內的很多品牌甚至會使用這種風格來制作宣傳視頻，油管主播 MKBHD 也在自己的視頻中使用到了這種風格：
從美學價值上來說，新擬物化足夠現代，看起來也頗為時尚，科技感也很足，不過在在實際的應用上，新擬物化本身確實不算是一種系統全面的設計風格，因為在很多具體的 UI 元素上，是難以保證可用性和易用性的。
在需要體現出視覺縱深（Z軸方向的高程、高度）的地方，新擬物化的 UI 元素很難做到顯著，而這也使得用戶很難立刻馬上意識到「這是一個可交互的元素」：
此外，彩云還梳理了新擬物化可以應用的范疇和場景，可以說非常貼心了。不過，這不是今天要說的重點。
Michal Malewicz，對，就是去年年底讓我們注意到新擬物化風格的這個小哥，他又搞事情了：他在油管和 Medium 上又預測了可能會流行的新設計風格：Glassmorphism。
顯而易見，Glassmorphism 這個詞是 Glass（玻璃）和 Skeumorphism（擬物化）的結合，我們姑且將其稱之為「玻璃擬物化設計」。
Malewicz 小哥對于這種風格特征歸結為4點：
簡單的來說，「玻璃擬物化」在某些方面和「新擬物化」是一脈相承的，但是它有著相對更加具體的視覺隱喻，也就是我們日常接觸的「玻璃」。
如果你和經常翻看 Dribbble 或者 Behance ，你會注意到有很多設計師在有意識地采用「玻璃擬物化」美學的設計。
比如這是 Figma 團隊的設計師 Rogie 所設計的小圖標
大家著迷于這種風格到底原因何在？
1、愉悅感
首先，當然是視覺愉悅感。
使用「玻璃擬物化」來設計的界面，由于毛玻璃的通透性，在有多個控件的情況下，呈現出一種獨特的「虛實結合」的美感。
2、層次感
來自 Paperpillar 團隊的 Ghani Pradita 設計的 UI 控件
用戶可以很清晰地感知到多個不同的層次，看不清楚但是可以透過「玻璃」的「背景層」，創造朦朧效果的「玻璃層」，前景的UI控件，這已經比原有的 UI 界面多了一層，當然，實際上如果你用的巧妙，可以讓層次更多但是協調地存在。
3、呈現語境
這是設計師 Ilham Maulana 為 Plainthing Studio 團隊所設計的網頁
有些東西應該是不言自明的。比如「我在哪」「我是從哪里來的」這種事情，可以透過「玻璃」看到的背景層就能夠很好地暗示出此刻的位置。
4、微妙高級
設計師 Ghulam Rasool 設計的 UI 范例
經過「玻璃層」處理之后的背景顯得非常柔和，無論是動態還是靜態的都不會影響前景元素的呈現。同時，位于前景的文本、色彩、UI 控件依然可以保證良好的可讀性。
在設計中間的「玻璃層」的時候，可能需要你控制好這個「微妙」的程度。不過不論怎樣，這種呈現方式都非常的雅致，甚至有那么一絲「詩意」存在。
那么，這種設計風格到底是如何被塑造出來的？如果要追根溯源，「玻璃擬物化」到底是從哪里來的？
老實說，玻璃擬物化，Glassmorphism，追根溯源還是在蘋果頭上。
我之前在《Mac 視覺史 vol.3：浴「水」重生的 Mac 視覺美學》這篇文章當中，曾詳細回顧了設計師 Cordell Ratzlaff 是在怎樣的背景之下，發掘并延展出了蘋果的整套 Aqua 視覺美學：
這種對于光影的追求也促使老競爭對手微軟做出了改變，很難說幾年后微軟在Windows Vista 上所推行的「Aero」（光）視覺風格不是從「Aqua」上衍生出來的：
而「Aero」這種視覺風格當中，就使用了非常引人矚目的玻璃的質感，只不過陰影的設計毫無疑問「參考學習」了同時期 Mac OS X 當中相對明顯的黑色投影。
只是這種設計風格經歷了 Windows 7 之后，一直在自家 MP3 播放器 Zune 上使用實驗性的設計得到了青睞，并逐漸普及到整個微軟系產品，甚至因此犧牲了同時期的社交手機產品 Kin：
值得注意的是，在 Kin 系列的界面當中，「玻璃」式的半透明元素是存在的，并且很明顯是延續自「Aero」美學，只是受限于屏幕分辨率（320×240 px，320×480 px），很難呈現出更多細節。
隨后，Windows Phone 誕生，Windows 8 問世，包豪斯十足的 Metro 視覺風格成為微軟的選擇。
不過在此過程中，還有一些更重要的事情：Android 和 iOS 全面擁護扁平化設計。全新的 iOS 系統當中，全新的通知系統會使用半透明材質，用來暗示用戶當前所處的環境：
這種對于毛玻璃材質的選擇，很大程度上和時任設計高級副總裁的喬納森艾維分不開——這是一個對于材質、場景、暗喻有著清晰認知和感知力的工業設計大師，而這一點也體現在他為 iOS 7 所制作的設計語言的介紹視頻當中。至于喬納森對于玻璃材質的迷戀我們可以回頭在聊。
值得一提的是，在 移動端 UI 界面當中，成體系地使用「玻璃」的隱喻，是從 iOS 7 開始的。但是 iOS 的設計美學是一個更加龐大的東西，真正的「文藝復興」應該是在 Windows 10。
之所以說是文藝復興，很大程度上是因為微軟設計團隊在2016年的時候開始構建的 Fluent Design 這套設計美學體系，而它所使用的核心設計隱喻是「Acrylic」，也就是亞克力，是從「Aero」繼承而來。
實際上，最初的 Windows 10 更多的是在設計體系和交互上花心思，「Acrylic」其實是在發布之后很久，大概2017 年的某次重要更新中加入的「新材質」。
相比于 Windows Vista/7 時代的 「Aero」，「Acrylic」更加具體，量化，功能性更強，美學上更加優雅，而在具體的實施上，微軟的 Fluent Design 和如今的「玻璃擬物化」更加接近，而近年來很多接近「玻璃擬物化」的設計，也和這種設計美學架構近似。
微軟的 Fluent Design 當中，背景和前景之間的「Acrylic」層，其實是由5個部分構成：
當然，使用這么多手段這也是盡可能讓最終的色調盡可能地在前景的 UI 當中，顯得自然不突兀。如果你想了解更多，可以看這里：
雖然 Fluent Design 并沒有如同最初大家所期待的一樣，像 Material Design 或者蘋果的 HIG 那樣成為一種極為主流、廣泛應用的設計系統，但是它隨著 Windows 10 在世界范圍內的普及而始終潛移默化地影響著整個設計領域。
一方面，在的 Windows 10 20H2 版本當中，從開始菜單到具體的 UI 界面當中，徹底將 Windows 8 時代 Metro 風格去掉了，扎眼的動態磁貼都用上了 Fluent Design 風格的毛玻璃效果：
另外一邊，的 macOS Big Sur 也在整個 UI 界面當中大規模使用了接近「玻璃擬物化」的半透明毛玻璃視覺效果，在系統自帶的 APP 當中尤其顯著：
而值得一提的是，macOS Big Sur 和當下的 iOS 14 在視覺美學上也保持著高度的一致，尤其是在系統的設計美學邏輯上是統一的：
這種主流操作系統的背書，「玻璃擬物化」的進一步推行和普及，無疑有著重要的影響。相比于看起來高級但是炫技多于實用性的「新擬物化」，「玻璃擬物化」這種風格在各大操作系統的踐行和驗證之下，實用性更強，視覺美學上也得到目前的操作系統的驗證。
相比于 iOS 14，macOS Big Sur 和 Windows 10 20H2，我們此刻所討論的「玻璃擬物化」在視覺效果上無疑是更加激進、強化的。
設計師 Malewicz 在他的文章當中對于這種設計風格有一個非常直觀的總結：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Nathan Yau 在《數據之美》中寫到，可視化并不僅僅是一種工具，而更像是一種媒介，能最大化幫助我們挖掘數字背后的信息，讓數據「開口」講故事。
可視化設計將信息和數據轉化為用戶能夠理解的圖表、圖形和地圖等元素，通過色彩、樣式凸顯其中的變化，幫助用戶更的獲取信息、判斷趨勢、識別變化等。那么在可視化設計中怎么讓用戶能更好的看清看懂數據或信息、讓用戶快速感知數據變化、讓數據于用戶所處的情境相呼應是微交互思考的方向。
通過可視化表達，將不易理解的信息呈現的更加清晰明了，幫助用戶理解吸收。
1. 支付寶-基金指數
運用一般人對紅綠燈的理解，將其綠燈行紅燈停的概念，運用在基金投資上，幫助新手能簡單理解指數估值的走勢，更容易去判斷該基金買賣的時機，綠燈為值得購買，紅燈為建議賣出。
2. 支付寶-基金收益
欲購買基金時，透過尺標的形式選擇購買金額，同時下方展示購買該金額的預期收益，并用實際生活中的物品舉例，幫助用戶理解獲益的金額價值。
3. 手機淘寶-金幣小鎮
做任務簽到獲取能量，使用進度條的形式，來表達能量與金幣值轉換的關系，如當前獲取多少的能量，能兌換成多少金幣。
可視化中的變化凸顯能幫助用戶快速達成目標，在最少的時間內獲取更多的信息，并引導用戶進行更深層次的探究?？梢暬械淖兓癸@能幫助用戶快速達成目標，在最少的時間內獲取更多的信息，并引導用戶進行更深層次的探究。
1. AirVisual-空氣質量指標
依據顏色與人臉圖形表達空氣質量程度，顏色從綠黃橙紅紫暗紫色，人臉圖形從開心、難過的表情、戴口罩到戴防毒面具等，來表達空氣質量從好到壞，讓用戶能直接看到顏色與圖形就能感知到當前情況，且知道對應的防范方式。
2. 我的天氣-3D地圖
日出日落的時間以動態的地球展示，地球滑動操作，讓用戶能實際感知到地球的光照情況。
3. 騰訊手機管家-充電狀態
手機充電時，以整個屏幕作為充電量的比例展示，以虛擬鴨子游水的有趣形象，透過水位的高低表達當前已經充電到達的數值。
在可視化中增加與用戶情境相關的元素，能夠讓用戶獲得更貼切，更直接的信息感知。
1. 高德-導航
當開車導航的當下，如果車速過快，在屏幕的雙側會顯示紅色的超速效果提示，比起左上角的車速展示，能更直接快速的感知到已經超速了。
2. 高德-用時預估
查看行程導航的預估用時，運用柱狀圖直觀展示不同出發時間到達目的地的所需時間，滑動時有震動的切換效果，同時上方地圖會顯示該時段路途上的擁堵情況，顯示預計到達時間。
提供足夠便捷的篩選或操控組件，方便用戶查看更多視圖空間，快速定位想要的內容。
1. 攜程-機票票價對比
運用柱狀圖展示不同日期的機票票價，能直觀看出價格間的差異，點擊后，可切換到該日期，查看具體航班資訊。
2. 攜程-機票低價提醒
機票的價格是浮動的，可透過低價提醒的設置，主動提示用戶票價已到達該預期價位，設置時如果價格設置的過低，到達的可能性越低，因此以價格滑動條操作，并以綠橙紅表達成功率的高低做提示。
文章來源：優設 作者：AlibabaDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導讀：經過這次疫情，很多還在猶豫要不要經營私域流量的零售商都行動起來了。隨著公域流量越發昂貴，私域流量似乎成為了保持增長的新藥方。但是，想要玩轉私域流量并非手到擒來。本文將從三個方面對此展開分析，希望對你有幫助。
一年之前，對于很多品牌商和零售商來說，要不要經營私域流量，要不布局私域業態，可能還是掛在PPT上不痛不癢的概念。
疫情逆轉了這一切，從公域到私域全線布局，成為了品牌商和零售商的常態化選擇——這不僅關乎增長或者下跌的多寡，甚至還關乎不少實體業態的生死。
當線下客流越發稀落，公域流量越發昂貴，私域流量、私域業態，似乎成為了保增長的新藥方。
所謂的私域，與之對應的概念就是公域，是指一次獲取之后，可以反復觸達、長期運營的客戶關系，如企業通過公眾號、小程序、微信群等圈定的用戶群體。
私域玩得好，增長跑不了？
話雖如此，但玩轉私域流量，也并非手到擒來那般簡單，厘清存量增量關系，擺正公私兩域位置，是順利開張的前提。
從線下發家的名創優品創始人葉國富，一貫不怎么看重線上渠道。
線上渠道，在名創優品一直是小打小鬧——2019年底之前，其線上營收貢獻率只有1%左右。
但過度倚重線下的模式，在疫情面前，被打得七零八落——名創優品關店率一度高達50%，開業門店業績一度下跌了95%。
要活下去，除了轉道線上別無選擇，這是名創優品第一次把線上當作第二主場，微信群、小程序、公眾號等工具迅速集結起來，公司業績也在年中恢復到疫前水平。
于名創優品來說，快速回血的私域大盤，相當于風險緩沖帶。
而那些趁早挺入私域的零售商，如步步高，在疫情期間，業績不降反增，4月交易額相比去年12月提升了四成左右。
一個疑問隨之而來，疫情期間迅速膨脹的私域大盤，到底是特殊時期的曇花一現，還是可以長期持續的數字資產？私域大盤和傳統的客戶群體，到底是零和的替代關系，還是全新的增量？
這個答案非常復雜——從短期來看，似乎是零和關系，或者說從行業大盤來看，有一定的替代性；
但對于單個企業來說，增量效應顯著——客戶從線下大盤到線上大盤的趨勢性轉移，很大一部分沉淀在私域大盤里，私域業態走到前列的企業，可以攫取結構性紅利。
對此問題，天虹數字化經營中心總經理譚曉華很有發言權。
天虹與微信生態結合，始于七年前，目前已經積攢了3000多萬會員，此前，天虹百貨的線上銷售額貢獻率不到1%，如今已經常態化維持在15-16%左右，疫情結束之后，也沒有明顯回落。
增量體現在市場的拓寬上。在線下，天虹僅在8個省份的26個城市開設有線下門店，但借道私域大盤，天虹的商品銷往了22個省份的300多個城市。
“你的服務范圍跨越到原有的門店3公里、1公里范圍之外，在產生銷售的時候，那就是百分之百的增量?！弊T曉華很是滿足。
私域帶來的交易，還能緩沖線下渠道凋落的風險，有望成為彌補實體門店業績下降的第二條增長曲線。
譚曉華的危機感一直高懸，實體比重的下降是長期趨勢，做私域，未必能“馬上就能彌補下降，但是至少有了這一塊的增長和增量，是可以讓下降的趨勢，比如從原來下降的10%，現在只下降2%了”。
私域大盤的增長，還提升了天虹博弈品牌商的話語權。
此前，天虹線下門店中，只有一家蘭蔻專柜，并不是很受重視，“以前這種品，是不愛跟百貨商超一塊玩的”，譚曉華并不諱言。
但今年3月份，天虹發起的一場小程序直播，幫助蘭蔻賣貨230多萬元，讓后者很是驚喜，心甘情愿給出了A+級別的線上代理授權。
如果看不到私域的增量價值，那么商家斷然不會全力投入。
嚴格來說，流量并不稀缺，稀缺的是低成本流量——公私兩域流量，也并無絕對的好壞之分，而私域的獨特價值在于其再生和循環。
因此，多數商家都是“公私兼顧”，但在不同平臺的布局，具有互補性和差異性。比如全渠道布局的蘭蔻，在微信上聚集的是粘性用戶，因此，加強限量特供、新品種草和專屬服務是其側重點。
即便在微信生態體系里，也是既有公域，也有私域。
在微信支付運營副總經理雷茂鋒看來，視頻號算是微信生態里的公域流量挖掘機，幫助商家從微信12億用戶的公海里，引流轉化。
歸根結底，私域與公域的關系，就如同海洋和河流——不與海洋銜接的內陸河，面臨水流干涸之險；大河東流，百川入海，又為海洋引入綿綿不絕的水流。
與此同理，私域流量和公域流量，也并非互斥關系；開源活水之下，雙方可以互相引流，互為增量。
舉例而言，企業開通視頻號直播時，可以通過提前預告等方式，把沉淀在小程序、公眾號、企業微信群的忠實會員導流過去，為視頻號直播增加人氣，這就是私域為公域引流。
正是借助公私兩域流量聯動的打法，今年11·11，香港莎莎的小程序銷售額同比增長了830%。
相比于其他平臺可以快速引爆的公域流量，微信平臺私域流量的挖掘和積攢，可能是個慢功夫，但其價值在于，一旦沉淀下來，轉化率要高得多。
今年2月底，上門定制男裝品牌量品的首場直播帶貨，沒有網紅加持，也沒有經驗支撐，兩小時內僅僅吸引了1.1萬人觀看——這個觀看量著實有些拿不出手，但銷售額卻超過了50萬。
而天虹常態化的直播里觀眾甚至只有幾千人，也能賣貨幾十萬。
如今，微信支付的月活用戶已經邁過12億大關；今年1-8月，小程序實物商品GMV同比增長115%，品牌自營GMV同比增長210%。業內人士預計，今年其交易額有望突破2萬億元。
12億用戶，2萬億GMV明晃晃的擺在那里，但能否把公海的水舀到自家池塘里，需要本事。
對于開設了線下門店的商家來說，前期存在一個低成本的紅利轉換期——比如在支付完成頁，設置積分優惠、會員跳轉等功能，把一次性顧客轉化為長期會員，而后通過企業微信、小程序、公眾號、視頻號等持續激活，通過存量的線下服務去連接顧客，基本上無需太多額外投入。
當然，接下來，在存量客戶全部在線沉淀后，想要繼續擴大私域基本盤，可能就需要通過微信朋友圈廣告、支付頁廣告等去拉新轉化。
但花錢買來的私域流量性價比高不高，歸根結底在于能不能持續轉化——微信平臺的小程序觸點繁多，立體組合應用挑戰大，可運營點容易遭到忽視，因此，提升流量利用和交易轉化效率，才是重中之重。
于商家來說，河道建起來不是終點，不能轉化的私域流量也沒有價值。
社區電商興盛優選的方法是發動外部的螞蟻雄兵，依賴社群裂變，引導幾十萬名團長轉發商品和活動，11.11當日日訂單突破1200萬單。
天虹的路徑則是“全員持槍上崗”，5萬名導購“人人會直播”。
其實，除了少數種子選手外外，不是每個導購都擅長直播。最開始，天虹導購們心理壓力很大，覺得一場直播賣不出去幾萬十幾萬，都拿不出手。
但譚曉華的看法是“聊勝于無”，“哪怕你搞一場直播，只有三個人觀看，你在店里一次只能服務一個顧客，現在能服務三個，這就是價值”，譚曉華說，“我們從過去的功利模式過渡到了現在的養生模式”。
所謂的“養生”指得是，并不僅僅以銷量為單一KPI，“特價搶購、新款種草、展示搭配，云走秀，都可以”，門檻低一點，才能實現總動員。
歸根結底，公域、私域流量，沒有好壞之分，都是多多益善，因此，公私兼顧、公私合營，可能才是最優選項。
連接一切的微信，既要考量C端用戶體驗，又要顧及B端商家利益。
挖掘私域價值時，如何做到不打擾不討嫌，避免變成人人嫌惡的微商？
這是商家和微信面臨的共同挑戰。
不打擾用戶，是微信一直堅持的底線，但具體到某個功能，邊界的精準拿捏，殊為不易。
雷茂鋒認為，解決方案就是把所有的選擇權交給用戶——用戶一旦覺得打擾，就可以關閉相關功能。
此外，微信也在分層開發針對B端商家和C端用戶的不同產品，來設置隔離帶和緩沖帶，企業微信就是典型例證。
早期，顧客添加導購個人微信，后者朋友圈可以無限制發放導購和廣告信息，可能會對用戶造成打擾，而且，導購還能查看顧客朋友圈，有些顧客注重隱私，可能就不愿意添加好友。
但企業微信用戶看不到好友朋友圈，而且發布朋友圈次數也有限制，如此一來，很多顧客就打消了顧慮。
而對于商家來說，企業微信的優勢在于好友無上限，無需再增設微信小號做運營；支持人滿自動裂變新群，無需手動拉群；支持離職繼承功能，一線導購離職后，客戶和群都可以100%平移給交接人，避免客戶流失，等等。
也是因為顧忌到C端用戶的體驗，微信上線商家功能的步子，邁得都比較謹慎。
品牌商向微信提出一個需求時，通常收到的答案是“我們回去要商量一下”。
而后要經歷長達三四個月甚至半年一年的左右糾結和反復評估，內部論證這一功能和微信的基本價值觀是否一致。
曾有天虹的運營人員為此抱怨，覺得微信某些時候反應太慢，但譚曉華的回答是“你不要嫌他們慢，他們做出來一個東西就不會再回退，因為回退是很可怕的，或者這個平臺不經營了，對我們商家來說那是致命性的打擊?！?
一旦評估某些功能會遭遇C端用戶的集體反感，這樣的功能就不會上線——比如，曾有商家提議，能否開發一個群轉移功能，直接把朋友圈潛在顧客遷移到微信群，方便商家運營轉化，但這樣明顯打擾用戶的功能，應該永遠都不會上線。
盡管微信拓展私域業態的進展也不是一帆風順，盡管商家私域業態的進展快慢不一，但2020年，顯然是私域業態的大年景，疫情之后，沒有多少商家再對私域流量“視而不見”。
文章來源：人人都是產品經理 作者：財經故事會
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
配色一直以來都是設計圈內老生常談的話題，一幅優秀的作品離不開合理協調的顏色搭配。不同的顏色所表達的含義不同。即便是相同的顏色，明度和純度不同，給人的視覺感受也不同。雖然說配色是感性的，但每個人對于色彩的把控力和敏感度不盡相同，所以導致配色能力也參差不齊，這時候我們就需要運用到一些配色規則，提升我們對色彩的感知力。商業設計師跟藝術家不一樣，配色要考慮普通用戶的認可度和接受能力，有效的傳遞信息才是最重要的。所以在商業設計中，配色并不是越有藝術感越好，如何做到協調才是重點。
文章來源：優設 作者：美工美邦
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
互聯網設計師如何著手發起無障礙優化？
信息無障礙，是指任何人在任何情況下都能平等地、方便地、無障礙地獲取信息和利用信息。隨著互聯網覆蓋越來越廣，對于身體有局限的群體而言，更加迫切通過互聯網獲取信息，而這就需要互聯網產品進行信息無障礙的優化。在我國其受益人群至少包括：8500多萬殘障人士，2億多60歲以上的老年人，數量龐大。率先考慮信息無障礙能為產品增加優勢而帶來更多用戶。
如今智能手機掀起了一場無障礙輔助工具的革命，而站在這個關鍵點的互聯網設計師，也要開始行動起來，先從以下這幾個容易實現的事情開始著手進行無障礙的優化吧。
對視障用戶來說，是用聽取讀屏語音來了解你設計的界面信息的。讀屏軟件就像他們了解互聯網世界的眼睛，它的原理是直接讀出界面里的文字，如果icon按鈕未加無障礙標簽讀屏會讀為"無法發音"，那么視障者就無法獲取這些信息，自然也就無法使用你設計的功能。
解決的辦法是:
1.需要在產品代碼中添加無障礙標簽(Android :contentDescription ; iOS:accessibilityLabel在對應的開發者文檔里很容易找到，可以發給你合作的研發同學)。
2.裝飾性icon可隱藏標簽不讀，提升讀屏效率。不建議不做處理也不加標簽，那么用戶聽到的就是“無標簽”，這樣會讓用戶以為這里有什么重要信息讀不到而感到不安。
3.標簽語義簡短準確，盡可能使用動詞。
4.必要時需要走查焦點順序，確保不會被錯誤的焦點順序誤導頁面含義。
并且最好由設計師進行語義的標注，因為設計師才是對頁面里圖形應用最了解的人。避免出現“搜索”被寫成“放大鏡”、或者是“searchBtn_123”之類的情況。
顏色可以用來區分信息數據的類別和維度，也可以幫助傳達情緒等重要信息。然而，世界上有超過8%的男性和0.4%的女性都被色覺障礙的問題困擾。我們通?；\統的稱這類人群為“色盲”，他們是典型的識別顏色有問題的群體。
"色彩"的目標是"易于感知"，指的是互聯網產品的內容信息的色彩對任何人來說，都應該擁有足夠高的辨識度和舒適度，我從以下4個方向進行介紹。
1.更安全的配色
a.色盲人群：
設計師在進行設計配色時應時刻自測，避免明度相似的橙黃綠兩兩配色和明度相似的紅綠配色，因為這樣的配色勢必會造成色盲用戶的可讀性問題。并且，紅色在紅綠色盲眼中并不是一種明亮醒目的顏色。相反紅色對他們來說顯得非常深，而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內的深紅色的強調字，從而遺漏關鍵信息（設計時，可利用此插件模擬色盲眼中的顏色：Color Oracle） 。
b.文化差異：
因為色彩在不同國家文化中代表不同含義,所以對于國際用戶來說也是存在障礙的。在西方文化里，紅色通常用于表示消極趨勢，而綠色則表示積極趨勢，但在東方文化中卻正相反。
c.特殊群體：
臨床醫學研究表明對于部分自閉癥患者來說，高飽和高對比度的顏色，甚至只是黃色都會讓他們感到不舒服和不安，因此在自閉癥康復中心是不會出現過于對比刺激的顏色的。
另外，老年群體隨著年齡的增長，晶狀體變黃變渾濁，會選擇性的吸收藍光，從而導致老年人對藍色的鑒別能力下降明顯，如果你的主流用戶是老年人，請盡量避免將藍色運用到重要的按鍵中去。
2.更強的文本對比度
文本對比度與可讀性息息相關，它測量的文本顏色和背景色之間的明度差。WCAG AA對于文本對比度的規范是：4.5:1，若字號夠大（>18pt，或粗體>14pt）時，標準可降到3:1。如果滿足4.5:1這個標準會讓你的頁面視覺看起來不那么優雅，可以嘗試局部加強可視性的方法：
關于可讀性其他需要注意的點：盡量不要在圖片上疊加文字，除非你能保證圖片背景顏色單一且對比度足夠高。
Material Design設計規范建議，需要淡淡的遮罩確保上層文字的可讀性；并且不建議極高對比度的文本，因為這樣會使一部分視障者看到的字旋轉模糊。
3.更多樣的視覺變量
顏色是數據可視化中最常用的視覺變量之一。但是對于無法辨別顏色的用戶，如果顏色作為的唯一的提示信息，他們可能將無法理解你傳達的信息。那么有什么改善的方法呢?
a. 不讓顏色成為唯一的視覺變量：除顏色外，我們可以追加圖標、紋理或者文字來加以標注。
b.色盲模式：Trello作為一款工具產品，在標注信息時，提供色盲模式可打開和關閉，并用不同紋理加以區別，色盲友好模式是一個很好的范例，它可以有效幫助色盲，又不會妨礙非色盲用戶。
c.以明度飽和度為度量：雖然色盲人士對色相的辨識能力較弱，但卻對明度、飽和度非常敏感。我們可以使用明度或飽和度區分信息。看這個例子：傳統熱力圖習慣用暖色代表熱力高冷色代表熱力低，Google Analaytics的熱力圖采用深藍色顯示熱度高的時段、淺藍色顯示熱度低的時段，簡單有效。
控件可以是按鈕、鏈接、輸入框或任何帶有事件監聽器的HTML元素?？丶』虮舜颂拷赡軙o用戶帶來糟糕的體驗問題。
比如對于無法用指尖定位的用戶（有顫抖疾病的用戶），或因年齡而導致靈活性降低的老年用戶，都會難以點擊過小控件。
為了給用戶足夠的間距來準確選擇控件，Material Design建議至少48×48dp，iOS設計系統將目標熱區尺寸最小值定為44 x 44pt，而WCAG對WEB的規范則建議至少44×44px。一個控件可以在視覺上是24 x 24px，但是在所有邊上都會有一個額外的填充使它達到44×44px。并且太靠近的控件可能會因誤點擊而帶來挫敗感，所以同時還建議控件之間的空間足夠遠以減少誤觸。Microsoft給pc的建議是至少有8px的間距，而Material Design推薦的控件至少間隔8dp。我們可根據以上規范來審視自己設計的控件。
1.文字大?。?/strong>
有視覺障礙的用戶可能會把字號調得很大。你需要保證你的設計在大字號的情況下內容不會溢出或排版錯亂。做設計的時候，可以使用2倍以上的字體測試你的設計。
在互聯網早期，設計了字號在9-14px之間的網頁，如今已與20年前不同，瀏覽器已經可以在任何尺寸設備上使用，小到智能手表大到4K熒幕，我們不能再使用固定的字號來設計產品了。字號應該與設計本身一樣具有響應性。例如可以允許用戶自定義字號、行高或字間距等以達到舒適的閱讀水平。
2.文字樣式:
文字作為傳達信息的重要載體，對于許多用戶來說，裝飾字體或草書字體都是比較難閱讀的。且用過細的、過小的、斜體和全大寫文本，也會降低識別度。
有效的動畫可以給頁面帶來生命感，但如果濫用動效不僅會分散用戶注意力，嚴重的話對某些用戶來說來說可能是致命的（光敏性癲癇的臨床誘因之一就是閃光圖像的刺激）。
1997年的一天，日本電視臺正在播放《精靈寶可夢》第38集“電腦戰士3D龍”，但就在這天晚上發生了600多名兒童昏倒在家中集體送醫事件，轟動了動畫界，任天堂的股價也隨之大跌。原來，為了達到震撼效果，3D龍的背景運用了“藍-紅-藍”的快速閃爍來表現爆炸，這樣高頻率的閃爍刺激了孩子們脆弱的眼睛，導致他們集體患上了急性光敏癥。也因為這件事日本開始著手對動畫片的制作制定規范。Twitter在2019年為了保護對閃爍圖像敏感的人員安全，也采取了禁用APNG動圖格式的措施。
另外WCAG 2.3.3官方說明，一些用戶會因滾動頁面的動效（例如緩動和視差滾動）而觸發大腦前庭疾病從而產生頭暈的癥狀，所以iOS、Mac、Windows 10都具有關閉動效的功能。
為了避免給特殊人群造成困擾，設計師在開始做動效之前，應該看看以下四條是否滿足：
1.動效每秒閃動不超過3次，發生的閃光區域不超過超過25％否則，光敏癲癇患者會有發病的風險。
2.避免過于夸張的視差和運動效果，因為大腦前庭失調者會引發眩暈。
3.避免有多個元素通過不斷移動、閃爍而分散注意力，因為這可能會讓注意力缺陷者產生困擾 。
4.如果有上述情況，需提供一些控件或選項來暫停、隱藏或者更改任何動畫或效果的頻率。
作為體驗設計師，研究無障礙會讓我們收獲良多。當然，目前所做的改進并非一勞永逸，而是我們與更廣范圍的用戶保持持續對話的開端。不斷改進產品的無障礙體驗，讓產品更友善，讓美妙的互聯網的世界變得更平等，我們希望能不斷向這一目標前進。
文章來源：站酷 作者：百度MEUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
產品該如何避免同質化？本文作者依據工作中項目實踐的所思所想，從產品同質化的產生原因出發，結合企業和用戶的具體應用案例，就此話題分享了自己的想法，供大家一同參考學習。
這篇文章只是想從個人理解的角度回答下標題問題，如有不足，歡迎指正和討論。
產品是需求實現的載體，是企業和用戶實現價值交換的媒介。需求是有來源的并不是憑空可以創造的，這也就意味著可見的、可交換且可盈利的需求在一定程度上（沒有新元素加入的情況下）是有限的（這和需求本身的無限性并不沖突）。再也不是移動互聯網初期一片藍海，站在風口就可以起飛的時代了。
除了這個外部因素外，新業務的試錯成本往往比已經驗證過可行性的產品來的高的多。因此，為求穩，也有不少本身有實力的公司會進入相同的賽道一爭高下。
但是沒有差異的產品對用戶來說由于替代成本低，很難維持穩定的用戶群體。本文分別從用戶分析和企業核心競爭力兩個角度分析，在同質化中尋找突破口。僅為作者本人經驗和觀點，如有不足和問題，歡迎溝通和指正。
因為前段時間去成都需要訂酒店，原本是想單純的做下比價的。但是卻意外的發現兩個APP酒店的推薦邏輯差異甚大。
根據推薦結果不難發現，攜程的關鍵詞是商務型、中端酒店，而飛豬則更偏重于經濟型、酒店公寓（民宿），且兩者在整體均價上也是拉開了差距的。
攜程作為出行行業的老大哥，在移動互聯網還沒有普及時，就已經占據旅游出行機酒業務的半壁江山了，特別是商務出行板塊。而酒店線上預訂業務本身就是偏重于供給型，沒有資源就沒有話語權。
而在這種情況下，飛豬通過抓住近年旅游行業爆發的契機以及大眾對民宿接受度的提高，把握年輕群體對休閑游、窮游的訴求，加之其對小型公寓酒店、民宿的扶持和曝光（19年成立了菲住酒店聯盟，實現聯盟會員共享），實現了這部分用戶和商家的在線交易。
雖然從表象上看產品的形式是相同的，都是酒店預訂，但是產品本身的定位和底層邏輯的不同，各自圈定了不同的用戶實現了差異化競爭。
上面攜程和飛豬的例子是基于一個小的賽道在做細分，如果只將目光放在這個層面，那只是在“分餅”，但是這種情況下餅的大小總是有限的，如果不換個角度“把餅做大”，在競爭嚴峻的當下也很難長久的不被打倒。
之前在阿里媽媽的公開課中看到過這樣一句話：今天巧克力最大的競爭對手是誰，不是糖果，不是堅果，而是口紅。
這是基于當今消費并不只基于個人的需要，而是越來越多的扮演著情感表達、場景營造的角色（基于阿里媽媽2020消費觀察數據），25歲男性對口紅價格的接受度甚至是女性自用的三倍，口紅逐漸蠶食了巧克力在男女戀愛市場中穩固的禮物寶座，想想在口紅一哥李佳琪的一聲聲“OMG，買它”中，多少男性也同時乖乖的掏出了腰包。
因此，我們差異化的思考不應該只局限于品類下人群的思考，也應該基于不同的場景去挖掘場景下的用戶群體。
今年年初的疫情，雖然對各大行業都造成了不同程度的損傷，但是卻“社群團購”這個模式看到了曙光。
艾媒咨詢數據顯示，在疫情的刺激下，2020年社區團購市場發展迅猛，市場規模預計將達到720億元，而未來隨著市場的良好增長態勢，2022年中國社區團購市場規模有望達到千億級別。
各大平臺也在下半年爭相加入這個賽道：美團、滴滴、拼多多相繼推出了美團友選、橙心優選和多多拼團，均將其作為下個階段的業務重點。
本身社群團購這個模式本身是可以成立且存在用戶體量龐大。但是，從松鼠拼拼到呆蘿卜，都昭示著生鮮、社群并不是一個好啃的骨頭。
從三個平臺目前呈現出的產品來看，產品邏輯是一致的，依然是通過團長建立社群拉流量下單并獲得提成的模式，前期搶地盤搶團長的價格戰看來是在所難免了（某鹿已經為能夠薅到羊毛平臺羊毛開始暗自竊喜了），但是價格戰始終是雙刃劍，并不是長久之計。
這就需要深究，相同的模式，企業通過什么實現差異化競爭。這三家平臺加入這場戰役，憑的到底是什么核心競爭力，總不能真的是指望靠燒錢燒到行業第一吧。
回歸社群團購這個模式本身面向的群體是偏價格敏感型，且因為社群本身快速傳播的特質，對品質的要求更為嚴格了，真正是要求物美價廉。對供應鏈和履約的要求十分高，也難怪乎有人說“社群團購，始于團長，終于供應鏈”。
對于美團來說，O2O的基因是刻在骨子里的，本地現成的數以萬計的線下商家都是潛在的團長，且這些團長是自帶線下流量的；對于線下B端的管理和運營也是輕車熟路；此外線下商家支持以供應商模式入駐美團優選為平臺供貨，對于平臺品類的豐富度提升有極大幫助；外賣配送的管理經驗讓他在物流上也占有相當優勢。
滴滴原來的行業布局和社群團購看起來似乎是毫不相關的，但其對在線下司機的管理、運營上是有一定沉淀的，而對于團長的管理在這個點上是可以互通的，在團長履約上是具有一定保障的。而滴滴因為有貨運的布局，其在物流上是具有一定優勢的，社群團購雖然時效要求沒有外賣高，但也都是要求次日達的。但在供給上的劣勢也是十分明顯的。
早期多多是從生鮮水果拼團開始做起，不排除他在這塊供應鏈的運營和把控上是有積累的，且從早期的生鮮價格來看，其價格優勢較為明顯。同時因為拼多多原生用戶群體中一大部分都是對“白牌”價低質優商品存在相當高接受度的用戶，相信價格和品牌差異（限于標品，非生鮮果蔬類）依然會延續成為多多拼團的優勢。
但拼多多目前一直只有線上電商業務，本次社群團購是其首次轉戰線下履約的嘗試，其挑戰難度也是不言而喻的。
所以基于以上的剖析，從我的角度來說，這三家中，我個人目前是更看好美團優選未來前景的，他底層在供應鏈上的優勢差異是目前另外兩家還無法達到的。不過這個領域盤子不小，各家發揮優勢的話后續還真不好說。對于這場仗，我拭目以待。
基于以上論述，即使是看似“同質”的產品和業務，但是通過對業務的理解，對用戶的挖掘，對企業自身優勢的把握而實現“不大相同”的邏輯，我認為這就是身為產品經理很重要的意義所在了。希望我們都可以做出各自領域與眾不同的產品來。
文章來源：人人都是產品經理 作者：麋鹿產品
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
不知道各位鐵子們的朋友圈是啥樣，反正我的朋友圈幾乎被vivo刷屏了；嚇的我趕緊看了看微博和知乎這個號稱 “前蘋果設計師操刀” 的系統到底有什么不一樣。
瀏覽了幾十篇相關文章和報道，好評如潮，我根據這些輸入總結了如下幾個特性：
OriginOS參考了原生安卓、iOS和Windows 10的交互特點，將傳統安卓的抽屜、桌面、小部件整合起來，按用戶的使用習慣和用戶行為感知形成一個叫做TimeLine的時間流動線。
在OriginOS原子界面中，vivo希望用戶不再區分桌面、抽屜和插件，而是根據自己的實際需要在桌面安排想要的內容。這個內容可能是APP圖標、可能是APP小部件、也可以是系統插件?？傊?，根據用戶的行為，在桌面展示用戶需要的東西。
在安卓設計規范之外，vivo發明了一個叫做“華容網格體系”和“原子組件”的新規范。這一規范可以看到Windows 10和iOS 14的影子。這一規范從生態角度來說，跨越十分激進，想做到理想化的狀態，需要全行業來支撐這些組件具備更寬泛的信息展示能力。
坦誠地講vivo屬實付出了很多，在細節的追求上甚至可以跟當年的錘子有點一拼了，但站在用戶體驗的角度上，我斗膽潑個冷水～
Origin？這是個什么，經受了9年義務教育和4年高等教育的洗禮，我居然讀不出來，是我不行還是藍廠陽春白雪？不難看出，藍廠另外一個號稱“OS”的funtouch，我用了幾分鐘的時間才知道是“放他吃”啊！
對比下MIUI，colorOS和flyme已經弱爆了，更別提 “充電2小時5分鐘，通話5分鐘2小時” 這種神級文案了，所以我奉勸vivo放下包袱，說點人話。一個用戶都讀不出來的名字，又怎么談用戶體驗呢？
我很是認同OriginOS的最大亮點就是華容網格，官方號稱“通過不同尺寸磁貼的自由變化和放置，形成每個用戶獨有的行為驅動邏輯和動線設計”，極大的鼓勵用戶自定義桌面，表面看“用戶自定義”是用戶體驗的，但這就好比把你拋在大草原里騎馬，哪都能去，去哪都行，因為并沒有一條路可以走…圖圖新鮮還行，但最終我還是不敢走。WindowsPhone當年的界面就是這種情況，官方動態配圖看好的不行，可是對用戶有著極大的審美要求，排列的不好可真是相當丑。
再有一點，這個網格系統讓我想起了魅族Flyme的smartbar：
Smart bar 是魅族在旗艦手機 MX2 發布時推出的一項操作解決方案。它智能整合系統返回鍵和菜單鍵，使其與軟件功能欄合二為一。“底欄”左右分別顯示返回與菜單鍵，中間三個空位留給軟件功能按鈕。如果軟件功能按鈕過多，Smart bar會將其自動放進菜單欄。雙層變單層，優先的屏幕顯示區域被更好的釋放，上下點擊也不會出現誤操作，而且界面更美觀，風格也更加統一。
本身是好心，但需要第三方來適配，無形中加大了第三方的工作量，顯然vivo還不具備像蘋果一樣的號召力來牽動生態內的伙伴來搞這個。
△ colorOS
想比OPPO的“無邊有界”，vivo沒有一個統一的視覺語言來Cover，你能看到三種形式“扁平”“擬物”“新擬態”共存其中，特別是今年在Dribbble流行起來的“新擬態”，完完全全的概念設計居然被搬到系統上？真是大跌眼鏡。甚至你可以看得到這是 “Fluent Design” “Metro” 和 “Materia design” 的結合體，就是沒有一點蘋果的影子，所以說是前蘋果設計師操刀，我是有點質疑的…
△ 微軟 Fluent Design
以圖標為例，上圖展示了3種截然不同的風格，在一個設計師的眼里這可能是個設計還原的事故。我理解的設計語言應該有一個完整的世界觀，像Fluent Design一樣，ta是對自然世界的高度抽象和概括，并不是僅僅為了好看，反觀OriginOS，一個系統里二次元和三次元搞起了曖昧，就像初音和擎天柱談起了戀愛一樣讓人難以接受。
在交互方面，點擊OriginOS桌面的擊交互池圖標，就能直接在桌面上自由調整交互形式。要知道，以往vivo每款新機都可能更換一套手勢邏輯，現在OriginOS把選擇權交還給了用戶：用戶可以按照自己的習慣，在26種不同組合當中選擇更適合自己的手勢操作組合。
但這又跟錘子的“大爆炸”和“一步”類似，你說這事是個問題吧，但也不是那么大的問題，導致費了大心思又獲得不了市場的局面。
最有意思的莫過于雙系統并行了，OriginOS和Funtouch可以自由切換，有點像我做設計不知道哪個方案更好事出了灰度大法一樣。這種做法無疑讓我覺著整個OS團隊對自己作品信心的折扣，既然是自己認為最好的，那又何必在意批評呢，放松一點，大膽一點。
不過吐槽歸吐槽，不足歸不足，vivo能有覺悟來下定決心搞搞系統這事還是值得鼓勵的，明顯可以看得到細節上下的功夫，也明顯可以感覺vivo是從用戶體驗的角度出發，盡量不讓APP綁架用戶，最大化的把剛需搬到你能看得到的地方，所以還是要給vivo一個贊！今天的發布也才是第一步，相信未來OriginOS可以做的更好！
文章來源：優設
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
為大家梳理一個web表格設計框架，希望能夠給大家帶來完整的不一樣的內容。全文12,598字 ，預計閱讀30分鐘，建議收藏。
在網頁或桌面端為載體的B端產品和生產力工具中，越來越多的設計師需要和數據打交道，查詢和處理數據的能力是當前正在設計的大多數產品的關鍵要求之一，表格被公認為是展現數據最為清晰、的形式之一，也是世界上最常用的用戶界面工具，其重要性不言而喻。
表格，展示行列數據，既是一種可視化交流模式，又是一種整理數據的手段。表格幫助我們組織和展示信息，同時保證信息的可讀性，從大量信息中找到所需內容；通過合理布局，感知不同信息間的關聯與區別，進行分析和比較；對數據進行排序、搜索、分頁、自定義操作等復雜行為。
表格的行元素和列元素行和相交就會形成一個簡單的二維表，行，列元素的空間組合就確定了一個個單元格。常見的表格布局有水平型、垂直型和矩陣型三種基本布局，分別強調行、列、單元格。
水平型會弱化列的存在，強調行信息的連貫性，適用于用戶閱讀信息時是從左到右，然后自上而下逐條掃描。垂直型是通過強化列的視覺特征來突出不同列信息的對比。矩陣型的表格有均勻統一的分割線，單元格比較明顯，適用于列信息較多而沒有足夠空間用留白來分割信息的表格，同時我認為單元格合并的情況也屬于矩陣型。
還有比較常用的表格類型層級型：
層級表
是表達結構性關系的表格，表現得如同樹的分支，所以又叫樹列表。每一個條目可展開或折疊包含的更詳細的行信息，也包含嵌套子表格。
層級表并不如矩陣表直觀，但通過結構化的組織方式逐級展示表的數據內容，讓整體信息架構一目了然，非常適合大型數據表。
結合層級表的使用場景，多以查看為主，編輯需求較少。
同時還有特殊的表格類型，圖表型與卡片型：
圖表型
除了在單元格中引用圖表之外，很多時候都會提供圖表/表格視圖切換，便于用戶從圖形角度查看、分析自己關注的數據。有時也會有“圖表+表格”的形式，這時候，表格往往只作為明細放在頁面底部。大量的表格也會導致視覺的單調。
卡片型
可以用卡片的形式來展示信息，將信息以組的概念呈現，單張卡片內的信息按優先級進行排列。此外，卡片彼此之間又形成一個整體。
卡片是一種承載信息的容器，對可承載的內容類型無過多限制，它讓一類信息集中化，增強區塊感的同時更易于操作；卡片通常以網格或矩陣的方式排列，傳達相互之間的層級關系。適合較為輕量級和個性化較強的信息區塊展示。
注：在有限的表格空間內需注意卡片信息之間的間距，若卡片信息過長可做截斷處理。
在實際工作中，上述表格類型還有可能互相結合，以更好的達到相應的分析目的。
比如垂直–層級，矩陣–數據立體表等。
從視覺結構的表現角度，個人將“表格”的構成分為：標題、表上方篩選操作區、表頭、表體、底欄。由表頭、表體構成內部區域，由標題、篩選操作、底欄構成外部區域。
標題是對表格信息內容的整體概括，可包含數據來源及屬性(日期、地區等)，以便用戶對表格內容有整體認知。給數據表格起一個清晰簡明的標題，與其他的設計同等重要。有了好的標題，表格就可以獨立使用，如果導航菜單層級清晰，同樣能起到標題的作用。標題作為最重要的識別元素，默認展示在左上角。
這里特指位于表頭的上方的操作區域，包含篩選，操作按鈕等其他操作。篩選區包含模糊搜索和條件篩選，按鈕分為增刪改和其它業務處理操作，合理設計篩選區可以大大提高用戶的效率。
表頭對數據性質的歸類。表頭按慣例要對數據的簡況做出反映，如被調查者的性別、年齡、學歷、收入、家庭成員組成、政治背景、經濟狀況等。表頭的字段名稱應當符合人們的思維習慣，保證用戶理解。如果有需要解釋，則在字段名稱旁邊加說明小圖標(小問號)。表頭在這里也能指列行標簽，是對所屬行或列數據的描述。
除了容納行/列標簽之外，表頭也可以進行排序、搜索、篩選等。
表體是表格的主體內容，具體信息數據內容的填充區域，由一個個基礎的單元格組成，單元格是表格呈現數據信息的基本單位，可以是計數、百分比、均值、"-"等任何數據。表體包含數據，分割線，背景，單元格數據可進行點擊操作，如鏈接跳轉(項目或者商品等)、展開嵌套表的子集信息(子表格)、操作按鈕(查看編輯)等。
表尾一般是統計類數據，例如合計、平均數等。表尾使用頻率較少，且重要性明顯不如表頭，我就把它歸到表體這類。
底欄在表格最下方，主要展示正文中的數據量或單頁數據的概覽信息，也常提供統計功能，供用戶了解總體進展。底欄一般放統計信息、分頁控件、備注說明、操作按鈕(加載更多)等內容。
底欄最常見的元素就是分頁，分頁可以放在頭部或底部，常見的還是放到底部，分頁固定能省去用戶需要翻到頂部或底部進行操作的麻煩。分頁可分為整體頁碼平鋪式、全功能版、簡易版等，需要根據不同的場景選擇最優的設計方案，比如有的時候并不需要定點跳轉。
無限滾動可以替代分頁，但對于功能優先的應用未必適用。下圖為查看更多按鈕，比較少見：
同時，在選中操作的下，操作按鈕也可以位于底欄，在未選中時操作置灰。
采用格式一致外觀，突出有利于對象識別的關鍵信息。
合適的填充和邊距對于視覺設計至關重要，既包括保證數據單元格之間的留白，又包括單元格內部留白，以保證易讀性，當創建表格設計規范并嚴格遵循后，就可以創建視覺一致的表。表格本身應具有最小寬度，在不同畫面中寬度應可以增長到整個空間，所以每個列也需具備最小寬度。如果頁面寬度小于表格，那么表格應水平可拖拽。
數據合適的位置排列能夠提升數據的瀏覽效率和準確度。對齊能夠很好的形成視覺引導線，會讓表格更加規范易理解，給用戶視覺上的統一感，視線流動更順暢，讓用戶快速的捕捉到所需內容。
正如連續律所描述的，人們傾向于把那些經歷最小變化或阻斷的直線或圓滑曲線知覺為一個整體，傾向于使知覺對象的直線繼續成為直線，使曲線繼續成為曲線。在界面設計中，將元素進行對齊，既符合用戶的認知特性，也能引導視覺流向，讓用戶更流暢地接收信息。
數字應該右對齊
在表格中，諸如金額、數量等數值排列時，通常采用“右對齊”方式，既方便用戶快捷讀取數據，還可以使用戶進行縱向數據對比。數字是從右向左讀的，是因為我們對比數字時，首先看個位，然后十位、百位。當個位數值對齊時，我們就可以快速查看前面的數值，比較多個數據的大小。因此，表格的數字應當右對齊。
當我們常用的字體如果不同數字寬度不一致時，會導致千位分隔符不在一條直線上，所以要選擇數字等寬的字體，等寬的數字在同一豎線時更容易對比。
文字信息左對齊
因為我們閱讀文字信息是從左向右讀，如果不采用左對齊，會降低瀏覽文字的效率。
混合型文本左對齊
當數字、文字、字母組成混合數據時，標題和正文左對齊，使用了一個視覺起點。
在實際工作中，主流框架組件，表格列數據對齊同時針對分割線，雖不是完美中的對齊，但開發成本低。
不論何種對齊方式，都需要考慮到該字段可能存在的極端情況。如：普通文本若過長，可在鼠標懸停狀態時單元格展開列出全部字段信息。
一般表格具有的顏色盡可能少。顏色和可讀性是密切相關的，要合理的使用顏色，普通表盡量使用簡單的背景色和點綴色。背景色方面，除了行/列交替顏色(可以區隔內容，引導視線)、懸停高亮底色(便于準確辨別光標所在行)等處理方法，還可以對表頭表尾進行視覺區分。但不能增加過多顏色以引起混亂。
分割線顏色盡量不要與背景色相差太大。當字體選擇深灰色，背景為淺白色時，邊框選擇淺灰色，這樣可以減少我們視覺疲勞，不會使表格看起來令人生畏。
表頭標簽應該簡煉準確，以達到節省表頭空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數據本身。當然對于產品而言，先能把事情說清楚，再考慮文字的簡潔性。
當數據結構比較復雜的時候，使用多級表頭來體現表頭與數據的層次關系，如下圖：
當數據有看不懂或生僻的信息時，用戶期望有人告訴他為什么會這樣，就需要在表頭標簽后加上小問號，鼠標懸停彈出說明文字的提示框。
不需要表頭
如果表格數據可以自我解釋，表頭就可以不需要。電子郵件的表格是一個好例子，郵件主題，發送者，發送日期都區別度高不會混淆的。當然有的情況表頭是不能去掉的，例如有兩個不明確的日期，這時候你就需要定義一個表頭。
所有行按邏輯排序，比如按風險由小到大，將最安全的操作放最前面；或按照信息時間排序，由新到舊，以創建時間進行排序，即創建的排在最前面。
行高是非常重要的參數，直接影響著閱讀體驗。較小的行高承載更多信息，讓用戶無需滾動鼠標即可看到更多數據，但會降低掃描效果，導致視覺解析錯誤。適宜的行高使得數據更易于被閱讀，但這不代表行高越大越利于閱讀。
設置行高的原則：
A.單行數據顯示時，數據顯示緊湊、有序。
B.多行數據顯示時，弱化表格形式，提供豐富的視覺展現。
因此，對于單行顯示的表格，建議行高為字體高度的2.5倍到3倍；對于多行顯示的表格，建議內容區到上下邊框的距離略小于文字高度。當然，也可以提供切換按鈕讓用戶自己控制顯示密度。
斑馬線又稱作間行換色、隔行變色、行的交替樣式。它能讓行間界限更為明顯，同時加強視覺流的橫向引導，避免在閱讀表格時出現迷失情況，要注意兩種顏色不能反差過大。另外，可以根據實際情況選擇是否與邊框同時使用。
有時為了強調行內信息的連續性，可去掉單元格的縱向分割線，僅使用橫向分割線和底色分割，使橫向信息更加連續通暢，以提升閱讀效率。
表格還可以通過顏色來指示狀態，顏色指示可以幫助用戶識別哪些行可能需要特別注意的行數據。
同時可以對行內信息進行擴充，進一步弱化表格形式，豐富各類信息的視覺呈現，同時兼顧行與行之間的關鍵信息的對比，如上文表格布局提到的圖表的使用。
盡量減少列的數量，關注用戶需要的必要信息。當數據列過多時，要分清主次列，非重點、輔助性信息可以通過次級入口來解決，如固定重要列(主體名稱/操作列)，次級列在表格中間區域左右拖動。
列寬嚴謹的處理方式有三種。第一，通過柵格，由列的數量決定列寬，主流框架組件一般是這種；第二，可以固定部分列的寬度，其余列則按百分比處理；第三，在固定寬度的基礎上，允許用戶自由拖動調整列寬的大小。（當然我覺得不要太拘泥這個，合適就好）
為便于用戶對數據進行對比分析，可以在原始數據的基礎上給出差值、升降變化等數據處理結果，減少用戶數據加工的過程，直達用戶獲取信息的目標(需要明確用戶目標)，提高用戶的閱讀速度。
一般列的強調是配合列排序功能使用的，如點擊率、訪問量的排序。有時會使用不同粗細的縱向分割線或不同底色對列信息進行區隔，增加同類信息的對比性。
其中的關鍵區別在于數字的大小。數據的度量單位無需重復，一般在表頭標識清楚即可。
一般指空數據或零數據的情況，空白單元格容易造成用戶困惑甚至誤解，用戶會搞不清楚到底是沒有數據，還是數值為零？正確做法是，對于數據為零的單元格，要填上0，且小數點后位數、單位，都要與上下數據格式保持一致；對于沒有數據的單元格，通常是用“－”表示。
B端后臺數據類型較多，最好能為空數據做出釋義，可以在“列標簽”或底欄給出解釋文案。
單元格的寬度根據列中字符的長短自動變化寬度，超過該列寬可以省略顯示，末尾以"..."顯示，鼠標懸停時出現氣泡顯示完整內容。
比如用戶重點關注數據狀態、某些數據的上升和下降等，可用符號進行標識，幫助用戶快速定位到目標信息。
水平分隔線，能顯著減輕表格在垂直方向的視覺重量，內容更加條理清晰，便于用戶對比查看數據。
垂直分隔線，在表格中使用適合的對齊方式后，那么就可以省略；數據量級比較大的表格，列之間過于緊密時建議保留，可以使用較淡的分隔線，將不同列數據區分開來，提升瀏覽速度。
下圖采用了同時使用水平和垂直分隔線：
如果在表格中使用適合的對齊方式，分隔線就是多余的。但由于表格數據量級不同，即使要用，分隔線也要淡，不能妨礙快速瀏覽。
在web端，表格的的數據內容超過一定“數量”時需要提供翻頁功能，這個“數量”由表頭的高度、表格的行間距、目標用戶群體的顯示設備的配置等因素來決定，原則是不要超過一屏，考慮到每個用戶的使用習慣，可以讓用戶自定義每頁的顯示的數量。相比于跨屏翻頁而言，向下滾屏會更便利，在下文控制表內容中展開比較了無線滾動與分頁。
分頁控件內容 ：用戶自定義每頁顯示的數量，當前頁碼(行數)，全部數據的頁數(行數)，向前翻頁，向后翻頁，到達第一頁，到達最后一頁等。
當用戶的數據未超過一頁時，可以隱藏翻頁控件。翻頁按鈕不可用時，須給出置灰態或不可點擊。
分頁控件做為篩選數據的一種方式，通常可以結合排序、篩選等其它控件一起使用，來提升用戶的操作效率，如網易的郵箱，翻頁與日歷結合使用，對于有大量郵件數據的用戶來說，查閱郵件的效率更高。
除了無限滾動，還有第三種翻頁方式，鼠標點擊“加載更多”按鈕以查看更多數據。
干凈的表格使人愉悅。特別是在處理大量數據時，巨大的數據量會增加用戶的壓力，因此要減少視覺干擾。刪除不必要的分隔符與背景，去除陰影等。信息內容的有效傳達是表格設計的本質，讓用戶注意力聚焦在核心內容上。所以，做減法設計就顯得可貴了。
實現簡化的方法是適當刪減。如果畫面視覺很糟糕，請刪除輔助信息、不常用的控件和分散注意力的樣式，但要小心刪除必要內容。“簡單并不意味著沒有雜亂，這是簡單的結果。簡單性在某種程度上基本上描述了對象和產品的目的和位置。想設計出一個井然有序的產品。這并不簡單?！?- Jonathan Ive
這必須是在數據允許的情況下。水平分隔線能顯著減輕長表格在垂直方向的視覺重量，加快數值的對比效率。但如果在表格中使用適合的對齊方式，豎直分隔線就是多余的。它們最大的貢獻就是縮減元素之間的距離，明確了單元格范圍。即使要用垂直分割線，也要淡，不能妨礙快速瀏覽。
不使用斑馬線，使用不同底色區分指示不同類型的數據是有必要的，但是用來區分同一類數據，斑馬線在很多時候又是沒有必要的，因為水平分割線已經明顯區隔了。
省去分隔線，對于較小的，動態性較小的表，可以省去所有分隔線，并獲得醒目的外觀。當然，這更多是數據量不大且易分辨的情況。
運用彩色表達組織或含義可能會增加誤解，并且引發視覺障礙者的易用性問題。普通表格一般使用顏色代表狀態或進度。
其他圖形元素，如星號、三角、圓點、對勾、叉等，雖然能夠幫助組織數據、更直觀的傳達信息，但要注意數量，物極必反，要注意克制這些元素的使用。
優秀的表格交互給予用戶操控感，不讓其迷失在數據中。提供便捷的過濾篩選組件，配合鼠標懸停、點擊、框選等操作，方便用戶查看更多數據信息，快速定位目標數據，或根據特定規律對數據進行排序、突出、降維等處理。當我們將這些組件與交互動作結合，用一些習以為常的交互去操縱表格時，用戶將更清晰、有信心、提效率。
篩選和搜索是用戶目標數據的好方法，這是一項基本功能，可讓用戶從默認的表格數據輕松獲取要查找的內容，在數據量較大的表中特別有用，一般位于表上方的操作區域或表頭區域。
當表格的數據量較大時，可在表上方操作區域增加對象搜索或數據分類來提升用戶查找效率，且能同時使用。提供多維的篩選和排序，是增加用戶效率的有效方式。
輸入搜索框輸入用戶關心的內容，既可以實時篩選，也可以點擊觸發，一般須支持模糊查詢，否則用戶必須記住所有內容，才能查出要找的目標項，成本過高。也有特殊情況，如保密性較高的賬號密碼列表查詢需輸入。
無論手動查詢還是自動查詢，如果查詢條件是組合的幾個，那么一般是填好全部篩選條件再讓用戶點擊查詢按鈕。因為如果用戶要查詢的表格數據具有多個屬性且相互聯系時，組合條件的查詢顯然是更合理的。
如果篩選操作是單個條件獨立查詢，各個篩選條件都是相互獨立的，那么最好填好一個條件便自動查詢。
篩選條件有時候既需要匯總數據的，又需看單一條件下的數據，比如狀態包含“待付款、待發貨和待收貨等”，此時則是做成Tab單選較好，如下圖所示。
放置在表頭標簽上的篩選，受列內容的影響，一般做單次篩選。通過對表頭標簽旁按鈕的點擊，使用戶更快捷進入到自己的篩選條件中。通常，表單越左的列數據越重要的，也是篩選頻率與需求最高的，因此高頻的篩選場景基本可以得到滿足。
垂直滾動時，固定表頭可以讓用戶明白當前單元格數據信息的屬性和含義，體現界面友好性。當數據列差異不大，用戶不能直接根據表格數據分辨類型時，尤其需要固定表頭。當表頭有操作時，固定表頭更能提升使用效率。
數據列表相當龐大而復雜的時候，使用固定表頭可以幫助用戶區分列與屬性。
當呈現大量數據時，表包含的列數超出了該表的最大寬度，水平滾動就無法避免。第一列(前幾列)或操作列固定能更方便信息的對比與操作?；谖覀冏x取信息的方式，從左到右放置關鍵列。最左側的列會引起最多的關注，當我們感興趣時，才會查看其他列，它會影響用戶閱讀所需時間與精力。
在大型表格中，我們才可以水平滾動，最好是尋找可替代方案。表格中文本為什么這么長？能減少字數嘛？可以將文本換至第二行以減少水平寬度嗎？能否為過長的文字選擇別名嗎？可否用圖形條目取代？是否可以采取工具提醒？是否可以安排在窗口或對話框里？
一般有兩個解決辦法：文本換行，對它縮排；在單元格區域截斷文本，在提示中顯示完整文本。方法一意味著我們要增加表格高度，且每行高度可能不同；方法二，如果不同文本內容的頭幾個字一樣就存在問題了。但這兩種方法都比水平滾動好。
表格初始有一個默認排序，也叫初始排序。但有時，用戶希望將表格中某一行位置換到另一位置。
拖放似乎很簡單。就是抓住某個元素把它放到另一個地方而已?？墒?，事實上，拖放過程涉及到了大量細節，在拖放期間，需要處理許多特定的狀態。
用戶在拖動模塊時，頁面整體布局基本保持不變。因為移動的不是模塊，而是插入條。插入條指明了放置模塊時的目標位置。常用于數據量較小，有拖曳排序需求的場景。又可以運用在多個表一起的情況。
穿梭表格
就是多表格拖拽的情況。比如左側的表格內容可拖拽至右側列表框，同時支持表內上下拖拽更換位置順序，也可直接選中對象在兩欄中按鈕移動，完成拖拽行為。
那如何讓用戶知道可拖拽呢？
增加意向符號；改變光標樣式；增加被拖拽對象臨時性底色，突出顯示。
如何讓用戶知道怎么拖拽到哪里？
被拖入區域應增加插入位置符號，可以明確指出放置模塊的目標位置，減少用戶困惑，也可以對放置操作發生后的頁面外觀提前給出預覽。同時設計時考慮上下左右兩個方向的拖拽運動分別可以觸發什么結果，超出表格范圍拖拽對象消失。
被拖動對象應呈現為輕微透明的樣式？應該顯示為完全不透明？或者改為使用縮略圖表示？我認為這三種方法都可以。透明效果也會讓更多表格內容對用戶可見，有助于用戶預覽最終放置后的結果。從而方便用戶查看頁面，也會表明該模塊處于一種特殊模式中。透明可以表明相應被拖拽對象尚未定位，或者說正處于過渡狀態。
排序又分為降序和升序，比如，事件相關的表格，默認時間降序排列；風險相關的表格，默認安全降序排序。
表頭排序可以輔助用戶快速挖掘出需要關注的信息，發現數據信息之間的關系，一般可按數字大小、文字拼音順序、字母順序等其它數據特征進行排序。如果表格中不是所有數據都能排序時，則需要標識出可排序操作的列，一般采用三角箭頭做為標識，實時反饋當前操作狀態。
可伸縮列
由于存在多個數據標題和列，我們只能根據表格的寬度來展示數據。在某些情況下，表格可允許用戶選擇他們關注的列，在其固定寬度基礎上，讓用戶可以自由拖動列寬邊緣以調整列寬。
自定義選擇列
由于數據報表，往往需要滿足各種不同的角色在不同場景下的需求，因而在表格數據顯示上，一般采取寧多勿少的原則，即盡可能提供詳細的數據，由此會數據指標過多，難以在表內完整展示，導致需要水平拉伸，降低了表格的可讀性。
針對上面這個問題上，可將所有的指標名稱羅列在表格上方，并提供多選操作，在默認情況下僅展示最常用、最重要的幾個指標（如下圖）。這樣能讓用戶在表格上方看到所有指標名稱，避免了原來需要水平拖拽而導致指標瀏覽不全的情況。其次，用戶可以根據自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。
B端后臺通常會對應不同的角色及不同的需求，可讓用戶根據自己的需求來定義表格的展示列及列的順序。同時系統應記住用戶上一次自定義列的設置。
控制行高
較小的行高讓用戶無需滾動頁面就能查看到更多的數據，但可掃描性的效果易導致視覺迷失。這就是為什么許多成功的數據表設計包含了控制行高(顯示密度)的功能。
樹形表
行也可以結構化分為不同的類別，前面提到了層級表/樹形表，可以嵌套子表格，展開和折疊?？刹僮靼粹o一般位于各級行標題左側，具有獨特的視覺效果并具有擴展或折疊的功能。單擊表中的類別標題會在類別的展開或折疊狀態之間切換。展開與折疊也將極大的影響行內容顯示。
分頁可以將表內容信息劃分成獨立的頁面來顯示。
優點：
1.良好轉換：當用戶是在結果列表中查找特定信息而不僅僅瀏覽信息流時，分頁就是好的選擇。你會知道表格總量與當前頁的準確數量，能夠決定在哪里停下或者去哪里。
再次尋找特定數據時，分頁方案讓我們能夠大概定向到目標數據位置。用戶可能難以記錄目標數據頁數字，但一般能記錄大概范圍，而頁碼鏈接能讓用戶更容易到達那里。
2.掌控感：無限滾動就像個無止境空間——無論你滾動多久，你會感覺永遠結束不了。當用戶知道可用行數量時，他們可以自己主觀做出決定而不是被動滾動。同樣的，當用戶能夠看到結果的數量時，他們將能夠預估他們查看表數據大概要花費多長時間。
缺點：
額外的動作：在分頁方案中，用戶要到達下一頁表內容，就必須點擊分頁控件上的按鈕跳轉，等待表格新內容的加載。
表格無限下拉加載使用戶在數據內容面前一直滾動查看。向下滾動的時候不斷加載新內容，雖然十分方便與誘人，但不是什么場景都適用。
優點：
1.瀏覽：無線滾動提供了一個的方法讓用戶瀏覽表數據信息，而不必等待表格新內容的加載。當用戶并不特意尋找特定的內容時，他們需要通過查看大量內容找到自己中意的信息。
2.體驗更好：用戶使用滾動能獲得比點擊分頁有更好的體驗。滾動行為要比點擊更快更容易，對于那些連續且冗長的內容，無限滾動要比把分頁的有更好的易用性。尤其在表格區域狹小時，使用無線滾動更能節省空間。
缺點：
1.受限性能：頁面加載速度是良好體驗的一切。尤其是表格計算數據時需注意使用無限滾動，緩慢的加載速度會造成用戶的不耐煩與離開。用戶在一個表格頁面中越向下滾動，就會加載更多的內容，當數據量過大時，結果就是頁面性能越來越低。
2.位置丟失：無線滾動同分頁相比，沒法標記當前位置且不能再隨意回到之前位置。一旦離開，就會丟失當前的瀏覽記錄，如果要回到上次的位置，必須得重新滾動去尋找。當用戶有這種行為的話，無線滾動就會讓用戶產生困擾厭煩。尤其當你刷新頁面時發現自己又回到表格頂部，不得不重新滾動等待結果的加載以繼續查看。
3.信息缺失：滾動條并沒有反映出實際數據量。假設快要接近底部了，當受到引誘滾動條再滾動一點點時，結果卻會發現表格數據量又刷新了。從一個可用性的角度來說，打破滾動條的正常使用規則對用戶來講是糟糕的。
一般來說，無限滾動適用于在數據有限且信息重復的表格，有利于內容探索。分頁則適用用戶在尋找特定信息及瀏覽記錄，易快速訪問。
表格內容的取舍要建立在對業務的了解之上，盡量精簡指標，隱藏不必要信息，減少干擾，避免無主次的鋪出所有信息。不要讓用戶一次性接收過于龐大的信息量，建議默認只展示用戶所必須的信息，其他次要信息通過展開下拉等方式展示，為輔助信息提供深層入口。
展開行允許用戶無需打開新頁面在表格內即可查看附加信息，防止用戶迷失。
表格中打開表格，表格組節把相關的行組合在一起，并且能夠收縮和展開，各組節層級要有樣式區別。如有需要，在每個組節里可以顯示數據概要信息。
包括模態彈窗和非模態彈窗，模態彈窗是僅支持打開一個彈窗進行詳細查看，非模態彈窗是可以同時打開多個，并允許拖動彈窗位置進行信息對比。
模態允許用戶留在表格視圖中，且更多地關注附加信息和操作：
非模態彈窗對于主動使用的用戶來說可能很有用，可以通過一系列操作，比較不同行數據的細節：
可以通過視圖切換查看更多細節，比如在“表格”和“左列表+右詳情”之間切換，或者提供“只看文本，看文本和縮略圖，只看縮略圖”幾種查看方式。相比彈窗減少了頁面層級和隔離感。單擊行鏈接將表格轉換為左側的列表項目和右側的其他詳細信息，這讓用戶能夠解析大型數據集，而且在涉及到多個項目時不會丟失位置。
編輯表格數據在大眾化的Web應用程序中并不常見。不過，在企業級Web應用程序中，表格則占據統治地位。此時，最常見的用戶需求，就是想要像使用Excel一樣實現表格編輯。畢竟Excel早已成為編輯網格數據的一種標準。
表格數據的操作大體可分為顯性與隱性。顯性操作，指操作選項顯示在行內，直觀明了；隱性操作，當鼠標懸停時或勾選才顯示操作選項，界面簡潔明快，可減輕空間壓力，減少干擾。
操作項一般存在于行數據最后，為固定列，或表上方位置，兩者對應多種操作場景。
單行數據操作
文字按鈕操作項一般不多于三個時，圖標按鈕不多于四個時，操作項跟在行條目后面；當超過時，建議將操作折疊收起，點擊更多彈出多個操作選項。當操作按鈕致灰時，鼠標選中可顯示原因。
如果行操作不那么重要，或者說行操作過于啰嗦影響用戶閱讀時，可使用隱形操作，鼠標在行區域懸停時，可對當前行背景作出區分，或放大懸停區域，同時行尾出現可操作按鈕，進行行操作。如谷歌郵箱：
批處理操作
對于數據批量操作的場景，建議將操作放到表格上方，與復選框操作配合使用。批處理操作模式允許用戶對一行或多行對象執行操作，并在選中復選框后激活表上方操作按鈕，如刪除、批準、拒絕、復制之類的操作，這將節省用戶時間，避免重復對多行進行相同操作。
表格上方的所有篩選或搜索按鈕可能會因操作按鈕出現過多而暫時隱藏，如果空間限制導致操作按鈕排列不下，則使用“更多操作”按鈕。
二次確認提示：對于用戶操作結果給出提示窗反饋，用戶點擊「刪除」后，直接操作；出現提示框告知用戶操作成功，并提供用戶「撤銷」的按鈕；用戶進行下一個操作或者15s內不進行任何操作，提示框消失，用戶無法再「撤銷」。
在執行某些無法撤銷的操作時，點擊刪除后，出現模態彈窗進行二次確認，在當前頁面完成任務。同時禁止濫用模態彈窗進行二次確認，就既打斷用戶心流（無法將上下文帶到彈出框中），也無法避免失誤的發生。
數據較多時，單個選擇數據費時費力。單選框是只能單選，而復選框是能選擇單個、多個或全部選擇項，而實際上純粹的單選很少見，所以建議一般場景下在表格最左側加上復選框，如前面說到的批量操作，多選后，就可以批量操作。點擊選框所在行的局部能讓整行被選中，每個選定的行都接受突出顯示處理，這種做法可增大點擊區域減少界面的混亂。
具體設計時，可以按照數據類型進行選擇，如郵件已讀、未讀等。
可進行選擇的表格需告知用戶已選數據量，在翻頁時是否允許跨頁選擇；全選是當前頁視圖中的所有項目還是選擇表格中的所有項目。
針對于需要進行數據編輯的表格。表內編輯能使數據更具可操作性，表內編輯一般優于彈窗。要啟動編輯功能，必須通過鼠標單擊，而非鼠標懸停。這樣就能確保整潔的網格顯示效果。假如是通過鼠標懸停來觸發，鼠標每經過一個單元格就得顯示一個編輯框，那這種編輯模式就會干擾到不同單元格間的切換，會有多么煩人。
單元格編輯：針對單個，不連續的可編輯的單元格，為了讓功能更容易被發現，可以在單元格數據旁放置編輯圖標，這樣可編輯和不可編輯的單元格視覺對比就十分明顯。單擊該圖標即可觸發編輯，單元格內出現輸入框，保存數據并退出。有了這個隨時可見的鏈接后，編輯功能就更容易被注意到了。
單元格編輯時，也可以設置整個單元格為熱區，以便用戶觸發。
覆蓋層編輯：點擊編輯圖標觸發；通過在頁面上方添加一層來放置編輯數據。雖然編輯期間也不會離開當前頁面，但卻不是在頁面中直接實現編輯。而是把一個輕量級的彈出式覆蓋層（如對話框）作為編輯窗口。
選擇覆蓋層編輯而非行內編輯的原因也很多。有時候，不可能把某個復雜的編輯任務安排在同一個頁面中完成，如果嵌入頁面的編輯區域太大，會因為把內容過多地推向下方而損害頁面的整體感。
而其他情況下，也可以選擇中斷當前頁面流，尤其是被編輯的信息本身非常重要時。覆蓋層能夠為用戶提供明確的編輯空間。提示如果有必要占用專門的屏幕空間放置編輯窗格，而且頁面的上下文對編輯任務也不重要，就可以考慮使用覆蓋層編輯。
行編輯：針對同一行標簽下的數據編輯。新增數據行后，視圖定位到新增的行并高亮顯示，讓用戶快速聚焦。幾秒后高亮消失，以免過度干擾用戶。
不過，表內編輯圖標會涉及平衡頁面中視覺干擾的問題，如果功能及其提示在頁面中的數量過多，很可能造成功能的利用率下降。如果一行有多個編輯選項，則可以適當使用彈窗編輯數據；如果表格有大部分單元格數據需要編輯，則可以全局編輯。 
全局表格編輯：點擊表格編輯按鈕，當前表格所有可編輯的數據單元格內顯示文本修改框或類似XLSX的角標，進入一種特殊得編輯狀態，不會給人直覺造成混亂。這一功能基本用于大面積需要填寫和修改時，如大型填寫報表。
大型數據表由于支持編輯數據處多，這種方法的另一個問題是容易填錯單元格，想象單元格的密集，用戶意外編輯錯誤也時有發生，這樣的話需要編輯/暫存/提交三個操作。如果發現編輯的內容報錯可被更正，應直接引導用戶更正；如果報錯內容不可被更正，則告知用戶原因。
大型數據表如需減少與表格無關的視覺干擾，提供表格的沉浸式閱讀體驗，可提供全屏查看的入口，但應注意可以讓用戶便捷的退出。全屏模式可以直接屏蔽掉頁面其它內容，只留下表格區域，用戶通過ESC鍵或按鈕隨時退出全屏模式，學習成本較低。
當表格數據為空時，在表格的空白內容處加入可創建的快捷入口，引導用戶新建表格數據，或者導入數據。如下圖郵箱已發送郵箱為空時：
當沒有創建訴求的，直接告之暫無數據。如數據是系統產生的，不是由用戶創建的，直接告之暫無數據，話術的表述則需與后臺文案的整體風格保持一致。
個人關于web表格設計的看法基本寫完了，在總結歸納中也發現了自己平常設計表格中的其他問題。大多表格設計在不同場景中需要隨機應變，沒有絕對的規范，只有相對的規范。我們要理解規范背后的原則，推導出適應其他場景的規范。
文章來源：站酷 作者：小龍哈
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn