編輯導讀：對于老一輩人來說，他們沒有趕上互聯網興起的時候，等到想要主動“觸網”時，才發現很多操作根本搞不清楚。盡管產品設計師已經極可能考慮到了老人群體的用戶體驗，但在實際操作中，老人家還是一頭霧水。這時，操作越是簡單的產品，越能夠贏得他們的喜愛。本文作者從自身經驗出發，對這類現象進行分析，與你分享。
上周某天吃完晚飯，我媽遞過她的華為手機怯怯地問我：你有空嗎？我想叫你幫我跟那個商家說換一個快遞，我們家這邊的百世快遞的站撤了，叫他們不要用這個快遞。
我腦海中閃過一個念頭：嗯？最近我沒有幫她付款啊。但隨即也是接過她的手機打開了淘寶。我媽立刻阻止我：不是淘寶，是拼多多。隨即自己打開了她微信里的拼多多小程序，演示給我她找不到商家客服。我跟她說，這個功能要用APP才行，于是幫她下載了拼多多APP并很快解決了問題。
弄完之后，我們又展開了這樣的對話：
我媽：哎呀，這個拼多多真是太好了，物美價廉，超方便！你怎么不早教我用！
我：我自己都不怎么用拼多多?。?/span>
我媽：這個是我的舞友上周教我的！我打開一看，哇，好多有用的東西，又便宜！第一天我就買了幾百塊的！
我：但是拼多多很多假貨啊！
我媽：我又不像你們追求什么名牌！有什么假貨可言？一條裙子30塊！
我：……
我媽：而且！以前我在淘寶總要你幫我付款，現在我用拼多多自己用微信就可以支付了。
我：我早就叫你開個支付寶賬號，你自己又不開！
我媽：那么麻煩，我不會，你又不教我！而且又要綁定銀行卡，萬一哪天我的錢被人家騙走，那些什么黑客……
我：哪有黑客黑你，你又不是馬云……
我媽：還有，拼多多退貨很方便！以前我在淘寶的時候，退貨要你幫我搞，還要在家等快遞上門，很不自由，現在我自己去菜鳥驛站退就得了。
我：好吧。
我媽：以后我就用拼多多，我那些舞友都在用！
我：你開心就好。
我回頭想了想，這是一個以用戶定位和產品特征為優勢搶奪用戶的典型場景。
首先看看以我媽為原型的粗略用戶畫像：
為什么我說拼多多是從用戶定位和產品特征這兩個維度搶奪走了我媽這樣的淘寶用戶的呢？
首先，我用的是“搶奪”這個詞。
我并沒有用擠占、分流這樣的詞。因為，在跟我媽的交談里，我已經感受到她心里估計“從此淘寶一生黑”了。也確實，一個月以來我媽沒有再叫我在淘寶付款過。所以，我想我媽大概率未來不會再用淘寶了，也就是說，淘寶直接流失掉了我媽這個用戶。
其次，來看看用戶定位。
根據上面我列出的以我媽為原型的用戶，多嗎？我簡單查了一下。
根據國家統計局官網上發布的《中華人民共和國2019年國民經濟和社會發展統計公報》，60周歲以上的人口約有2.5億人，60-65周歲的人口約有83250000人，分別占人口總數的18.1%和6%；根據中國互聯網信息中心官網發布的《第46次<中國互聯網絡發展狀況統計報告>》，截止2020年6月，我國手機網民用戶規模達9.4億。
那么，根據這個比例可以推算，這樣的用戶大約在5千萬—1億的規模。
這么大的一個用戶群體，實際上是淘寶自己放棄掉的。自從前幾年淘寶打假貨的行動和品牌化（力推天貓）的戰略執行以來，實際上大量的縣城以下、60歲以上的用戶都被淘寶放棄掉了。
以我媽為原型的這批用戶，他們大多數沒有支付寶賬號，但在微信上有錢，但除了平時發發紅包，菜市場便利店買點東西，基本上還是沒有用出去。于是，這批用戶沉淀在微信錢包里的海量的錢，很難直接轉化到淘寶上。
另外一個關鍵的地方在于，他們對淘寶是有怨言的，但在拼多多出來之前，沒有替代物。某種程度上來說，對用戶而言，忠誠度是很虛無的。真正對品牌有感情而產生“忠誠”的用戶極少極少，品牌還是得需要不斷優化產品，滿足用戶的需求。
品牌也好，產品也好，本質上是為用戶提供價值，而不是要跟用戶“談戀愛”。
這是很多品牌的一個誤區。沒有在自身的產品上下功夫，去了解用戶瞬息萬變的需求，而去打“情懷”，講“文化”。所以，我們可以看到當某些品牌醉心于自己的“情懷和文化”之時，其競爭對手在了解用戶需求和優化產品而推出競品后，瞬間打垮行業老大哥的案例。
最后來講講產品特征。
我媽使用淘寶的流程是怎么樣的呢？
挑選商品——下訂單——點擊“找人付款”——發送需支付的訂單到我的淘寶賬號——退出淘寶——打開微信——告訴我發了一個訂單——發紅包給我——我看到微信或淘寶信息——點擊需支付的訂單——支付——退出淘寶——打開微信收紅包。
而她使用拼多多呢？
挑選商品——下訂單——支付。
當我列出這兩個產品使用流程之后，我猜如果你是我媽，你也會用拼多多了。
在我媽跟我的對話里，還突出強調了“退貨難”這個點。實際上是淘寶的物流服務不好嗎？并不是。我一直覺得淘寶的物流雖然不如京東，但并不差，而且也不斷在優化升級。但為什么我媽還是覺得不好呢？這一點不能單純地從物流本身來看，而得回到淘寶的產品來看。
在淘寶上，推出了一個功能，叫“找人付款”。當時我覺得這個功能很好，解決了我幫我媽買單時，她要跳出淘寶從微信給我發鏈接的麻煩。但最終卻帶來了一個重要的弊端：當要退換貨時，我這邊無法執行，她那邊又不知道如何操作。
而當我從PC端登上我媽的淘寶賬號之后，PC端的退換貨服務非常麻煩和繁瑣，讓我都研究了差不多一個小時才解決。而最后，我媽那邊又無法支付退貨費用，我在PC端也支付不了，也不能“找人付款”。總之，整個過程極其麻煩。雖然淘寶也意識到了產品上的缺陷，但目前的情況而言，這樣的產品還是對于我媽這樣的用戶非常不友好。
而拼多多呢？它基于微信這個社交生態圈。加上沒有什么太多余的功能，我媽很快就能上手了，自己操作還是比別人代操作方便多了。
談到這里，我還意識到一個重要的問題。
從產品對人際關系的影響而言，淘寶是負向的，而拼多多是正向的。從某種程度上而言，60歲以上的這代人，是被互聯網拋棄了，所以當他們想搭上這波潮流時，不得不面對自己的兒女，需要向他們請教，怎么用怎么學。這一點首先就會讓不少子女心煩，不少父母自卑。
再進一步，如果每次父母網購都得“捆綁”上子女時，對人際關系是正向的嗎？而在拼多多上購物時，他們不僅可以大大優化自己的產品使用流程，還能跟自己的老朋友們一起拼單，互惠互利，這對人際關系的影響有很大的正向作用。
你有什么被別的產品搶走的故事嗎？
一點個人小想法，想到哪寫到哪。
如果你有不同的意見和想法，歡迎評論或留言。
文章來源：人人都是產品經理 作者：@源記物語
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Apple 致力于讓每件產品都賞心悅目，與其說官網是產品展示平臺，倒不如說它是蘋果產品分支的延續。從 Apple.com 找設計靈感是每一位設計師都做過的事，那它到底有何魅力？文章對Apple的網頁設計展開了梳理分析，與大家分享。
每當有新產品發布時，我們都會被它的 Landing page 所吸引。不管是 AirPods Pro 也好，和前段時間發布的 iPad Pro 也一樣。
這背后是 Apple 基于 webGL 技術，創造的一種沉浸與交互式產品體驗。
我們在產品介紹頁可以看到，蘋果使用了大量的滾動 scroll 來體現連續性。
一方面，滾動作為大多數 Web 用戶最自然的操作，學習成本極低。
另一方面，在冗長的頁面下，滾動能讓產品特性保持更自然的轉場銜接。
iPad Pro 的連續性
另外，采用了大量的動畫式轉換（animated transition），即操作時展示的動態效果，以此來增加趣味性。
伴隨著豐富的、若隱顯現的章節文案，就像電影的旁白一樣，娓娓道來。
通過滾動的方式增加交互性，這是明智之舉。試想一下，如果只放置已渲染的演示視頻，那么用戶的操作會受到限制，只能在視頻中前進或后退，毫無樂趣可言。
AirPods的趣味性
說到言之有序，我們看 iPad 的頁面介紹。四款產品，分別是：iPad Pro、iPad Air、iPad、iPad mini。
拍攝角度的秩序感，可謂妙不可言。
iPad的秩序感
如此一來，即顯得有序，也不會導致視覺疲勞。
其次，官網與 iOS 保持協同的設計語言，給用戶呈現了一致的感官體驗。
從 iOS 11 開始，蘋果就采用了 Large Title 大標題的字體風格。字重也從 Regular + Light 的組合，轉向的 Medium + Bold ，以此增強信息傳播中的識別力。
HomePod
另外，高斯模糊的標題欄背景、產品的投影等設計語言也保持系統一貫的風格。我們可以很清晰的看到 Web 設計的同步轉變。
第三是視差帶來的層次感。
蘋果奉行包豪斯的無裝飾和極簡的理念。當然，它不是那種附庸的美觀及外表的光鮮，而是將復雜難懂的技術以簡潔的形式傳達給用戶。
Mac Pro 視差滾動
在信息層次方面，Apple 的編排設計由淺入深，猶如抽絲剝繭。很好的利用了視差滾動，傳達圖片與文字之間「層」的概念。這種深度感可以增加用戶的理解和樂趣。
不僅如此，樣式上富有視覺張力?；驍U張、或收縮、或吸引、或排斥之感覺，呈現刺激與震撼。舉兩個例子：
A13芯片的擴張力
擴張力：整個畫面以 A13芯片 為視覺中心點，元素和布局圍繞這個視覺中心點向外擴張。采用發散式的視覺引導，視覺張力就出現了，讓人感覺巍峨壯觀。
Pro級攝像頭的排斥力
排斥力：通過元素的大小對比，可以形成一定強度的視覺排斥力。Pro級攝像頭 輔以大特寫，傳達空間意識。視覺上被其構圖、美感觸動。
再聊聊蘋果的高級感是怎么來的？
我們都知道，高飽和度的色彩，會影響人的情緒波動。相反，低飽和度的配色，對人眼的刺激較弱，會有一種冷靜且克制的高級感。
iMac Pro 高級感
回過頭來看蘋果官網的大部分頁面，除了產品界面色彩 和 按鈕藍 之外，其他的文字、背景、控件一律采用黑白灰色系，以此營造高級感。
甚至是 iPhone 11 Pro 新出的暗夜綠，也是高級灰中加了一點點綠而已。
換言之，減少使用顏色的數量，降低色彩的飽和度都能削減色彩對人的情緒，起到提升產品高級感的效果。
iPad 留白
除此之外，恰當的留白可以更加突出產品內容，讓重要的信息更準確的傳達。并且能營造出廣闊的空間感，讓畫面得到延伸，呈現一種意境美。
所以我們做設計時應當多做減法，避免無意義的視覺元素堆砌，反而能讓你的設計更有高級的氣質。
這又印證了現代主義建筑大師密斯·凡德羅的那句話：Less Is More。
當然，只有留白是不夠的。既然是做宣傳，那么一份高分辨率、精致的配圖就顯得尤為重要。
蘋果官網大部分的產品都是采用實拍+后期修圖，而非渲染圖。目的就是為了反映真實產品的質感、以及材質光影效果，這一點能看到蘋果對于品質的追求。
Designed by Apple in California
不僅如此，蘋果產品圣經《Designed by Apple in California》，以及壁紙同樣是由攝影師拍攝完成。有興趣的同學可以看下面這個幕后制作視頻，相當硬核。
做過英文 Web 的設計師都知道，英文往往比中文更好設計，相同的布局英文出來的效果也更好看。
這不是崇洋媚外，心理學有個詞叫做「母語羞澀」。簡單來說就是，中文對于我們來說，太常見了會讓人產生一種廉價感（實際上是羞澀感）的心理感受。
老外也一樣，你可以看到美國企業：蘋果、麥當勞、星巴克都是使用圖形 Logo，而日本企業不用母語，而是用英文，比如 SONY、TOYOTA、Canon。
你的下一臺電腦，何必是電腦。
回到蘋果官網，我們看到一部分文案是英文產品名稱，這個不會感覺羞澀。
那中文部分怎么辦呢？比較有意思的是，Apple 的本土化團隊用了完全不對仗但押韻、奇怪的排比、雙關、重復等修辭手法。雖然語感很差，但基本上能明白字面意思。
其實這樣做的目的就是為了創造一種陌生感、一種獨特的語言風格，來凸品牌氣質。舉幾個例子：
最后一點。生活要有儀式感，蘋果官網也有儀式感。
國際婦女節專題
在一些特殊的日子里，例如三八節當天，友商選擇打廣告促銷。而蘋果推出了國際婦女節專題，致敬女性的偉大，這一做法頗具人文情懷。
不過話又說回來，感動歸感動，還是參與友商的打折活動香。
文章來源：人人都是產品經理 作者：阿洋
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
目前基于用戶畫像的標簽體系在各行各業開始得到應用，對于涉及范圍廣，專業知識深的互聯網招聘領域來說，建立標簽體系的難點是什么呢？應該如何建立標簽體系？怎么驗證標簽體系的準確性？文章對這三個問題展開了分析探討，與大家分享。
電商行業客觀來說屬于比較簡單的toC領域，知識網絡是比較容易理解的通用知識，可通過用戶的購買習慣、偏好、商品品類等建立標簽體系。醫療行業屬于專業性強的領域，建立標簽體系必須要懂醫療技術的專家團隊才可以，但是易于操作的是，只需要醫療一個領域專家就可以完成專業的標簽體系建設。
但對于招聘行業來說，行業、職位涉及范圍廣，且專業性強，因為各行各業的公司和求職者都會通過招聘平臺建立聯系，而且有很多高精專的職位和候選人，怎么評估B/C端之間專業技能、工種、行業之間的匹配度，確是一大難點，而且理論上來說需要集齊各個行業、各種職位的專家人員才能建立起招聘行業的標簽體系，但這在現實中要怎么操作呢？
那么機器是否可以自動完成招聘領域的標簽體系建設呢？用NLP抽取職位JD中的描述并將其聚類，比如抽取Java、spring、Unix、Visio、Excel等工具技能，原型設計、交互設計、需求分析等工作內容技能，用戶運營、產品運營、數據運營等工作方向技能，這是互聯網從業者最熟悉的開發、產品、運營的工作內容和技能，如果機器可以識別這些類別標簽就很完美了。
但現實卻是看似的完美與和諧，萬一Java是出現在了招聘專員的職位描述中呢？用戶寫的是“負責招聘Java工程師”，假如Visio出現在Java工程師的描述中呢？假如Excel出現在運營專員的職位描述中呢？這些技能還是不是這個崗位的核心能力？
首先，Java出現在招聘專員出其實是可以用硬規則過濾掉的，比如限制職位和技能的關系，也就是說不是所有技能都滿足所有職位，有的技能只適用于某些職位，在其他職位內就是無效信息。
其次，需求分析是不是產品經理的技能標簽呢？有的人說肯定是了，這個回答可以說對也可以說不對，對是因為需求分析確實是產品的必備能力和工作內容，不對是因為所有的產品經理都需要需求分析，那這個能力還是該產品經理區別于其他產品經理的能力嗎？
最后Excel會出現在運營專員內、也會出現在招聘專員內，也會出現在統計專員內，那么它還是個核心的技能標簽嗎？
通過以上分析可得到以下歸納性的總結：
所以通過以上分析可知，純NLP機器識別的方式不能完成招聘領域的標簽體系建設，因為機器沒辦法在一個崗位的眾多技能中篩選出哪些是重要的知識技能，哪些是不重要的知識技能。
招聘領域的標簽大家首先可以想到的就是學歷、工作年限、薪資范圍等比較通用的職位/簡歷端匹配維度，當然這些顯性通用的標簽早已被各招聘平臺做成了結構化的篩選項。
其次還有一些比較小眾的維度要求，比如有的職位要求海外經歷、黨員、國企工作經歷、籍貫、年齡等，有些平臺也把其中的某些維度做成了平臺上的結構化標簽。
不過這些不是我們研究的重點，我們主要研究的是每個職位專業的知識方向的技能。
建立專業知識標簽體系的重點就是建立專業的崗位研究專家團隊，想要做某個崗位的專業知識標簽研究，肯定需要熟悉該崗位的人員，是選擇從事該崗位工作的人員呢，還是對這類崗位有所了解的HR人員呢？
因此就這兩類人員進行了調研與分析，最終發現從事該崗位的人雖然對所從事的崗位了解比較深入，但對其他相關的崗位未必了解，也不太了解招聘過程中用戶的感知與思維；
HR人員雖然在專業深度上對崗位的了解不是很深入，但所了解的崗位范圍廣，只要從事過某個行業的HR工作，基本都熟悉該行業所有的崗位與關注的重點技能，且HR經常使用招聘平臺，有用戶感知，對用戶行為與邏輯都非常了解，所以HR更適合做崗位專業知識研究，而且該專家團隊最好是來自各個不同行業的HR人員。
團隊建好了，大概的研究思路也有了，接下來就可以好好研究標簽體系具體的生產流程與規則了，對此進行了如下圖的總結：
體系建立的目的肯定是運用在算法的推薦與搜索中，初期可以通過離線的漏斗數據轉化對比（命中標簽與未命中標簽的轉化對比）來驗證該標簽體系的離線匹配效果，再者可通過灰度實驗，小流量上線實驗來驗證實際線上的匹配效果。
專業知識標簽關注的只是匹配度的準，最終線上使用肯定還要考慮用戶是否活躍，B端HR是否著急要人，C端求職者是否在找工作，如何平衡專業知識的準與用戶行為的活之間的權重也一大難點，要找到那個準與活平衡的比例區間，在這個區間內線上能實現最大的用戶達成，這方面在此不多做分析，需要算法同學多次調整模型才能達成。
基于用戶行為的用戶畫像標簽體系在電商領域中運用廣泛，在招聘領域此類標簽體系同樣適用，只不過電商領域中的“查看-聯系賣家-購買”行為在招聘領域變成了“查看-開聊-達成約面”行為。
電商平臺中的協同過濾理論在招聘平臺也同樣適用，只是變成了基于相似職位的過濾和基于相似候選人的過濾。有的企業以往達成的多數是名校候選人，那么我們就知道該企業偏好有名校教育經歷的；有的企業招聘銷售崗更傾向于在專業知識體系中的有軟件銷售經驗的候選人，那么我們就知道該企業偏好軟件行業的銷售候選人。
通過用戶畫像體系我們可以評估用戶的偏好，以期在該用戶以后的推薦中使用其偏好，達到更好的效果。
靜態通用標簽是所有職類共用的標簽特征，屬于大批量標準化的生產與運營，通用標簽生產完善了，可以實現粗礦式大步快跑節奏的匹配達成；
而專業知識標簽是每類職位專業的標簽特征，是小批量精細化的生產與運營，在前面大步快跑達到一定匹配度之后，再結合精細化的小步快跑方式，逐步將每個職類的顆粒度劃分為更精細化的顆粒度，達到更高匹配程度；
在前面標準化、精細化兩輪分類之后數據已經被分成了一個個小類，但卻沒有衡量單個用戶偏好的特征標簽，而動態的用戶行為標簽就是單個用戶個性化的偏好特征標簽，用戶的偏好有可能是通用的學歷、年限特征，也可能是專業知識中某個技術框架、某種產品品類特征。
最終，靜態標準化通用標簽、專業知識精細化標簽、動態行為個性化偏好標簽，三者相互作用、相輔相成，提升招聘領域線上效果的匹配準確度。
文章來源：人人都是產品經理 作者：艷杰
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在如今大數據的時代，一些軟件會根據我們的地理位置、性別、喜好等等進行算法推薦；能夠對一定規范的輸入，在有限時間內獲得所要求的輸出；比如TikTok，以用戶為中心進行推薦，度很高；本文作者分析了TikTok 的真正優勢，我們一起來看一下。
字節跳動往往被說成是一家算法公司，很多人認為， TikTok是靠算法的黑科技才取得成功的。
事實真的是這樣嗎？
eugenewei認為不是：TikTok的算法跟其他公司使用的并沒有太大的不同；TikTok最大的優勢是它采取了對算法友好的設計模式，在自己內部建立了一個飛輪，幫助其機器學習算法看到了優化自己所需要看到的東西。
原文發表在其個人博客上，標題是：Seeing Like an Algorithm；篇幅關系，我們分兩部分刊出，此為上半部分。
劃重點：
在我上一篇關于TikTok的文章中，我討論了為什么它的For You Page算法是讓TikTok發揮作用的結締組織；它就是主板的總線，用來連接和關閉所有的反饋回路。
但是，在急于了解為什么各家公司都想收購TikTok的情況下，如果字節跳動把這款熱門的短視頻app拆分出來的話，圍繞著它的算法的炒作已經有點被異化成那種往往被歸納為最近西方對中國科技分析的套路了。
在這篇文章中，我想討論一下TikTok的設計究竟是如何幫助它的算法表現得跟它一樣好的。
上次我討論了為什么FYP（For You Page）算法是TikTok飛輪的核心，但是如果這一算法不夠有效的話，那整個反饋回路就會崩潰；哪怕你對TikTok或短視頻領域不感興趣，了解一下這個算法是如何實現性也很重要，因為各行各業的公司都日益面臨著核心優勢是機器學習算法的競爭對手的競爭。
我想討論的是TikTok的設計是如何幫助它的算法“看”東西的。
James C. Scott的《國家的視角》（Seeing Like a State）是那種很獨特的書，看過之后你會意識到硅谷就有那種使用（濫用）清晰性這個術語的類型。
我是在看到Venkatesh Rao的書摘之后第一次聽說這本書的，如果你不打算看原著的話，那篇書摘仍然是很好的tldr入門讀物（Scott Alexander的書評也不錯，只不過他的書評也已經長到可以做自己的tldr ）；不過，我建議你還是要好好看看原著。
Scott那本書的副標題是“那些試圖改善人類狀況的項目是如何失敗的”。
這本書可以提高你對日常生活當中的各種意外后果的意識，當我們也有著偉人一般的傲慢時，不妨保持更謙卑的態度；這個世界比我們想象的要更豐富、更復雜。
比方說，Scott的討論有很多都跟我們的現代社交網絡巨頭的某種傲慢感有關；這些占主導地位的應用的目的就是要提高自身用戶群的清晰性，其中包括促進互動、防止用戶流失并最終提供定向廣告；反過來，這又導致他們的母公司陷入到錯綜復雜的問題之中，至今都未能擺脫困境。
不過這是需要另行討論的話題了；Scott關注的是民族國家如何用簡化的抽象在概要的層面 “看清”自己的公民，而我想討論的是TikTok的app設計是如何讓它的算法“看到”有效地執行匹配工作所需的所有細節的——這篇文章討論的則是是應用和服務在設計時最大限度利用機器學習新模式。（我知道，這種討論有點諷刺意味，因為這種“看法”有可能被塑造為另一種決定用戶看法的看法，一種美國的科技公司只能作壁上觀的看法。）
近年來，至少在像我這樣的門外漢看來，我們意識到，只需要通過把訓練的數據量增加幾個數量級，機器學習就可以取得很大程度的進步；也就是說，就算算法本身跟幾年前沒有太大的不同，僅通過在更大的數據集上對其進行訓練，人工智能研究人員就能取得像GPT-3這樣的突破（GPT-3暫時給科技Twitter們帶來了高潮） 。
當大家說TikTok的算法是取得成功的關鍵時，很多人會把某些神奇的代碼段看作是公該司的秘密武器。
俄羅斯當代后現代主義作家Viktor Pelevin說，所有的現代電影都是同一個主角：一個裝滿錢的公文包；從《死吻》的放射性物質公文包，到《低俗小說》里面的那個類似的里面金光閃閃的、不知道裝著什么的公文包；從《魔頭對捕頭》（The Formula）的創世紀方程，到大衛·馬梅特（David Mamet）的《西班牙囚犯》（The Spanish Prisoner）里面的秘密的金融處理，我們長期以來一直對有魔力的麥格芬（McGuffin，推動情節發展的對象或事件）感到癡迷。
最近幾周，對TikTok算法的討論已經把它提升成了類似的東西，這個算法就好像是《奪寶奇兵》系列電影（如《法柜奇兵》、《圣戰奇兵》…）里面那些神秘的考古文物一樣。
但是這個領域大多數的專家的態度不會是這樣，他們不相信TikTok在機器學習推薦算法方面取得了迄今為止我們所不知道的進步；實際上，大多數人會說，TikTok的做法大概跟別人的解決問題方法無異。
但是要記住的是，機器學習算法的有效性不僅僅取決于算法，還要取決于利用某些數據集訓練過后的算法；GPT-3也許并沒有什么新鮮，但是通過接受大規模的數據訓練，以及設置大量的參數，其輸出往往令人驚訝。
同樣地，基于自身數據集訓練過的TikTok FYP算法，在將視頻與認為該視頻有趣的人進行匹配方面非常準確有效（而且，同樣重要的是，在不向那些不認為視頻有趣的人推送方面也很有效） 。
有些領域，比方說文本，可以輕松獲得大量訓練得很好的數據；比方說，要想訓練出像GPT-3這樣的AI模型，你可以到互聯網、書籍等上面找到大量可用的文本集；如果你想訓練視覺AI，可以在網上和各種數據庫里面找到大量照片；訓練仍然很費錢，但是至少你手頭有足夠的訓練數據。
但對于TikTok （或者抖音）來說，它那擅長推薦短視頻給受眾的算法可就沒有公開可用的這么大規模的訓練數據集了。
去哪里可以找到模因、小孩跳舞、對口型、可愛的寵物、推銷品牌的網紅、士兵越障訓練、小孩模仿品牌等內容的短視頻呢？就算你有這樣的視頻，又該去哪里找到關于大眾對此類視頻感受的可比數據呢？除了Musical.ly的數據集以外（主要是美國喜歡玩對口型的青少年），這樣的數據并不存在。
這是一個獨特的雞生蛋還是蛋生雞的問題，如果沒有這款app的的攝像頭工具和濾鏡，以及拿到版權的音樂剪輯的話，TikTok的算法需要訓練的那種視頻就很難創建。
那么，這就是TikTok設計的魔力所在：app會激發和促進視頻的創作與瀏覽，算法然后用這些視頻進行訓練，再反過來激發和促進視頻的創作與瀏覽，形成反饋回環。
為了讓自己的算法發揮最大的效用，TikTok成為了自己的訓練數據源。
要了解TikTok是如何做出這么強大的學習飛輪，我們需要對它的設計進行深入研究。
關于科技的UI設計，主導的思想流派（至少是我成長的過去二十年里）關注的重點是消除用戶所做事情的摩擦，并讓他們在此過程中感到愉悅；其設計目標是優雅，什么是優雅：優雅就是直觀、巧妙，甚至時尚。
也許沒有一家公司比蘋果把這種設計風格體現得更加淋漓盡致，巔峰狀態下的蘋果總能把自己的軟硬件做出優雅的感覺——“就是這么好用（it just works）”，但同時又很迷人，讓用戶覺得很雅致。
（蘋果控制風格的名聲就沒那么光彩了——手機、筆記本電腦不可替換的電池，目前有關應用商店規則的爭論）在發布新品的主旨演講時，展示一塊硬邦邦的鋁塊是如何變成嶄新的MacBook Pro機身的視頻的理由是什么？
因為聽到工業激光把那塊鋁雕刻成一體化機身時發生的聲音很性感？然后，當你在咖啡店用那臺筆記本電腦敲擊一封電子郵件時，在你的潛意識里，有關那段視頻的一點殘留的記憶里面會不會讓你的多巴胺受到一點點的觸動？
這種以用戶為中心的設計模式在這么長時間以來一直占據著主導地位是有原因的，尤其是在消費類技術里面。
首先，這的確有用——蘋果的市值最終超過了2萬億美元（還記得假冒的Sean Parker說過十億美元很酷嗎？那還是十年前，現在十億美元不再是金牛了，財富的量級在飛速發展。）
此外，我們生活在大規模網絡效應時代，應用了Ben Thompson的聚合理論并獲得大量用戶群的科技巨頭，可以在他們所參與的市場當中發揮出不可思議的杠桿作用——要先做到這一點，最佳的辦法之一就是設計出能比競爭對手更好地滿足用戶需求的產品和服務。
長期以來，這種設計流派一直占據著主導地位，以至于我幾乎忘記了過去時代慣常采用過的一些蠻不講理的軟件設計了。（不要把它跟野獸派設計混為一談，后者其實就像它在建筑方面的表親一樣，在設計上是相當美的。）
但是，如果要想最大限度地服務好用戶的關鍵要取決于對機器學習算法的訓練呢？如果這個ML算法需要龐大的訓練數據集該怎么辦？在機器學習方興未艾的時代，這日益成為關鍵的設計目標。
在考慮如何設計app時，你日益必須考慮怎么才能最好地幫助算法去“看”——為了最大限度地服務好用戶，請先服務好你的算法。
TikTok讓我著迷，因為不管是意外還是有意而為之，這都是一個為了盡可能多地給自己的算法提供有用信號的現代app的典范——這就是我所謂的算法友好型設計的范本。（我曾經想過把它叫做以算法為中心的設計，但覺得這種說法有點過頭了；一個幫助算法看見東西的設計到頭來仍然是為了給用戶提供盡可能好的體驗。）
我們仍然可以認為這只是以用戶為中心的設計的一種變體，但是對于那些大量采用機器學習算法組件進行產品開發的團隊來說，明確地承認這一點也許有用；畢竟，當產品經理，設計師和工程師開會討論app設計時，算法是不會出席的；但是，對算法的訓練需求必須得到體現。
James Scott在談到《國家的視角》，談到了城市設計等領域的巨大變化，比如讓土地面積和業主數量對征稅者“清晰可見”；TikTok的設計使得它的視頻、用戶和用戶首選項對For You Page算法清晰可見；這種app設計履行了它的主要職責之一：“像算法一樣看東西”。
我們不妨仔細看看，TikTok打開后就是“For You Page”頁面，然后直接進入視頻。這就是它的樣子。
這個是到目前為止有史以來最熱門的TikTok視頻，截止到我發布這篇文章時，它的34.1M個點贊可能已經不止了；你可以看看有關這條TikTok是如何誕生的故事，看過之后你仍然會覺得這是一個充滿悖論的文化難題，但是你看過后會喜歡的。
我把這個給我侄女看了，然后我們一起循環播放了好幾十次，然后我們一起開始大喊“從M到B，從M到B”，然后一起笑了起來，這是我在這場疫情當中真正的感受不是絕望的少數幾次之一。
整個屏幕被一個視頻填滿。只有一個視頻，視頻用豎屏全屏顯示；注意，這是不能滾動的，而是分頁。視頻幾乎是立即自動播放（接下來的幾個視頻被加載到后臺，所以輪到的時候可以很快播放出來）。
這種設計讓用戶要面對一個緊迫的問題：你對這個短視頻的感覺如何？就這個短視頻。
從視頻開始播放到現在，你所做的一切都是你對該視頻的感受的信號；你是不是在它還沒播放完就滑向了下一個視頻？是的話就隱含（盡管邊界是顯性的）表示你對它不感興趣。
你是不是看了不止一次，讓它循環播放了好幾次？似乎不知怎的它就吸引了你。你有沒有通過內置的分享面板分享了這段視頻？這是正面情緒的另一個有力指標。
如果你點擊右下角旋轉的LP圖標，看了更多有著同樣背景音樂的視頻的話，就是該視頻對你胃口的進一步信號；音樂線索往往是模因的代名詞，現在TikTok又有了一條為你推薦視頻的軸線了。
還有，你是不是跑去看了看視頻創作者的個人資料頁面？你是不是看過她其他的視頻，然后還關注了對方？是的話說明你除了欣賞視頻以外，也許你還特別欣賞對方這個人。
但是，我們不妨再退后一步，看看這你還沒有看到這個視頻之前，TikTok的算法自己是怎么“看見”這個視頻的；在這個視頻通過FYP算法發送到你的手機之前，TikTok的運營團隊有人已經看了這個視頻，并添加了大量相關標簽或標記。
這個視頻是跟跳舞有關的嗎？是對口型？還是視頻游戲？有小貓嗎？還是花栗鼠？是搞笑的嗎？主體是男的還是女的？大概幾歲？是群視頻嗎？背景在哪里？用的是什么濾鏡或視覺效果？如果里面包括有食物，是什么食物？等等，所有這些標簽都成為了算法現在可以看到的功能。
視頻還要在視覺AI這里處理一下，并為自己能看到的東西做出貢獻；TikTok有些攝像頭濾鏡能夠跟蹤人臉、手或者手勢，所以視覺AI往往在視頻被創建出來之前就被調用過了。
這個算法還可以看到TikTok所了解到的有關你的信息，你過去喜歡什么類型的視頻？有關你的人口統計學信息或心理學信息有哪些？你是在哪里看這個視頻的？你用的是什么類型的設備？等等，除此之外，還有哪些其他用戶跟你相似？
一、《國家的視角》 Vs 算法的視角
二、TikTok把自己變成算法的訓練源
三、以用戶中心 Vs 對算法友好
文章來源：人人都是產品經理 作者：紙盒小卡車
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在做交互設計或者視覺設計時要遵循一些既有的原則，其中非常重要的一條就是【格式塔定律】
一、什么是格式塔原理？
格式塔心理學誕生于1912年，是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象并對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的：我們的視覺系統自動對視覺輸入構建結構，并在神經系統層面上感知形狀、圖形和物體，而不是只看到互不相連的邊、線和區域?！靶螤睢焙汀皥D形”在德語中是Gestalt，因此這些理論也稱做視覺感知的格式塔原理。
格式塔學派主張人腦的運作原理屬于整體論，“整體不同于其部件的總和”。例如，我們對一朵花的感知，并非純粹單單從對花的形狀、顏色、大小等感官資訊而來，還包括我們對花過去的經驗和印象，加起來才是我們對一朵花的感知。
格式塔心理學家認為這些原則之所以存在，是因為頭腦具有天生的傾向，可以根據某些規則感知刺激中的模式。（是不是覺得hin神奇）
比如，這是著名的“人臉花瓶幻覺”圖。如果以黑色為背景，白色為圖形，則是一個花瓶；如果以黑色為圖形，白色為背景，則是兩個人的側臉。它也反映了圖形和背景對一幅圖的影響。
二、什么是格式塔原理？
使用不同數量的空格來合并或分離元素是傳達有意義的分組的關鍵。例如，在Ant Design的標題區域中，“ 搜索”功能與站點的主要導航位于同一行。但是，主導航和搜索之間的多余空格表示它們屬于不同的組，因此具有獨特的功能。對于使“ 搜索”功能在主菜單的其余部分中脫穎而出，此空格至關重要。
但是，在較小的屏幕上，無法保持此間距。為了避免將這些區域視為一個整體，頁面收縮寬度的時候，搜索后的文字隱藏了。
應具有固定或鎖頭標題的網站特別可以從使用獨特的背景顏色或清晰的邊框中受益，從而有效地將標題與下面滾動的頁面內容區分開。此外，大頁腳的單一統一背景色 可有效地表示該區域中的所有鏈接都屬于一個組。
創建清晰的邊界是一種強大的視覺提示，可以壓倒其他分組原則，例如接近性或相似性。因此，當需要包含幾種不同類型的UI元素或無法調整對象之間的空白量時，它是一種強大的工具。我們做頁面時如果需要把兩個元素放成一組與其他元素區分，那么我們可以用線框畫出邊界來達到目的。
如果其它因素相同，那么相似的物體看起來歸屬于一組。接下來從形狀、顏色、尺寸上來說明相似性原理，這也就是我們平時做視覺設計時的原理，比如我們設計稿宣講時可能會被開發、產品以及測試同學問到“為什么用這個形狀？為什么這里用這個顏色？為什么這兩個尺寸不一致？等等，細細體會這個相似性原理就會給我們答案，讓我們在畫設計稿時能夠有理有據。
在上圖中，我們頭腦中自然而然的會分成“四列”，也就是圓形一列，三角形一列，然后再圓形一列，三角形一列，而不會看成“三行”
應用共享的顏色來表示某些項目是相關的，因此可能具有相似的功能，這很有效。通用顏色往往比其他特征（例如形狀）更加突出，因此可以用于組合不同類型的元素并傳達它們確實相關。
在用戶界面設計中，顏色通常用于指示常用功能。例如，使用單個鏈接顏色作為與用戶交流可點擊內容，鏈接顏色應僅保留給交互式文本和其他可單擊元素，因為用戶會意識到所有具有此特征的項目都是相關的，并且以相同的方式工作。因此，鏈接顏色不應用于關鍵字，不可點擊的標題或實際上不可點擊的附近圖標。
如上圖，就是一個用色的反面例子，“ 消息中心”中的所有按鈕均為綠色，因此用戶必須花時間確定哪個是提交表單的主要按鈕。（此外，“ 提交”按鈕離消息區域很遠，并且根據Fitts的定律，這種缺乏接近性也會降低用戶的速 度。）
相同顏色的按鈕將被視為具有相同的重要性級別。因此，應為主要操作性按鈕保留單獨的顏色，以幫助它們在輔助按鈕中脫穎而出。
在用戶界面中，我們經常使用大小來強調內容或按鈕中最重要的部分。相同的大小表示相同的視覺突出度，并且在所有其他條件相同的情況下，將共享該屬性的所有元素連接在一起。一致地使用大小會創建視覺層次結構，并使頁面易于掃描，因為人們可以立即看到并理解這些類型分組。
例如，在產品列表頁面中，每個單獨的產品列表都以相同的大小（和相同的形狀）顯示。這種一致的視覺樣式告訴我們該區域中的所有物品都是產品。共享大小將其與其他不同的UI元素分開。當某項商品在此列表中以不同的大小或形狀出現時，就會突出顯示為不屬于產品分組。下面這個產品集合的促銷以單個產品列表大小的兩倍顯示。
下面是我最開始嘗試的招聘系統首頁的改版：
根據上面的相似性原理和接近性原理就可以很容易看出來，這個頁面結構和邏輯不清晰：
1.待處理和招聘日程兩個模塊之間的區分不夠清晰：因為這兩個模塊右側應用了同樣的形狀和顏色的按鈕（相似性原理），讓用戶在心理上產生聯想，同時這兩個模塊之間只靠間距來區分，區分的太弱了（接近性原理）
2.招聘日程頭部日期與下面的面試安排卡片聯系太弱：因為面試卡片用了非常強的邊界區分的線條（接近性原理-構建清晰的結構）確實在面試模塊之間構建了清晰的結構，與此同時卡片與頭部的日期之間看起來沒有什么關聯。
3.首頁的選中效果太弱，分析這個頁面的層級，左側首頁選中才應該是最重的，能讓用戶第一眼就知道在系統中的位置，很顯然目前來看很容易忽視首頁這個位置，關注點被吸引到了快捷入口。這并不是我們想要傳達給用戶的。
根據格式塔原理中的相似性原理和接近性原理，對頁面的結構進行了調整，就看起來清晰多了。
所以，我們在制作完設計稿后，可以應用格式塔原理，分析下最終呈現給用戶的結構和邏輯是否清晰。而這也是做視覺的理由和底氣。
視覺傾向于感知連續的形式而不是離散的碎片。
連續理解起來是很簡單的，但連續卻解決了非常復雜的問題。通過找到非常微小的共性將兩個不同的環連接成一個整體。在引導頁中經常會用到這個。
視覺系統自動嘗試將敞開的圖形關閉起來，從而將其感知為完整的物體而不是分散的碎片。
閉合可以實現統一整體，這不難理解。但是有一個非常有趣的現象值得我們去觀察和思考，就是不閉合時候也會實現統一的整體，更確切的說，這種現象是一種不完全的關閉。這些圖形與設計給人以簡單，輕松、自由的感覺。所以，完全的閉合是沒有必要的。最著名的應用便是蘋果公司的logo，咬掉的缺口喚起人們的好奇、疑問，給人巨大想象空間。
我們傾向于分解復雜的場景來降低復雜度。
我們的大腦將視覺區域分為主體和背景。主體包括一個場景中占據我們主要注意力的所有元素，其余則是背景。這個原理經常會在海報設計中應用，這也是為什么我們做海報，做平面時，一定要制作好背景，背景的氛圍很重要。
文章來源：站酷 作者：ZZiUP
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
作為人類，我們無法總是理性地看到事物的本質。社會心理學告知我們，人類的感知與決策，在一定程度上，會帶有偏差。而作為設計師，我們可以主動利用這些偏差，設計更好的產品。
本文介紹了三條曲線，它們都將認知偏差做了可視化的表達，前兩個來自日常收集整理，后面一個由筆者總結工作經驗得出，下面開始吧。
1984 年，經濟學家 Mazur 提出模型：我們的大腦難以處理冗長的信息，因為不確定性隨著信息的增加而增加。隨著時間推移，我們對收益的感知下降。
決策中，我們傾向于把長期的權重調低：無論是收益還是成本，只要時間夠長，我們都傾向認為它不夠重要。
舉例來看：各大銀行如何吸引潛在用戶辦理信用卡？可以承諾在后期，提供專業的優質服務與購物優惠，也可以信用卡辦理完成的當下，讓用戶領取諸如行李箱、廚具套裝之類的禮品。雖然兩種方式都有可能吸引來用戶，但原本辦卡意愿相對低的用戶，大部分是被當下的禮品所吸引。換言之，這部分用戶是「額外的」。
各大互聯網產品都深諳此道，比如購買會員的頁面，首月打折/首月免費/一年后付費都是慣用的手法，就在當下，給用戶利益，促進轉化。
技巧總結：比起稍后的利益，我們更傾向當下給用戶一些甜頭，哪怕甜頭很小。
峰終定律由諾貝爾獎得主 DanielKahneman 提出：人們對于一段體驗的評價，取決于這段時間內最好的體驗，與結尾的體驗。我們的大腦最擅長「以偏概全」，它不會無差別收錄所有內容，只會去記錄離自己最近、讓自己印象最深的點。
宜家是峰終定律最好的踐行者。顧客的購物流程中，差強人意的體驗不在少數。比如店員很少，難以及時獲得幫助，比如購物路線很長，對于有明確購物目的的顧客不太友好，比如永遠要排的結賬長隊等等。
但是宜家把握了它的「峰&終」?！阜濉故沁^程中的小驚喜，比如隨時可以坐下體驗的沙發躺椅，比如偶爾出現的極便宜的家居用品，比如貼心的鉛筆與尺子；「終」就是結賬出口外，撫平顧客排隊焦躁的冰淇淋與熱狗。
而這些產品宜家本可以提高售價，但卻沒有。因為用一個美味便宜的冰激淋結束購物之旅，糟糕體驗被拋到腦后，人們回想起宜家時，會選擇性地認為整個流程都非常棒。
游戲產品也非常善于遵循峰終定律讓玩家玩得更盡興。比如疫情之后大熱的 Switch 健身環大冒險。
運動時，系統會一直強力夸夸為玩家打氣，完成動作都會有及時的鼓勵給到，創造一個接一個的體驗「峰」值。每一次通過關卡，還會讓玩家站直并高抬雙手，將健身環舉過頭頂堅持幾秒，畫面里的「終」是非常有儀式感的 ending 動作，讓玩家成就感滿滿。
技巧總結：在滿足了用戶的常規體驗之后，用心打造一些帶有巧思的設計，安排在流程的中間與結尾處，給用戶創造峰值體驗。這不僅有可能讓普通用戶轉化轉化成忠誠用戶，還能極大提高產品滿意度還能帶來口碑效應。
租房產品中，用戶在 APP 內挑選幾套心儀的房源，再約房東/經紀人去實地看房，是很典型租房用戶場景。我們發起「看房路線」這一功能的設計。使用看房路線，用戶能夠在選好x套房源后，根據智能規劃的看房順序與路線，輔以時間提示與導航，有條不紊地去實地看房，妥妥貼心功能。
我們大費周章產出了設計方案，上線后的效果，無論是使用頻率與使用深度，都不理想。調研后發現，實地看房的場景，其實存在極大的不確定性。用戶在看房中途，可能做出決策租賃某一套，也可能被經紀人帶領去看別的房源，從而中斷原本的計劃。
用戶是完全自由的，他們會尋求最熟悉、最好用、最穩妥的途徑去解決自己的非娛樂性問題。至于導航，用戶平時使用什么同類產品呢？高德地圖、百度地圖這類很成熟的地圖類應用。
用戶不會因為場景不在專業的地圖APP內，就原諒打折扣的導航體驗。用戶預期遠高于實際產品開發程度，這種認知偏差，需要產品人來買單。
總結這個功能的問題出現在哪里？其一，設計缺失，沒有將線下流程的旁枝側節考慮全面；其二，設計過度，但沒有成本去滿足用戶的高階需求。如何調整用戶的預期到合理的區間，我們做設計時的「度」怎樣把握，徒勞曲線應運而生。
橫軸是設計投入程度，縱軸是用戶滿意度，隨著設計投入程度的加大，用戶的滿意度呈遞增態勢，但到了一定程度，滿意度會斷崖式下跌至谷底，這個階段的設計投入便是徒勞。當設計投入快到達極限時，滿意度又陡然到了一個新的高度。
我們要將自己的設計置于一個合理的區間，并將用戶的期望調整同步。當有足夠成本支持（無論可觀支持抑或主觀爭?。r，把握機會，為用戶創造體驗。
技巧總結：要引導用戶在使用產品的時候，對功能有合理的預期——如果不能提供完善的服務，就用樸素的設計方案滿足用戶的基本訴求，而非好高騖遠。在用戶有更加合理選擇的時候，給與用戶便利，尊重用戶的自由。這樣不太功利的思考與設計，很可能帶給你的產品帶來更快的迭代，與更多的用戶。
雙曲貼現、峰終定理、徒勞曲線，三條曲線嘗試將人們的思維偏差暴露出來，利用得當，事半功倍。希望能帶給你一點啟發。
文章來源：優設 作者：58UXD
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
滿足用戶的懶是用戶體驗的本質，利用用戶的懶是探索人性的設計！
用戶有多懶？
人有七宗罪，其中就有懶惰，懶是人的天性，是刻在骨子里的基因。
現在互聯網產品幾乎都是在滿足人的懶，買菜不用去超市、餓了可以叫外賣、不想看書讀給你聽、不想打字有語言功能等等，互聯網的發展把人慣得越來越懶，也正因如此，才成就了許許多多的產品。
為用戶多想一步，就是思考用戶的行為目的是什么，然后在設計上為用戶提供快捷的操作方式，這樣就能提高產品的使用體驗。
設計產品時不能總以自己慣有的思維方式去設計，要能把自己變成當下產品的用戶，站在用戶的角度去尋找答案解決問題。
我們從更高一個層面去思考這個問題，是哪些人創造了互聯網盛世，又是哪些人推動了社會進步，絕對不是懶的學習、懶的改變自己的人，而是那些善于思考想要改變“懶”的人。
文章來源：站酷-吳星辰
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
本篇文章將分享Web端表單體驗優化等相關內容，分析設計師在設計B端類產品時如何讓用戶愉悅并的填寫表單。
表單作為基礎通用組件，也是在各個企業級中臺中出現頻率最高的元素之一。在用戶界面中表單無處不在，比如：用戶注冊登陸頁、支付頁、用戶反饋、共享信息數據錄入等不同類型的表單。當我們使用/設計表單頁面時看似是按鈕、輸入框等表單組件進行組合搭配使用，看似簡單，但是在實際業務使用中卻有著無數可推敲的細節冒出來，常常給設計師造成較多的困擾。
那么在實際工作中哪些內容會給設計造成困擾呢？舉幾個例子：在實際的業務中很多產品因為業務導向需要入海（非中國區方向），所以就存在表單標簽對齊方式問題，如果右對齊可能在中文的情況下表單標簽預設寬度正好合適，但是當用戶切換到多語言時因為語言差異會導致折行嚴重等一些列問題，相當影響體驗；設計師常常疑惑表單標簽是頂部對齊、右對齊還是左對齊，他們的差異點在哪呢？必填與非必填項以什么形式告訴用戶會更加合理呢？表單按鈕放在頁面哪個位置體驗會更佳呢？
所以我們不能忽視這些設計細節，往往一些好的設計細節提升總會給用戶帶來不一樣的用戶體驗。針對以上這些舉重若輕的問題我們一一明確、拋出并與大家一起來進行由淺至深的探討「如何提升表單體驗」。
重點概覽
一、表單分析
二、體驗與優化
三、排列與布局
四、寫在最后
表單分析
1.1 表單的重要性
在上面的前言中也提到了表單作為基礎通用組件，也是在各個企業級中臺中出現頻率最高的元素之一。并且在《Web Form Design》一書中 Luke Wroblewsk 也提到了“表單決定了最關鍵的界面中交互的成敗”，當用戶使用網站時會有一個特定目標，如果設計得好，網站將實現有效性。效率、用戶主觀滿意度以及特定用戶在特定使用環境下所達到的特定目標，也是設計師想要達成的最終目標。表單往往是目標用戶和整個產品的一所橋梁。因為，盡管人機交互的發展進步，表單仍然是用戶在網絡中進行交互的主要方式。所以表單是被認為完成目標的最終，也是最重要的階段。
我們以淘寶來舉個典型的例子，淘寶屬于國民電商平臺也是亞洲較大的網上交易平臺，提供各類優質商品。從平臺的特性來講，它以用戶下單并成交作為最終目標。其中支付表單起著一個關鍵的作用，用戶從購買到支付完成以分步形式進行，第一步填寫基本信息并提交訂單，第二步選擇商品并選擇支付貨款至第三方，第三步買方確認收貨并自動打款給商家，第四步完成訂單并評價。在填寫表單時中間沒任何阻斷，用戶能很順利的按步驟完成訂單。淘寶支付表單屬于比較典型的分步表單。
1.2 拆分表單
我們簡單提一下表單組成（網上有很多詳細的相關文章），一個完整較復雜的表單是由7個基本組成部分，表單類別、表單標簽、表單基本組件、占位提示、幫助信息、按鈕、校驗。表單可以包含以上組成部分，但不是一定都要有，比如：移動端填寫驗證碼時為了減少用戶操作，當用戶填寫完成之后直接提交表單驗證。
表單類別：第一時間告訴用戶此段落的表單大致內容，減少用戶理解并承擔著概括內容的作用；
表單組件：包含了輸入框、下拉框、日期選擇器、時間選擇器、開關、上傳等十幾種類型，是形成表單的核心內容；
表單標簽：表單標簽承擔著對輸入項或設置項的解釋作用，所以表單標簽需要合理設置，核心點是幫助用戶快速理解每一項字段的作用；
占位提示：使用通用的認知提示并且以較弱的方式呈現給用戶，用戶填完信息即消失。注意：占位提示不能替代標簽，因為消失的占位提示會拉長用戶的短期記憶，如果沒有表單標簽用戶將無法在提交表單前檢查他們填寫的所有信息。文章下面會詳細分析。
幫助信息：當表單標簽不足以對輸入項準確說明時，這時候需要使用文本提示用戶。它不僅能讓用戶提前感知輸入后的樣式，還能夠有效的告訴用戶該如何輸入以及表單提交后達到的目的。
按鈕：當用戶完成信息錄入時，按鈕能夠對表單內容進行校驗或提交。
校驗：對用戶信息錄入內容進行校驗并給出對應的錯誤提示。如：內容是否為空、類型格式是否正確、是否符合業務邏輯等等。校驗時有兩種規則，分別是使用即時校驗（失焦即校驗）和點擊提交按鈕以后的最終校驗。狀態分別為錯誤、警示、成功。
1.3 表單類型
基礎表單
較為簡單的一類表單，把所有表單字段平鋪在頁面中，字段內容較少。當用戶輸入少量信息即可完成一個簡單快速的任務。例如：此類型表單常常用在簡單的登錄注冊中。
分步表單
較為復雜的一類表單，把一個相對復雜的表單字段拆解為多個步驟進行。根據業務屬性進行步驟分組利用步驟條告訴用戶所完成的流程和進度，當用戶每次填寫都意味著一次節點完成，整個流程結束給予明確的結果反饋，并以提交成功為最終。分布表單有利于減輕用戶由于表單大而復雜的造成的填寫負擔，并且能減少用戶表單填寫出錯率。
分組表單
將一個復雜表單拆解歸類分組。分組表單與分布表單特點較為相似，都可以減輕用戶因為表單大而復雜的造成填寫的負擔，并且能減少用戶表單填寫出錯率
體驗與優化
1.1 必填項or可選項
在設計表單時大多數設計師都習慣性的使用星號表示必填字段。但那么問題來了，針對必填項和可選項用那種形式才是最科學的呢？我們簡單分析一下。
當表單中的必填信息多于非必填信息時，如果使用紅色星號表示必填項，那么大量紅色星號導致增加用戶的認知負擔，使得用戶無法快速識別哪些是必須填寫的，哪些是不必須填寫。并且使用紅色星號會帶給用戶一些恐懼感，它增加了出錯的風險并降低了表單填寫率。因此在表單設計中，當必填項多于非必填項時，隱藏紅色星號標記，通過暗提示標記可選項的形式來幫助用戶識別。
紅色星號對于不同用戶也會存在不同的認知差異。對比較有經驗的用戶可能表意較為明顯，但不代表所有用戶都能理解，比如一些非中國區用戶使用國際化產品時存在不同認知，因為每個國家本地化差異較大導致認知差異。
還有一點是表單中視覺噪聲越少可讀性越強，因此當必填項多于非必填用非必填字段提示用戶會更好。
1.2 單列布局or多列布局
多列表單字段會導致用戶視覺路徑變長，因為如果表單中有水平相鄰的字段，則用戶必須以Z樣式進行視線掃描，整體的效率和工作量都更大，使清晰的路徑變得模糊并加長用戶閱讀時間。多列表單可能會存在用戶跳過他們實際要輸入的必填字段，將數據輸入到錯誤字段中。而最終校驗信息時用戶得反復檢查錯誤項導致用戶放棄填寫。
如果表單使用單列，則完成的路徑是頁面垂直向下的一條直線，單列布局能夠給用戶呈現一條清晰的視覺路。因此，表單較為簡單時盡量避免將表單分成多列，在業務場景允許的情況盡量使用單列（部分業務訴求和一些特定場景要求，多列布局會更節省垂直空間，但是多列布局需要考慮字段之間的關聯性，這里不強求一定只能使用單列布局）。
1.3 將復雜的表單分為幾個簡單的步驟
在設計師設計表單時可能業務場景復雜、字段較多，即使設計師把很多不必要的字段都刪除也解決不了根本問題。所以，這時候設計師需要將大型任務分解為一系列較小的任務，使得表單更加的簡潔。這種方式的好處是能將步驟以視覺的方式傳達給用戶數量、名稱、說明等信息，更加提高用戶滿意度并且能激勵繼續填寫。
但是設計師需要注意的是不要太過于細化步驟以及在小型彈出窗出現過多的步驟，過多的步驟不利與用戶填寫和記憶，反而增加用戶負擔。
1.4 按鈕的位置
按鈕放在頁面左下角比較好還是放右下角比較好？這是設計師在設計表單時常常糾結的一個問題。其實在14世紀西方活字印刷術的發明人約翰·古騰堡提出一個概念古騰堡法則（Gutenberg Diagram），又稱對角線平衡法則。它指出用戶在瀏覽頁面或一些布局時，視線往往趨向于從左上角到右下角進行掃描。左上角是第一視覺落點區（主視區），而右下角是最終視覺落點區（終點區）。與之相對，右上角和左下角則是視覺盲點。用戶的視覺移動端規則是從上到下，從左到右。
所以，界面中的左上和右下是用戶視覺最為重點關注的位置。遵循古騰堡法則，設計師應該把界面的關鍵元素放在主視區，終點區可以放按鈕、強提示，盲點區可以用來放一些相對次要的內容，如輔助圖形、文字信息。
同理，表單中會出現組合按鈕，比如：取消與確認、提現與充值。根據古騰堡法則，用戶使用界面時從第一視覺落點區是主視覺區(Primary Optical Area)，最終停留在結尾的終點區(Terminal Area)。
如下圖是一個彈窗類型的表單，如果根據業務訴求確認操作重要程度強于取消操作，那么確認按鈕應該放在取消按鈕的右邊。因為確認按鈕放在右側(終點區) 用戶關注度會更強。
1.5 占位提示避免代替表單標簽
常規的占位提示作用是使用通用的認知提示并且以較弱的方式呈現給用戶，當在字段中填入內容這些提示通常會消失。
設計師常常遇到表單字段較多并且頁面空間有限的情況，為了減少橫向節省空間設計師常常的做法是將表單標簽刪除，使用占位提示文本作為信息提示。但是設計師必須有意識知道到這種方式適合使用在較為簡單的表單中，比如：表格中點擊修改名稱操作，彈出氣泡并且氣泡中只存在一個字段?；蛘呤窃谟脩舴浅Ｊ熘牡卿涀缘容^為簡單的表單填寫時使用。但是當用戶需要填寫大量字段信息時不建議使用占位提示代替表單標簽的方式。原因有兩點：1. 當用戶選中文本框填寫時，占位內容即消失，這時候用戶無法檢查并確認其所寫的內容是否符合預期。2. 當用戶看到文本框中已經回填內容了，誤認為占位提示是默認回顯內容，造成內容已經填完不需要再操作的錯覺。
針對上面問題也不是沒有解決方案，在Material Design中有提供針對上面的問題的解決方案，我們這邊暫時稱其為“浮動標簽”，默認情況下輸入框內顯示占位文本，當用戶輸入內容以后占位文本浮動到內容上方與內容左對齊。
1.6 校驗反饋及時并準確
設計師通常認為用戶在填寫表單時能夠很順利的完成表單錄入，但事實相反。在實際的使用場景中，特別是在一些業務較為復雜的表單中用戶極易發生錯誤，這時候需要需要明確的校驗信息、準確的校驗時機、輸入的限制提示。
錯誤提示校驗
錯誤校驗提示一般存在于錯誤率較高情況下出現，如：在登錄注冊時，要求用戶填寫手機號，如果用戶輸入的手機號碼不符合特定的輸入格式，那么這時候需要明確標記錯誤原因，準確的幫助用戶找到問題并解決，避免錯誤提示描述模糊不清誤導用戶。錯誤提示一般會采用“雙重視覺強調”來顯示錯誤，除了輸入框突出顯示外，同時需要在輸入框下方加入紅色指導文字。如下圖所示為西瓜視頻登錄注冊場景下的截圖：
限制與格式提示
在表單中如果出現特定格式時務必要提前告知用戶?？梢栽谳斎肟蛑酗@示概括回答的方式引導用戶，如：請輸入日期，eg：mm/dd/yy。這樣便于幫助用戶提前感知，減少表單填寫錯誤率。
校驗時機
為了避免用戶在提交時表單時出現大面積的報錯問題，設計師可以使用實時校驗的交互形式。如：在用戶輸入完成之后鼠標失焦后進行信息校驗，但是需要注意的是在實時校驗時避免用戶還沒有輸入完成即出現校驗誤導用戶，所以需要準確判斷鼠標是否失焦。如下圖所示為西瓜視頻登錄注冊場景下的截圖：
1.7 字段長度與輸入預期成正比
在實際業務中，設計師常常習慣把每個表單字段都設置成相同的寬度，在視覺效果上看感覺會比較統一，但是這種做法實際上體驗欠佳。字段的寬度應該向用戶暗示所需輸入內容的長度從而減輕判斷負擔。在Ant Design 4.0 系列分享的文章《整齊劃一？不如錯落有致》中分析到錯落有致的排版表現似乎比整齊劃一的左圖更舒適，因為在視覺上我們更容易將右圖的空間和內容視為一個和諧的整體。但左圖過度的對齊導致暗示隱性的截斷，我們慣性視覺會產生表單字段右側空間缺了一大塊的錯覺。
文章總結到“表單寬度的處理方式核心旨在解決兩個問題：1. 暗示填寫內容長度；2. 表單項布局排列效果，我們通過設置合理的默認寬度尺寸和描述關系，就可以讓設計師們跳過部分繁瑣磨人的細節思考，快速搭建表單寬度合理且舒適的頁面?！?/span>如下圖所示：
排列與布局
1.1 定寬or自適應？
表單做定寬還是做自適應？哪個“更好”的這個問題時常困惱著我們。其中Button、Radio、CheckBox等本身是定寬組件還好，它根據內容自適應即可，但是當遇到Select、DataPicker、Cascader等類型時就會開始糾結這個問題。在實際的業務中不論是做理想中的定寬還是自適應，很多情況下瀏覽器窗口大小不一可能導致在一些極限情況下都會產生不盡人意的情況。腦補一下，比如：在筆記本的小屏幕下左對齊并定寬效果還不錯，但是當你把頁面呈現在較大顯示器下，這時候頁面右側又會呈現出大面積的空白。參考AntDesign提供的典型頁面以下三種樣式是都會造成不同的反面效果。
所以在實際業務場景中如果沒有明確自適應和特定自定義寬度的需求時可以通過以下幾種方式處理。
將關聯性強的字段分組
如果頁面橫向寬度足夠大時，可以將一個區域中字段較多、并具有關聯性字段進行分組，這樣不僅有利于空間布局上的利用，還可以通過字段之間關聯性暗提示幫助用戶更好理解。格式塔心理學中有多種分組原則，可以使字段之間具有相關性：接近度，相似度，連續性，閉合性和連通性。將非結構化字段分組為幾個機構化的集合提高表單的可用性。
設置字段寬度梯度
可以給字段設置幾檔寬度梯度的尺寸，我們可以站在AntDesign這個巨人的肩膀汲取一些相關經驗，其中4.0系列分享的文章中總結到其經過對十幾個業務線梳理，將組件寬度定義了5中高頻的空間尺寸，分別是： XS（80~160px）、S （160~280）、M（280~360px）、L （360px~480px）、XL （480~560px）。根據原理，我們可以假設原子寬度XS為100，那么通過尺寸的倍數+間距的方式來計算其他的四種尺寸（間距暫定8px情況下得到：S=208px、M=316px、L=424px、XL=532px），通過此計算方式也是用來解決視覺對齊規則，如下圖所示：
1.2 表單標簽頂部對齊or右對齊or左對齊
在設計表單時到底是左對齊、右對齊還是頂部對齊呢？這個問題也是在實際業務中設計師發問頻率較高的一個棘手問題。其實，不論是哪種方式都有相對的利弊，需要根據實際業務場景提供不同的解決方案。在Matteo Penzo《Label Placement in Forms》文章中有分享過關于表單標簽放置的研究，下圖是Matteo Penzo研究總結得到的瀏覽時間表：
表單字段頂部對齊
將表單標簽放置在其對應輸入字段的正上方，并垂直左對齊排列，用戶只需依次向下瀏覽即可看到標簽與輸入字段兩個元素。其優勢是橫向屏幕空間足夠，能夠比較友好的適配多語言適合非中國區業務表單使用。并且根據上面Matteo Penzo的時間表上看，頂部對齊的瀏覽和填寫的效率也是3種常規的對齊方式中較高的一種。不足點是會占用較多的縱向垂直屏幕空間，此外應當注意每組表單標簽和輸入字段與其他字段組的間距，以免層級區分度不夠的問題。
表單字段右對齊
將表單標簽放置在其對應的輸入字段的左邊，標簽右對齊。其優點減少了占用屏幕的高度，并且表單標簽與輸入字段關系較近，所以用戶在填寫表單時效率較高。不足點是由于表單標簽的字數不可控（特別是針對非中國區業務時，多語言切換可能會出現超長的文案，甚至出現折行的情況），可能會造成左側參差不齊的問題，導致可讀性不高用戶在查看表單時比較費勁，并且不太適合非中國區業務。
表單字段左對齊
將表單標簽放置在其對應的輸入字段的左邊，標簽左對齊。表單標簽和輸入字段距離較遠，用戶從左至右瀏覽時間變長，并且根據上面Matteo Penzo的時間表上看，左對齊的瀏覽和填寫的效率是3種常規的對齊方式中最慢的一種。但是，如果業務需要用戶對表單放慢速度并謹慎填寫（復雜表單或者表單中含有大量高級設置的陌生數據時），左對齊的方式會減少部分用戶的出錯率。但不太適合非中國區業務。
1.3 表單布局類型
常規布局（簡單）
在實際業務中當表單字段較為簡單時可使用，表單字段至上而下單列排列布局，用戶只需縱向閱讀填寫，填寫完成率較高。
多列布局（較復雜）
垂直空間有限并且表單含有較多填寫字段的復雜表單時，可將具有相關聯字段放在一個卡片區域中進行歸類，將多個字段組合在一行，形成多列排布的暗提示幫助用戶更好理解。
區域分組布局（復雜）
表單含有較多填寫字段的復雜表單，可將具有相關聯字段進行分類并以標題區分的形式進行字段分組，并且表單字段都在一個卡片區域內。
卡片分組布局（高復雜）
卡片分組布局一般用來處理高復雜類型表單。當業務中希望頁面承載眾多表單字段時，可將信息相關性弱的字段拆分為多個部分，并通過多個卡片分組承載不同類型字段，每個卡片都需有個卡片類別標題。
寫在最后
本篇文章從分析表單在產品中為何如此的重要，總結了在日常工作中設計師常常遇到的表單類型和布局，設計師可通過文章中的建議和案例進而合理的選擇并靈活應用。以及在實際的業務應用場景中設計師如何規避和注意一些設計細節進而提升表單的體驗。文章通過一些案例進行分析，希望大家能夠通過此篇文章更多的是受到啟發（而不是限制），能夠在日常工作中靈活應用并舉一反三。這里需要強調的是作為產品設計師不論是表單設計還是全局的頁面設計，都需要有理解業務本質的能力和全局的業務思考能力，不然常常會被稱之為“喂，那個畫圖的設計”。
文章來源：tob.design