2020-12-4 ui設(shè)計分享達(dá)人
結(jié)合理論落地項(xiàng)目功能，從邏輯層面思考問題。
節(jié)前有一位讀者問了一個關(guān)于單選與復(fù)選框樣式選擇的問題，大概是：
看到很多單選與多選的設(shè)計形式，多種多樣，以前看到「圓點(diǎn)+圓圈」就知道是單選，但是為什么現(xiàn)在單選與多選的設(shè)計樣式五花八門，都沒有遵守前面這種規(guī)范呢？這些組件的樣式到底該如何確定呢？為什么會有一種模糊不清，不知道如何使用的情況？
我發(fā)現(xiàn)許多人都有一個習(xí)慣，就是喜歡把某個具象的內(nèi)容抽象化，把某個具體的問題概念化。
比如認(rèn)為單選就應(yīng)該是「圓圈+圓點(diǎn)」的形式，但似乎從來也沒有任何明文規(guī)定單選就必須是這樣的形式，只不過大家看得多了，就習(xí)慣認(rèn)為是這樣，覺得就是這樣規(guī)定的，但其實(shí)并沒有過這樣的規(guī)則。
要知道，樣式常常根據(jù)功能在變化。比如功能優(yōu)化了，樣式也需要進(jìn)行修飾，并不是說這里有一個單選操作，就必須是「圓圈+圓點(diǎn)」的形式給用戶選擇。無論是在電腦還是手機(jī)上，都是一樣的道理。
這樣去處理問題，常常會把實(shí)際的業(yè)務(wù)問題給處理沒了，最后變成控件選擇的問題，而不是功能本身的問題。
比如普通的彈框，也是一種單選狀態(tài)，為什么不也改成下圖右邊這樣的呢？不就是操作路徑長，點(diǎn)擊起來麻煩，多此一舉，而且也不好看么？
即便真的在某個場景下，非得使用上圖右邊的單選形式，那么把樣式改成下圖這樣，又有何不可呢？
只不過常規(guī)的「圓圈+圓點(diǎn)」被使用得多了，大家形成了共識而已，但并不代表它就是一種標(biāo)準(zhǔn)。
如果有一個規(guī)則規(guī)定說，單選必須是「圓點(diǎn)+圓圈」，那么各位目前所設(shè)計的絕大部分組件都將不能使用，包括各類菜單或開關(guān)。比如下圖這樣的 action sheet 就不應(yīng)該存在，而它的出現(xiàn)也是因?yàn)楣δ軐傩?、設(shè)備遷移、操作形式等內(nèi)容的演化所呈現(xiàn)的結(jié)果。
這就是大家在處理設(shè)計問題時，習(xí)慣做一種概括，希望能復(fù)用于絕大多數(shù)場景而導(dǎo)致的錯誤情況，沒有落實(shí)具體問題具體分析的原則。
包括這位讀者的問題，也是希望能夠明確單選與復(fù)選樣式的選擇問題，以便往后能夠更有條理的使用。但可惜并不是這樣，從上述我舉的控件例子可以看出，單選形式早就已經(jīng)變了模樣，而多數(shù)人并沒有注意到，還在認(rèn)為單選與多選就應(yīng)該是圓圈與方框的形式。
設(shè)計工具/方法論，確實(shí)是有部分指導(dǎo)作用，但不能作為絕對性或權(quán)威性的內(nèi)容來吸收，應(yīng)該辯證地去看。
而之所以在移動端延伸出許多自定義組件（形式并沒有遵循所謂的市場常見規(guī)范），正是因?yàn)闃I(yè)務(wù)與功能的多樣性導(dǎo)致的結(jié)果。
樣式的選擇不單單是看到的那部分，它還可以任意變化地處理，無論是單選或者是多選，不該被樣式套牢了。而它的決定因素應(yīng)該是內(nèi)容。
比如，iOS 鬧鐘的鈴聲選擇，有許多可選項(xiàng)。
但是因?yàn)閮?nèi)容的明確性，大家都知道，鬧鈴只能選擇一種，不會同時有 2 個鈴聲響起來（當(dāng)然也可以這么做），所以即便鬧鈴的單選形式再如何變化，大家也都知道它是單選的，這就是功能決定了操作形式的例子。
類似于，再如何變化選擇樣式，無論是圓圈、方框，或只有勾，甚至是其他情況，大家也都知道它就是單選。
而之所以用勾或圓點(diǎn)表示被選中狀態(tài)，只不過是人的一種正常認(rèn)知意識，即使改成三角形，只要能說清楚是被選中狀態(tài)，那也不是不行，只不過三角形沒有勾來得清晰罷了，而并不是因?yàn)橛惺裁刺厥夂x。
所以只要梳理出符合自己產(chǎn)品的「單多選」樣式，形成規(guī)范即可。一些人會感到模糊不清的原因是它本來就沒有所謂的標(biāo)準(zhǔn)，又何來的清晰呢？
寫到這，想到之前有讀者問：什么時候該遵循設(shè)計規(guī)范，什么時候不該？
要知道，設(shè)計規(guī)范本身就是基于某個具體產(chǎn)品內(nèi)容所構(gòu)建的一個整合標(biāo)準(zhǔn)，為了規(guī)范化存在共性的功能形式。而對于共性的判斷也應(yīng)該是從功能來定義的，比如返回都在左上角類似的，但是一定么？
單拎出來說什么時候該遵循，什么時候不該遵循，是很概念化的一個問題，不可能存在一個具體話術(shù)標(biāo)準(zhǔn)，說什么時候應(yīng)該，什么時候不應(yīng)該的。
如果我回答，符合規(guī)范中已有的形式的，就遵循，不符合的就不遵循。那就是一句典型的廢話了。但除此之外，我也就不知道如何解答了，除非你把規(guī)范和具體問題發(fā)給我，我可以跟你一起討論討論。
寫這篇文章的時候，看到一位朋友發(fā)的信息：
為什么手機(jī)刷新都喜歡下拉？因?yàn)樯窠?jīng)科學(xué)研究表明，這個動作，更容易讓人產(chǎn)生對不確定性和驚喜的期待，原理和賭場的老虎機(jī)類似。
很多人都會習(xí)慣性給一些操作或交互形式做類似這樣的定義。
但這么定義是不對的，因?yàn)檫@相當(dāng)于前面說的，把業(yè)務(wù)給解釋沒了，成了形式上的討論。而為什么會使用下拉、以及下拉會有什么情況，包括它所解決的問題，都沒有任何的分析。
比如，下拉之所以讓人上癮，并不是因?yàn)椤杆⑿隆贡旧?。下拉只是一種交互行為，它的出現(xiàn)也只是為了解決早期刷新按鈕占據(jù)屏幕空間的問題，希望通過下拉進(jìn)行刷新，以隱藏掉屏幕上的刷新按鈕，給屏幕留出更多可用空間。
而采用下拉是因?yàn)樗先说闹庇X —— 往下拉能看到更多新的內(nèi)容。
但是人之所以會對下拉上癮，并不是因?yàn)橄吕@個行為，而是因?yàn)橄吕芸吹礁嘈畔?。下拉本身只是解決了屏幕空間的問題，而人其實(shí)是對內(nèi)容上癮。
比如我在騰訊新聞里看 NBA 的資訊，通常只會直接上滑，看下面的內(nèi)容，看完了就關(guān)了，不會進(jìn)行下拉刷新。
因?yàn)樵隍v訊新聞里，下拉刷新的新聞并不是的內(nèi)容，更多是今天或今天之前的信息，不刷新反而是剛剛更新的資訊，那么下拉刷新雖然也是刷新，但是刷新出來的內(nèi)容是舊的，也并不吸引我，反而成了我要避免的操作，因?yàn)橹灰幌吕?，的資訊就會被舊的資訊擠掉，要刷掉進(jìn)程重新打開 App 才會重新再顯示的。
所以就不能簡單的定義說「下拉刷新是一個容易讓人上癮的操作」，而是要關(guān)注內(nèi)容，如果刷新的信息都是舊的，或者是用戶沒興趣的，那即便刷新了，也不會引起用戶的注意，也更不可能讓用戶上癮了。
讀者：
呆呆，這個圖的卡片列表里，標(biāo)題用省略號合適嗎？
（因?yàn)樵瓐D涉及讀者項(xiàng)目隱私，所以重畫了個草圖。）
又是一個沒有業(yè)務(wù)背景的問題。不過這個問題比較簡單，可以展開來說一下。
通常，我們會在各類產(chǎn)品里面見到諸如「標(biāo)題超出部分用省略號顯示」這樣的設(shè)計，譬如上面這圖。
于是，許多人在自家產(chǎn)品的設(shè)計過程中，遇到此類情況，被開發(fā)問到時，也會搪塞一句：文案要是超出就「…」顯示吧。
大多數(shù)遇到這種情況的，都是因?yàn)橹皼]考慮好，才臨時想了這個解決辦法。
而很多時候，一些產(chǎn)品之所以用「…」顯示，并不是因?yàn)閱渭兊匚陌敢绯?，可能是專門設(shè)計過的。
所以，如果簡單地認(rèn)為「…」就是解決溢出而使用的方法，那就有問題了。
下面舉幾個例子。
有些產(chǎn)品，我們幾乎看不到列表視圖里的標(biāo)題是有省略號的。
因?yàn)檫@類產(chǎn)品的目的就是讓用戶讀到完整的標(biāo)題信息，對眼前的內(nèi)容好做判斷，從而考慮是否點(diǎn)進(jìn)去看詳情。
所以在設(shè)定的時候，界面中標(biāo)題字?jǐn)?shù)的規(guī)定，與界面樣式就已經(jīng)提前規(guī)劃好了，可能在后臺設(shè)置就限定死字?jǐn)?shù)，要求運(yùn)營人員上新時要統(tǒng)一界面的展示形式。
這種情況下，一般就不會再有省略號的問題，譬如一些知識付費(fèi)類產(chǎn)品。
比較典型的還有 TED 演講視頻的標(biāo)題，在《設(shè)計體系》這本書里專門提到了這個案例。
對于 TED 來說，演講標(biāo)題的信息優(yōu)先級是最高的，所以他們寧可保留所有標(biāo)題文案，也不對文案做截斷用「…」顯示。
因?yàn)閷?biāo)題做截斷是很容易的，而難的是把一個演講主題提煉成一句簡短句子，所以他們?yōu)榱苏故靖逦臉?biāo)題，寧可在界面上保留長標(biāo)題，甚至為長標(biāo)題的顯示而專門設(shè)計相符合的展示形式。
反過來，他們也因?yàn)檫@一點(diǎn)而確定了界面上標(biāo)題字?jǐn)?shù)的上限，確保文案不會超過界面顯示的最大臨界值。
包括一些資訊類產(chǎn)品，在標(biāo)題上也會做限制，以滿足最大化呈現(xiàn)且不使用省略號。意思是：假設(shè)界面上文案范圍定了 30 個字符，那么配置的時候就必須 30 個字符以內(nèi)把內(nèi)容表達(dá)清楚，且必須完全顯示在界面上。
所以經(jīng)?？吹揭恍?UGC 產(chǎn)品之所以會限制標(biāo)題字?jǐn)?shù)，原因除了常見的標(biāo)題不能過長之外，還有一點(diǎn)是為了在列表頁就能顯示完整。
各位在設(shè)計這類產(chǎn)品功能時，也要注意到這一點(diǎn)，而不是隨意說一個「字符不能超過 50 吧」。
而有些產(chǎn)品的內(nèi)容列表，之所以頻繁使用省略號，它的目的是為了引導(dǎo)用戶點(diǎn)擊用的。
這類形式一般出現(xiàn)在營銷號發(fā)的文章里，多是營銷人員自己為了文章點(diǎn)擊率而做的。很少會有一款產(chǎn)品的所有內(nèi)容都是這樣的，除非是一些內(nèi)容產(chǎn)品，運(yùn)營方是企業(yè)自己，為了讓產(chǎn)品上的內(nèi)容有更多人點(diǎn)擊而這樣去設(shè)計，當(dāng)中可能涵蓋了廣告，以此賺取廣告費(fèi)。
不過這類內(nèi)容的設(shè)計已經(jīng)讓用戶開始反感，所以如果不是特殊情況，最好少這樣去做。
當(dāng)然，還有同類型的，一般出現(xiàn)在頁面面積小且需要展示更多信息的集合類視圖，比如：
這種形式的設(shè)計，就是因?yàn)轫撁嫔舷胝故镜男畔⑻?，以至于通過這類合集來展示某個模塊里的內(nèi)容，營造出一種很豐富的感覺。
也就是利用「…」引導(dǎo)用戶點(diǎn)擊，表示信息沒有展示全，如果要看，就點(diǎn)開詳情，進(jìn)二級頁面。
還有一些產(chǎn)品的省略號，純粹就是大家理解的，溢出就省略號顯示。
比如同樣是資訊或內(nèi)容類，以文字為主的產(chǎn)品，雖然標(biāo)題超出范圍用了省略號，但用戶基本也已經(jīng)知道是什么內(nèi)容（上面那個集合類視圖也是一種），且還有摘要引讀。
比如下圖：
這種標(biāo)題字符限制在了兩行以內(nèi)，多余字符用「…」展示，基本上已經(jīng)是一句完整的話，能讓人大致了解這條信息的意思。并且還有部分摘要，已經(jīng)足夠用戶判斷是否對它有興趣，如果沒興趣，直接刷走也無所謂。
包括一些電商類產(chǎn)品，用戶多以商品圖片為主要決策因素，商品標(biāo)題作為輔助信息，優(yōu)先級不高，所以標(biāo)題溢出是否省略號顯示也無所謂。
這其中有一個特殊情況，就是有些產(chǎn)品的標(biāo)題即不展示全，同時又沒有省略號，比如淘寶的商品搜索結(jié)果頁面。
因?yàn)檫@類列表實(shí)質(zhì)是一個產(chǎn)品賣點(diǎn)集合的濃縮詞，不是完整的一句話，多余字符展示或者不展示，都不會有太大影響，所以也不重要。
當(dāng)中我比較反感的還要數(shù)農(nóng)藥了。
好友邀請的列表視圖里，常?？床蝗欠Q，因?yàn)楹糜褧杏螒蜿欠Q，微信備注會展示在游戲昵稱后面，以至于要點(diǎn)到游戲關(guān)系里先看全昵稱，再到匹配界面邀請好友。
既然已經(jīng)區(qū)分了微信好友與游戲好友，為什么昵稱上面不也加以區(qū)分呢？
當(dāng)然，經(jīng)常玩的好友可能沒這個必要，畢竟頭像或昵稱都可以很快識別出來，但是偶爾一起玩的好友通過這樣的識別方式就比較難了。
這里就是簡單提一句。
通過上面提到的一些例子，以及不同場景下標(biāo)題省略號的處理方式，相信大家對這塊的理解會比之前更深。
同樣，對于開篇讀者提到的問題，更符合的情況可能類似于知乎這種，有完整句子，所以標(biāo)題是否省略號處理也就沒太大影響。
但具體的還是要結(jié)合業(yè)務(wù)詳情仔細(xì)考量。
而標(biāo)題內(nèi)容的展示是否要用省略號處理，優(yōu)先要看這條信息的業(yè)務(wù)權(quán)重，以及是否會影響用戶決策。
所以各位在設(shè)計這類內(nèi)容標(biāo)題是否要用「…」顯示時，也要注意判斷自己的產(chǎn)品特性符合哪種類型，而不是隨意一句話，說「超出就省略號顯示好了」。
最近收到兩個問題，正好都與輸入框有關(guān)：一個是怎么判斷輸入框要不要放置清空按鈕；另一個是輸入框超過限制后，是禁止用戶繼續(xù)輸入，還是允許超出但會警告提示。
在一定程度上，這兩個問題的分析邏輯是類似的，所以放到一起聊正合適。
先看第一個問題：怎么判斷輸入框里要不要放置清空按鈕？
原問題是這樣的：
呆呆，我最近在優(yōu)化公司的產(chǎn)品，遇到一個問題，就是 PM 想在聊天輸入框里加一個「清除按鈕」，可我覺得不太合適，但是說不出原因，只能說沒見過在聊天框里加清空按鈕的。這個問題要怎么判斷呢？
我們一般會在搜索、手機(jī)號輸入框里看到類似的清空按鈕，比如輸錯了就點(diǎn)一下，清空后再重新輸入。但是很少會在聊天框里看到清空按鈕，為什么呢？
主要是「時效性」…算了，這種概念詞用多了，發(fā)現(xiàn)現(xiàn)在人都不會講話了。說白話就是「要快」。
無論在登錄注冊還是搜索的場景下，除了內(nèi)容本身之外，最注重的就是效率。
譬如有個數(shù)據(jù)大概是說，用戶登錄注冊花的時間超過某個范圍，轉(zhuǎn)化率就會對應(yīng)逐步降低。而率，就是讓用戶能快速登錄注冊賬號，使用產(chǎn)品功能。所以設(shè)計師們會在登錄注冊的操作流程里抓住可提率的每個細(xì)節(jié)，輸入框使用效率就是其中之一。
搜索也是一樣，當(dāng)用戶有明確目的使用搜索框時，關(guān)鍵詞就是用戶當(dāng)下最關(guān)注的信息，如果輸錯，再一個個刪除，顯得麻煩，所以清空按鈕能在這里提高用戶的操作效率，甚至 iOS 的搜索組件也會自帶一個清空按鈕。如果是電商產(chǎn)品，率是能間接提高成交率的。
這里的輸錯，也有兩層意思，一個是用戶在輸入過程中發(fā)現(xiàn)錯字，比如登錄注冊時，發(fā)現(xiàn)手機(jī)號輸錯了，一個個刪除反而沒清空重新輸入來得快，因?yàn)閯h了之后，號碼要重新背一遍，具體到某個數(shù)字，然后接著輸，特麻煩。
或者搜索內(nèi)容時，發(fā)現(xiàn)有錯別字，刪除某個字再重新輸入，反而沒有清空重新輸入來得快，畢竟輸入法有串聯(lián)關(guān)鍵詞組的功能。
另一個是反饋的結(jié)果不符合用戶的心理預(yù)期。比如輸入手機(jī)號已被注冊，或者搜索結(jié)果不滿意要重新輸入關(guān)鍵詞，使用一鍵清空都是比較的。
而且輸入之后，系統(tǒng)需要給用戶呈現(xiàn)結(jié)果，如果結(jié)果不滿足用戶預(yù)期，還會存在短時間內(nèi)多次輸入與清空的情況。那么，無論是錯字還是對結(jié)果不滿意，清空按鈕都可以非常便捷地幫助用戶一鍵清除上次輸入的字段，讓用戶更快速地重新輸入新字段，從而提高用戶的操作效率。
于是，我們會把這類場景下的「清空」說成是「一鍵清空」，主要是因?yàn)榉奖?。而它的作用就是?strong style="outline:0px;margin:0px;padding:0px;">在出錯的場景下，更快捷地給用戶重置的操作。
反過來，各位可能要說：那聊天框不滿足這個條件么？
我們接著看聊天輸入框。
我們知道，聊天輸入框的內(nèi)容不是固定的，它是根據(jù)對話內(nèi)容而變化的，用戶甚至需要花時間持續(xù)輸入并糾正自己的用詞，以及話術(shù)的準(zhǔn)確度。過程中，如果輸入的內(nèi)容多，而且又是即興的，耗費(fèi)的時間與精力也是很大的，清空后也難以再恢復(fù)。
它不像登錄或搜索，固定的輸個數(shù)字串或關(guān)鍵詞，它是一段完整內(nèi)容。雖然也會有某一句話或者某個詞輸錯的情況，但是一鍵清空的操作成本太低，對應(yīng)著聊天框的高輸入成本，一鍵清空的存在與之并不相符。
于是，這里就引出了一個概念，叫做「輸入成本」與「修改成本」。
清空按鈕對應(yīng)的，就是低修改成本，因?yàn)楹唵吸c(diǎn)擊一下，就清空了。它所適用的場景就是低輸入成本的情況，也就是前面提到的登錄注冊或搜索 —— 輸入的內(nèi)容相對固定，且可能反復(fù)。
對于登錄、搜索等指向性比較明確的輸入框來說，用戶在乎的是輸入和反饋的效率高不高。一鍵清空操作能帶來效率上的提升，而且操作后帶來的損失成本是很低的。因此，一鍵清空操作在這個場景下，對用戶來說是安全且的。
但是在聊天場景下，一鍵清空作為低修改成本的作用是不適合的，因?yàn)檫@時候輸入成本比較高。
用戶在聊天輸入框內(nèi)表達(dá)清楚自己的想法是為了讓對方理解，達(dá)到交流的目的，這樣的內(nèi)容是不確定的。而且在聊天輸入出錯情況下，我們有多種操作方式讓用戶重輸，比如鍵盤快滑定位，觸摸定位錯字等，都比一鍵清空重新輸入的成本低很多，而它所謂的「便捷性」在這里意義也就不大了。
于是乎，在衡量輸入框是否需要清空按鈕時，我們首先要知道，清空按鈕是低修改成本，那么如果輸入框的輸入成本比較低時，我們就會使用清空按鈕，來提高操作效率。而當(dāng)輸入成本比較高時，一鍵清空的操作就顯得配不上這個輸入框了。所以，它在聊天框里就沒有存在的必要了。
包括其他非固定內(nèi)容的輸入框，也是一樣的道理。
接著，延伸出第二個同學(xué)的問題：輸入框超過限制是禁止用戶繼續(xù)輸入，還是允許超出但會警告提示？
相信各位讀完上面的，再看這個問題，應(yīng)該也能分析出原因了吧？邏輯跟上面的也差不多。
也看輸入成本，比如是固定內(nèi)容的手機(jī)號，我們正常會禁止多余輸入，因?yàn)檫@樣用戶更容易判斷手機(jī)號是否正確。
如果是短長文，說明用戶可能是手打字超出限制，這時候如果禁止輸入，用戶不好在輸入框里做內(nèi)容刪減或修改，也會打斷用戶的輸入流，畢竟還沒寫完就限制了，那得先刪掉前面的，再來思考后面怎么寫，會亂。而且如果是復(fù)制的，禁止輸入的話，超出部分就被截斷了，也要先刪減，再繼續(xù)復(fù)制剩余部分，非常麻煩。除非先在別處刪減到限制字?jǐn)?shù)內(nèi)，再復(fù)制過來，但這樣又增加了用戶的操作成本。
如果允許輸入但警告提醒，那么用戶就可以根據(jù)自己已經(jīng)輸入完的內(nèi)容做刪減修改。
所以對于這個問題，我們從這個視角出發(fā)，也能了解一二，就是通過適用場景與輸入成本來分析。
當(dāng)然，以上所有內(nèi)容更偏向于通用性說明，針對具體業(yè)務(wù)還需要具體分析。
1、從單復(fù)選組件反思功能設(shè)計問題
2、標(biāo)題文案溢出使用「…」合理嗎？
3、怎么判斷輸入框里放不放清空按鈕？
文章來源：站酷 作者：呆總、
藍(lán)藍(lán)設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.wnxcall.com