編者按：其實網(wǎng)頁或者App中的導航（Navigation）這個概念遠不止我們熟悉的導航欄，而是一個更加廣的交互概念：引導用戶和產(chǎn)品進行有效的交互，實現(xiàn)用戶的目標。本文將詳細地介紹界面的導航設計。
一個網(wǎng)頁或App產(chǎn)品要想有很好的可用性（usability），需要做好的最基本的一點是導航的設計或者說引導用戶的設計。如果用戶在使用一個網(wǎng)站或者App的時候找不到自己的處在什么位置或者該怎么去到想要的頁面，那么視覺效果再怎么有創(chuàng)意或者抓人眼球都無法彌補產(chǎn)品的缺陷。無論你的產(chǎn)品想滿足用戶什么需求，讓用戶知道產(chǎn)品當下的狀態(tài)和每一步操作之后的結果是對用戶最基本的尊重。
首先，讓我們弄清楚導航這個概念。最基本的含義就是在我們的現(xiàn)實世界中，當我們從一個地方到另一個地方，需要一些引導和指示。英文中Navigation這個詞來源于拉丁文，原意就是：操縱船只在海上航行。所以導航就是能夠幫助我們到達目的地的行為。導航的其他意思都是建立在這個原意的基礎上。
所以回到UX／UI設計上，導航毫無疑問是可用性的一個要點。它可以定義為一系列引導用戶成功地與產(chǎn)品互動并且實現(xiàn)他們目標的動作組合或者技巧組合。 用戶帶著他們的期望和目標來使用你的網(wǎng)站或者產(chǎn)品，作為設計師的你需要給他們提供實現(xiàn)他們目標的最好操作流程。因此當你的導航設計得非常高效，用戶體驗能得到極大的提升。
在你剛開始設計你的界面時，就要思考怎么設計一個有效的無縫銜接的導航。通過一些可交互的元素，比如按鈕（buttons），開關（switches），鏈接（links），標簽（tabs），條（bas），菜單（menus），區(qū)域（fields），讓用戶在不同的界面之間進行切換。
我們工作室的設計思路是，在界面設計的早期就全面地思考導航的設計，包括界面的布局，頁面間如何切換，導航元素的放置和具體功能。并且通過低保真原型來進行驗證，保證用戶能清楚地理解所有重要的操作。如果跳過這一步，設計將有巨大的風險，其他事情有可能到頭來都白干了。所以無論，對用戶還是客戶還是設計團隊來講，做好這最基礎的部分是非常有好處的。
菜單是我們最熟悉的具備導航功能的元素，它向用戶展示了界面的所有重要選項?；旧?，它可以是用動詞命名的一系列指令，用戶可以用它來指示系統(tǒng)做出動作，像保存，刪除等；它也可以是一個用名詞命名的目錄，用來代表不同內容的集合。
在界面設計中菜單可以放在不同的位置（側邊菜單，頂部菜單，底部菜單等），擁有不同的交互和視覺形式（下拉菜單，上拉菜單，滑動菜單等）。要想設計好菜單的位置、交互和視覺形式，設計師需要經(jīng)過全面的用戶調查，包括目標用戶的預期和要求、接受能力和使用情境。好的菜單設計能讓用戶更快地實現(xiàn)他們的目標，為用戶體驗打下堅實的基礎。
△ 作者：Tubik
這是一個博客APP的界面設計，采用了側邊菜單以及目錄的形式，文字直接說明內容，再加上圖標來做為輔助的視覺說明。
△ 作者：Ludmila Shevchenko
這個UI概念設計的例子很好的運用了顏色作為標記，這是一種很有效的導航技巧：每個分類的背景色使用了和目錄相同的的顏色，這樣目錄和內容有著非常強的相關性，用戶能自然地將他們聯(lián)系起來。
CTA是用戶行為召喚的簡稱（call to action）。CTA簡單來說就是指設計師通過設計，刺激用戶去做出一些行動。相應的，CTA元素就是指那些能刺激用戶做出行動的交互元素。典型的CTA元素是按鈕，標簽或者鏈接。
不管在什么界面，CTA元素都是高效的交互行為的核心，極大的關系到產(chǎn)品的可用性和導航有效性。如果CTA元素的設計不到位的話，用戶會產(chǎn)生困惑并且得費勁地去嘗試。產(chǎn)品的轉化率和用戶體驗都會大打折扣。這就是為什么CTA元素特別值得注意。無論什么樣的界面，它都必須是最矚目的元素之一，用來直接地告訴用戶怎么用這個產(chǎn)品。
△ 作者：Eugene Cameel
一些CTA元素直接用圖標形式而沒有任何文字說明，但只適用于大家都熟知其含義的圖標，比如聽筒圖標和信封圖標。上圖這個例子中，這個聽筒圖標就是這個界面中一個焦點，是一個典型的CTA元素，引導用戶快速地實現(xiàn)他們的目標。不需要任何文字說明，用戶也能懂點擊這個圖標的結果。
但是，如果一個圖標的含義不是那么明顯或者可能造成誤解，最好還是加上文字說明。
△ 作者：Tania Bashkatova
上面這個例子是一個關于制作海鮮的網(wǎng)站的著陸頁（Landing page）。頁面的標題let’s cook還有食材照片是一個CTA，但不是一個可交互的CTA?？山换サ腃TA是下面這個紅色按鈕，用戶點擊這個按鈕能看到更多關于不同主題和菜譜的信息。 抓人眼球的顏色強調了頁面的視覺層級關系，把用戶的注意力拉到關鍵的交互區(qū)域中。
條（Bar）指的是界面中一組用戶可以點擊的元素，用來快速與產(chǎn)品進行互動，或者還能讓用戶知道事件的進程。
標簽條（Bar）
最基本的條是標簽條（Tab bars），常出現(xiàn)在APP界面的底部，讓用戶能在APP的不同模塊間快速切換。
△ 作者：Sergey Valiukh
載入條（Loading bar）
載入條是用來告知某個動作的進展，用戶可以通過時間、百分比或者其他信息了解整個過程。
△ 作者：Sergey Valiukh
進度條（Progress bar）
給用戶提供反饋，讓他們了解事件的進度，比如說計劃的事情完成了多少。
△ 作者：Valentyn Khenkin
按鈕應該是用得最多的元素了。按鈕能讓用戶在對系統(tǒng)發(fā)出指令后得到恰當?shù)姆答仭Ｓ脩敉ㄟ^按鈕對系統(tǒng)下命令，跟系統(tǒng)進行交互從而實現(xiàn)他們某個目標，比如發(fā)送郵件，買一個東西，下載文件，播放音樂等等這樣的指令。按鈕之所以那么的常用和對用戶那么友好，是因為按鈕很好地模仿了人和真實世界里跟物品的交互。
現(xiàn)如今的UI按鈕有不計其數(shù)的設計樣式，能滿足很多的設計需求。按鈕典型的用途是表明這個地方是可點擊，因此需要具有非常高的視覺識別，有著特定的形狀還有文字說明它能實現(xiàn)什么動作。設計師通常需要花不少時間好好考慮怎么讓按鈕很好地融合界面的風格，同時又能在視覺上跳脫出來。
△ 作者：Ernest Asanov
以下是在APP和網(wǎng)頁設計中常用的幾種具備附加功能的按鈕。
漢堡按鈕
漢堡按鈕隱藏著一個菜單。當用戶點擊他們的時候，能把菜單調出來。有這個名字是因為它是由三條水平線組成的，看起來就像是漢堡的形式。它是一個典型的交互元素，也是頗具爭議的元素。
大多數(shù)用戶知道點擊這個按鈕能展開一個菜單，所以不需要額外的說明。漢堡菜單極大地節(jié)省了界面的空間，能讓界面看起來更簡潔，也為其他重要的界面元素騰出了必要的空間。它同時非常適合響應式設計，通過隱藏菜單讓整個設計更統(tǒng)一，界面能在不同設備間保持一致。盡管它因為一些缺點而飽受爭議，但因為這極大的好處，它目前仍然被廣泛的使用。關于這個元素的主要詬病是，對于一些對界面不太熟悉的用戶來說，這個比較抽象的設計元素可能會讓他們產(chǎn)生困惑。所以，在決定使用漢堡菜單前，應該調查一下目標用戶的接受程度和他們的需求。
△ 作者：Ernest Asanov
上圖這個概念設計就是用了漢堡按鈕把菜單隱藏了起來，從而實現(xiàn)一個簡潔的頁面布局和視覺效果。
加號按鈕（Plus button）
一般通過這個按鈕，用戶可以實現(xiàn)添加某個內容的動作，比如添加新的聯(lián)系人，狀態(tài)，筆記，位置等所有用戶在產(chǎn)品里能做的基本動作。有時候，點擊這個按鈕會出現(xiàn)新的窗口。有時候還會出現(xiàn)一些選項供用戶進行選擇添加什么內容，這取決于是什么產(chǎn)品。
△ 作者：Sergey Valiukh
上面這個例子就是用戶在點擊加號按鈕后出現(xiàn)了可以選擇添加的內容（圖片，視頻，文字），在選擇了之后才會彈出添加內容的窗口。盡管這個操作可能增加一些額外的交互動作，但因為給予了用戶選擇空間，所以還是對用戶很友好的一種設計。
分享按鈕（Share Button）
分享按鈕顧名思義就是能讓用戶把內容分享到他們的社交平臺賬號上。大多數(shù)情況下，這個按鈕都是用社交平臺的Logo作為視覺形象，這樣非常易于識別和認知。
同樣，這也是一個用戶非常好理解的元素，在界面中用得也非常多。因為它很好地模仿了現(xiàn)實世界里人們熟悉的開關概念。關于這個元素的設計，特別要注意的是開和關的狀態(tài)在視覺上要差別非常明顯。這樣能避免用戶花時間去研究怎樣是開怎樣是關。很多種的形式對比或者切換動畫都可以解決這個問題，從而設計出很好的用戶體驗。
△ 來源：Tubikstudio
這個案例是來自一款鬧鐘應用Toonie。動畫效果讓交互變得更流暢和自然，同時整個控件顏色的改變和滑動元素形態(tài)的變化讓用戶能夠輕易地識別出開關的狀態(tài)。如果你想了解整個App的案例研究，可以到來源查看。
也很好理解，就是讓用戶在一些選項里選出目標選項。通常包含一個可滑動的列表，上面是一列數(shù)值，比如小時，分鐘，日期，度量，幣種等等。通過滑動列表，用戶可以選定想要的數(shù)值。這個元素廣泛地應用在有時間設定這個功能的界面設計上。
△ 來源：Tubikstudio
復選框是可以用來同時標記多個特定的內容。同樣的，也是借用了我們在現(xiàn)實世界里熟悉的概念。我們在考試的時候，或者填調查問卷的時候會在選項前的小方框里涂上顏色作為選中的標記。和開關一樣，復選框同樣用得很多，主要在設置頁面設計里。不過，復選框還有另外一個用得比較多的地方，那就是含有任務管理，待辦事項，時間記錄等類似功能的App或者網(wǎng)頁。
△ 作者：Tubik
上面這個是一個待辦事項App的概念設計。用戶點擊復選框后，表示這個內容已經(jīng)完成。字體變粗的同時顏色發(fā)生了改變，這樣就非常明顯地把這個已完成的任務和其他未完成的任務區(qū)分開來。
界面的導航（Navigation）是用戶體驗設計的核心之一。毫無疑問，如果你看不到路, 你就去不了你的目的地。用戶現(xiàn)在正面對著越來越多的網(wǎng)站和APP產(chǎn)品。越來越多的選擇會讓用戶期望這些產(chǎn)品具備符合他們使用習慣的導航設計。
圖標可以定義為一個象征著某個概念或物體的視覺形象，有著加強與受眾溝通的目的。會和文字結合一起使用，將想要傳達給受眾的信息表現(xiàn)出來。在界面設計中，圖標通常是象形符號或表意文字，對可用性和成功的人機交互有重要意義 。
毫無疑問，圖標的其中一個重要作用是可以有效地替代文字描述。因為比起文字，用戶對圖片的理解速度更快，所以這個特點能極大提升用戶體驗，增強產(chǎn)品的導航和對用戶的引導。但是，需要注意，即使是輕微的歧義或者誤解都會導致糟糕的用戶體驗。所以在設計圖標的時候要做必要的測試，根據(jù)目標用戶平衡好文字和圖標的使用。最有效的方式是同時使用圖標和文字，這樣大部分用戶都不會有問題。電商APP或者網(wǎng)站最常使用這樣的形式來給用戶足夠的信息，讓他們能輕松快速地瀏覽。
△ 作者：Tubik
根據(jù)圖標的功能，我們可以將它們分為一下幾類：
交互式圖標（interactive icons）
這類圖標具備交互功能。他們是可點擊的，能回應用戶的要求，觸發(fā)圖標代表的動作。這種圖標告知用戶按鈕、控件或者其他界面交互元素的功能或者特點。在大多數(shù)情況下，這類圖標的意義明確，不需要文字輔助說明。
△ Tab Bar
△ 菜單概念設計
說明性圖標（clarifying icons）
起到說明作用的圖標，設計師用它來表示某一個特點或者內容的種類。它有時候不屬于界面布局的元素或者并不具備直接的交互功能。經(jīng)常和文字結合使用。
△ 作者：Tubik
△ 作者：Ernest Asanov
娛樂性和裝飾性圖標（entertaining and decorative icons）
這類圖標注重抓人眼球的視覺效果并非功能，通常用在節(jié)日或者特別款的場景。他們能有效地吸引用戶的注意力，增強視覺沖擊力。
復活節(jié)和春天主題的圖標：
△ 圖片作者：Arthur Avakyan
APP圖標（app icons）
在各個平臺上可交互的品牌標志，展示品牌和產(chǎn)品的形象。最常見的就是我們手機界面上每一個App的圖標，上面通常是品牌和產(chǎn)品的Logo。
△ 作者：Arthur Avakyan
網(wǎng)頁圖標（favicons）
就是我們經(jīng)常在網(wǎng)址欄或者書簽里看到的URL前面的那個小圖標，也是代表著產(chǎn)品或者品牌的形象。能讓用戶在瀏覽網(wǎng)頁時給他們快速的視覺提示。
搜索區(qū)域又常常被稱作搜索框（search box）或者搜索條（search bar），代表著用戶可以在這個區(qū)域內輸入想要搜索的內容。它是那些有著很多內容的網(wǎng)站或APP的核心導航元素，像博客，電商，新聞等產(chǎn)品。設計得好的搜索框能讓用戶輕松地找到想要的信息。因為它能幫助用戶省去很多時間和精力，所以它是一個對用戶特別友好的界面元素。
它的設計形式有很多種，可以是標簽的形態(tài)，也可以是引導輸入的一條線或者簡單的一個搜索圖標。大多數(shù)情況下搜索框的圖標是一個放大鏡的樣式?；旧纤械挠脩舳级眠@個圖標的含義，所以能實現(xiàn)非常直觀的導航設計。想要在這個圖標上做文章的話，要好好測試一下，因為改得不好的話會嚴重影響交互和界面的可用性。搜索框還可以加入提供候選項的下拉菜單或者自動填補內容的功能。
△ 作者：Ernest Asanov
另外需要注意的一點是搜索框控件在界面中的位置。在網(wǎng)頁設計中，搜索框經(jīng)常出現(xiàn)在網(wǎng)頁的頂部。這是一個很恰當?shù)脑O計，因為通常網(wǎng)頁的頂部區(qū)域具有很高的可見性，用戶打開網(wǎng)頁就看到了，不需要再花時間去找到這個控件。舉個反面例子，如果一個電商網(wǎng)站因為搜索框的設計有問題，導致用戶沒辦法快速方便地找到想買的東西，網(wǎng)站銷售表現(xiàn)會受到極大的影響。因為現(xiàn)在很多網(wǎng)站都將搜索框放在網(wǎng)頁的頂部，所以用戶也養(yǎng)成了在那里找到搜索框的習慣。
至于App界面的話，要視具體情況而定，設計師可能面臨更多的限制。如果是一個有著大量內容的APP，而且搜索是核心功能之一的話，那么一般放在一個顯眼的標簽條（tab bar）上。如果搜索并不是核心功能，那么可以把它藏到菜單里或者只在需要的用到的地方顯示或者時刻顯示出來。
△ 作者：Sergey Valiukh
標簽是一個標有關鍵詞的可交互元素。標簽其實是給用戶提供快速通道的元數(shù)據(jù)，用戶可以通過它快速導航到與關鍵詞相關的所有內容。除了網(wǎng)頁或者App本身帶有的標簽，在很多情況下用戶也可以自己創(chuàng)建標簽。
△ 作者：Design4users
標簽這個界面元素被廣泛地應用在用戶原創(chuàng)內容平臺（UGC）的界面設計里。當用戶上傳圖片、狀態(tài)到社交網(wǎng)絡的時候，可以加上關鍵詞作為標簽。上圖就展示博客網(wǎng)站Design4Users運用了標簽來加強網(wǎng)站的內容導航。通過點擊某個標簽，能切換到帶著這個標簽的所有內容的頁面。標簽是友好的搜索引擎優(yōu)化（SEO-friendly）技巧，能提高用戶搜索內容的成功率。
△ 作者：Unsplash
再舉一個例子，上圖是圖片素材網(wǎng)站Unsplash的界面。當用戶想要下載圖片時，可以輸入描述圖片的關鍵詞作為標簽。通過這樣的形式幫助用戶有效地找到想要的圖片。我們還可以注意到，輸入框內加入了引導用戶進行操作的說明，這樣更進一步地提高了產(chǎn)品的可用性。設計的細節(jié)真的很重要?？偠灾?，標簽是一種用戶可以自行創(chuàng)造的導航元素，拉近了界面和目標用戶之間的距離。
全面地設計好整個界面的導航不是一件容易的事，需要一些心理學、交互模式、用戶測試的基礎知識，還需要在項目的早期思考清楚網(wǎng)站或者App的信息架構。但是做好這一點的話，能夠讓你的產(chǎn)品很好地幫助用戶解決他們的問題，給優(yōu)秀的用戶體驗打下堅實的基礎，讓他們對你的產(chǎn)品產(chǎn)生越來越大的粘性。
轉載請注明：優(yōu)設網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰(zhàn)案例復盤！
Z Yuhan：對于手機端的表格設計，本文將為你提供了一些思考方向，希望能夠帶給你啟發(fā)。
表格似乎和移動設備很難融合，強行貼上還真有些毀三觀。即便是想方設法地避免，也總會有這樣那樣的原因，而不得不同時面對它們的時候。
其實有很多方法可以優(yōu)化手機端的表格，但是可能不一定每一種都適合你遇到的情況，所以我整理了一套循序漸進的處理方法。
假設你在設計一款類似微信聊天群的功能，PM給你一張「成員信息表」，并要求你把它放在群成員管理界面上。這張表格里的信息的排列方式也許非常隨便，看起來讓人摸不著頭腦。
△ 組員信息表
首先你需要弄清楚這張表格擺出來的意義是什么。假設這張表格是為了「讓群主查看并管理成員」，那么你就能分析得出：
按照重要程度擺放各信息，并合理排序后，表格看起來就更好理解了：
△ 整理后的組員信息表
如果你的情況不允許對表格對形式進行變動，那么可能就真的要用手機端展示表格了。
在確保文字能夠看清的情況下，表格很有可能橫向展示不全，所以滑動難以避免。以下兩點可以優(yōu)化表格的滑動體驗：
這樣，復雜的表格至少能夠從表面上融入手機界面了：
再仔細看看這張表格，即便不做大的調整，還是有很多地方可以通過微調來改善體驗：
優(yōu)化后，表格看起來更簡單了：
手機的窄屏對于表格來說總不是最佳選擇，所以如果可能的話，還是避免使用這種形式。
一個人在同一時間的注意力是有限的，大多數(shù)情況并不需要像傳統(tǒng)印刷品那樣，完整列出所有信息。重新思考真實的使用場景和用戶心理，你會發(fā)現(xiàn)并不需要一次性把所有東西都扔出來。
如果你想要像微信那樣，用頭像+昵稱這種形式，也許很容易被給你表格的人反駁：
你可以篩選出相對有用的信息提供給用戶，并用更有意義的方式整理出來：
于是原本臃腫的表格可以被整合重新設計成完全不一樣的輕便形式：
本文提供了一些思考方向希望能夠帶給你啟發(fā)，以后遇到類似問題，不要老老實實地把表格原封不動地貼到手機上了。
轉載請注明：優(yōu)設網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰(zhàn)案例復盤！
滴滴出行在 iPhone X 發(fā)售前就針對其操作特性進行了界面適配，保障了 iPhone X 用戶的全面屏操作?，F(xiàn)在 iPhone X 的適配結果已經(jīng)得到了良好的用戶反饋，由此我們梳理了移動端界面 iPhone X 的適配方案，并從整個適配過程中探索到萬變不離其宗的適配方法，為后續(xù)不斷更新的多尺寸屏幕提供更好更快的適配思路。
iPhone X 是蘋果公司十周年推出的重點產(chǎn)品，無論外觀還是技術都有著革命性的創(chuàng)新。讓我們先來回顧下 iPhone X 在界面使用體驗上都有哪些操作特性。
如果你對 iPhone X 還不夠了解，可以看看這些 ：
1. 屏幕變長
因大部分設計師都用 iPhone 8 來做設計稿，所以我們用 iPhone 8 與 iPhone X 做對比。
iPhone 6、iPhone 6s、iPhone 7 與 iPhone 8 屏幕分辨率一致。
iPhone X 使用了 5.8 英寸高分辨率、大圓角顯示屏。iPhone X 與 iPhone 8 的顯示屏寬度一致都是 375pt ，高度上 iPhone X 高出 145pt，可以在垂直空間多展示約 20% 的畫面。
iPhone X 的屏幕分辨率和 iPhone 8 Plus 等相同，使用 @3x 的圖像，界面內容由手機硬件遮罩成帶圓角和傳感器（頂部齊劉海）的形狀。所以界面設計時 iPhone X 和 iPhone 8 的設計寬度可以通用 375pt，而實際 iPhone X 的屏幕像素為 375pt×812pt (1125×2436px)，且切圖使用 @3x 圖片。
喬布斯曾說，手持設備最理想的屏幕尺寸是3.5寸，這是因為單手操作時3.5寸屏幕基本能做到大拇指無障礙全覆蓋。但隨著人們對手機功能多樣化的需求，主流屏幕遠大于3.5寸。
iPhone X 是 5.8 寸，屏幕已經(jīng)超越了絕大多數(shù)用戶的拇指覆蓋范圍，這就導致左上和右下角的單手操作不夠方便。很多基于 F 型流動視線設計的 App，通常會將重要的功能入口置于左上角，在 iPhone X 上，視線優(yōu)先和拇指操作未必可以同時滿足，這就要求設計師們對操作盲區(qū)的功能進行多重考量，評估是否要針對 iPhone X 做出位置調整。
2. 異形狀態(tài)欄（齊劉海）
iPhone 8 屏幕狀態(tài)欄高 20pt，iPhone X 狀態(tài)欄高 44pt 并有齊劉海形狀遮罩。狀態(tài)欄位置顯示的信息，在 iPhone X 上受齊劉海遮罩影響，需要特殊考慮展示效果，甚至重新設計信息展示方式避讓狀態(tài)欄，以便保持各屏幕展示效果的統(tǒng)一。
蘋果官方不建議采用隱藏或遮擋狀態(tài)欄的設計，相對 iPhone 8 ，iPhone X 有更高的縱向顯示空間足夠展示更多的內容，且狀態(tài)欄顯示了對用戶有用的信息，除非隱藏狀態(tài)欄能帶來更大的收益，否則還是建議保留。
3. 增加主屏幕指示條
iPhone X 屏幕最底部設置了主屏幕指示條，用戶可從屏幕底端使用滑動手勢進入主屏幕或切換應用。這些系統(tǒng)的全局操作會優(yōu)先于App應用的操作。在設計用戶沉浸式的產(chǎn)品如視頻、游戲時，可以適當?shù)碾[藏主屏幕指示條。
主屏幕指示條下方的內容仍是可點擊操作的，但要避免在屏幕最底部設置重要操作內容，且要避免使用與指示條相沖突的操作手勢。主屏幕指示條只有黑白兩種顏色，會根據(jù)指示條底部背景自動切換。
4. 設置安全區(qū)
從 iOS 11 開始，蘋果引入了安全區(qū)域的概念。在 iPhone 8 等屏幕上，安全區(qū)域默認是除了狀態(tài)欄以外的屏幕范圍。在 iPhone X 上，安全區(qū)域默認是除去頂部狀態(tài)欄以及底部主屏幕指示條周邊的范圍。
遵照系統(tǒng)安全區(qū)的概念進行設計和開發(fā)，大多數(shù)使用系統(tǒng)標準UI元素（如導航欄、表單、內容集）的應用程序會自動適應設備的新外形，不需手動調整，這樣會大量節(jié)省開發(fā)人員的工作量。所以在這里提倡大家遵照系統(tǒng)提倡的方式進行開發(fā)布局，不僅方便 iPhone X 的適配工作，也方便后續(xù) iOS 系統(tǒng)更新以及界面元素的自動匹配。
固定在屏幕上展示的內容應始終在安全區(qū)域內，如頂導、底部tab欄等。垂直滾動的內容，如列表，圖片流，需要一直延伸到底部，也就是會在安全區(qū)之外展示，這樣才能確保提供全面屏操作體驗。
正是因為 iPhone X 有著許多操作特性，我們的設計方案必須針對 iPhone X 進行適配。以下是針對常見界面元素整理的通用適配規(guī)則。
1. 吸頂元素
對于吸頂元素的適配原則是：避讓狀態(tài)欄，內容區(qū)吸附于安全區(qū)頂部，狀態(tài)欄背景顏色根據(jù)吸頂元素進行調整。
2. 吸底元素
吸底元素的適配原則是：內容平移至安全區(qū)底部，界面背景層元素（界面背景色、背景圖片、全屏地圖等）充滿屏幕，主屏幕指示條下方區(qū)域與吸底元素顏色協(xié)調。
3. 信息流
信息流從主屏幕指示條下方穿過，撐滿屏幕顯示，滑動瀏覽信息不受影響。主屏幕指示條下方內容仍可點擊，此區(qū)域滑動手勢優(yōu)先觸發(fā)系統(tǒng)操作。信息流最底部內容要保障在安全區(qū)內。
4. 全屏元素
全屏元素多為圖片、視頻、游戲畫面、全屏地圖等信息，適配規(guī)則是：全屏元素在 iPhone X 上仍要保持充滿屏幕的狀態(tài)，要保證圖像信息比例正確不變形，并接受硬件傳感器齊劉海和圓角遮罩。
因 iPhone X 與 iPhone 8 Plus 都使用@3x圖片，所以開屏圖片不做單獨適配的話可以調取 iPhone 8 Plus 圖片裁剪使用。
5. 左右布局元素
最典型的左右布局就是抽屜導航，抽屜拉出后，如果信息卡片和主屏幕指示條交錯疊加，就會稍顯信息混亂，建議抽屜導航的寬度根據(jù)主屏幕指示條的位置進行調整，完整露出或完全遮擋指示條。
6. 居中元素
居中元素在適配中的影響較小，對話框、Toast 提示等均不需單獨適配。
以上的適配規(guī)則基本可以滿足所有場景的基礎適配需求。當然還有很多特殊場景，不需要特意保持 iPhone 8 和 iPhone X 展現(xiàn)效果的一致性，這種情況就需要單獨設計方案，不是通用規(guī)則能滿足的了。
滴滴出行針對內部產(chǎn)品做了一套適配指南，幾十頁滿滿的適配方案說明，盡可能詳盡的將普適規(guī)則與特殊規(guī)則運用場景舉例說明。設計平臺將此適配指南發(fā)放到各業(yè)務部門，由業(yè)務方產(chǎn)出自己各功能場景下的適配方案。
在此過程中我們發(fā)現(xiàn)，即使規(guī)則已經(jīng)很詳盡，Webapp、H5頁面等多場景下仍有一些不清楚如何適配，或不能通用適配規(guī)則的情況，需要設計平臺持續(xù)跟進，講解規(guī)則走查適配效果。
造成這種情況的原因大多是因為界面設計的時候沒有充分考慮其后期延展，導致多屏幕下不能保持統(tǒng)一樣式，無法通用適配規(guī)則。這讓我們開始思考如何設計界面才能包容多屏幕的展現(xiàn)。
設備屏幕在不斷更新，適配需求就是持續(xù)的無盡的，iPhone 從 iPhone 4 – iPhone 5 – iPhone 6 – iPhone X ，屏幕尺寸不斷在變化，甚至屏幕的形狀邊界也在變化，更不用說安卓系統(tǒng)各種各樣的屏幕尺寸及屏幕形狀。例如，夏普AQUOS S2。
設計界面時，如果對市面的主流屏幕挨個設計是有極其高的時間成本的，那怎么才能讓適配更從容，不必緊張的跟隨手機廠商的發(fā)售腳步？是否有提高適配效率的方法？適配可否是一勞永逸的？需要適配的元素有沒有一些共性……
帶著這些問題不斷的思考總結，我們形成了一套自己的設計理念，能夠讓適配這件事情以一抵百，萬變不離其宗，這就是「去邊界化」設計。
「去邊界化」設計，是指在設計之初把邊界限制去掉，定義好界面元素的特性及層級關系后，再套用到屏幕邊框之中。與常規(guī)設計的區(qū)別在于，讓內容成為獨立且完整的組合體，再根據(jù)設定好的變化規(guī)則組合到不同的邊界中去。這樣保障了內容的最大適用程度，且保障各屏幕展示規(guī)則的統(tǒng)一性。
目前我們最常做還是手機界面，未來VR、AR 成熟起來，我們所設計的界面就會更大，甚至會大到無形。運用「去邊界化」設計，可以讓我們更好的適應未來。
另外回到手機界面，我們完成一個設計方案后，也可以運用“去邊界化”的方式檢查界面元素是否在多屏幕適配上存在問題，減少不必要的適配工作量。
其大無外，其小無內，在界面設計上，我們也需要突破界限，精益求精，讓每一個元素都豐富而完整。
1. 定義元素特性
這里的元素特性，除了元素本身的基礎功能及操作方式外，從三個角度進行思考，延展性、吸附性、流動性。
這里我們以同倍率，不同尺寸的屏幕適配為例，省略倍率換算方便我們更簡單的了解「去邊界化」設計。
如下圖中，圖片、卡片、背景、列表、按鈕 等元素可隨著屏幕進行延展變化，而icon、文字等為固定大小不會隨著屏幕進行變化。
延展變化又可分為：等比延展、橫向延展、全部延展。
通常圖片、視頻元素使用等比延展，保障畫面比例統(tǒng)一不變形；列表、按鈕 等多采用橫向延展，信息量不變高度無需變化；卡片、背景等多根據(jù)其承載信息和屏幕背景尺寸進行調整，長寬均跟隨變化。
如下圖，button 吸附于界面（或安全區(qū)）底部，適配到其它屏幕依然保持與界面（或安全區(qū)）底部的吸附性。而下圖中的toast 提示為界面居中元素，也就是它的吸附性就是界面的中心，適配到其它屏幕仍保持這一吸附屬性。
針對流動性的元素主要是定義其容器的延展性和吸附性，流動元素本身大小不變，位置形態(tài)上跟隨容器進行變化。當然還要考慮元素過多超出容器后的顯示方案，是被截斷還是省略等等。
如下圖，文字圖片流在信息容器內進行流動展示。
2. 組織信息結構
從平面維度思考元素關系可以理解為元素間的吸附性，但界面元素不總是在同一個平面上，App 界面通常分為 背景層 、內容層 、操作層 、狀態(tài)層 ，這些層級在高度上是相互疊加的。
決定元素層級的因素主要是其表達內容的主次關系，重要而緊急元素在最上方，不重要不緊急的元素在最下方。將界面從平面維度填充為立體維度讓產(chǎn)品功能更豐富，更貼近人們真實的立體世界，也就更符合用戶的認知和操作邏輯。
無論界面的邊界如何變化，元素間的層級結構一旦定下是不會隨邊界變化而改變的。建立元素的縱向層級關系，便于在不同場景保持統(tǒng)一的元素優(yōu)先級。
在「去邊界化」設計中，除了元素自身特性（延展性、吸附性、流動性）清晰，元素間的組合層級關系必須排布合理、邏輯清晰，才能讓整個產(chǎn)品層級統(tǒng)一，多屏幕展現(xiàn)層級統(tǒng)一。
3. 元素組件化
我們有講到界面中所有的元素都不是獨立的，有時某幾個元素組合表達同一個功能，關系非常緊密，甚至可以捆綁移動，我們把這些功能密切相關的元素進行封裝，看做一個完整的大元素，這就是我們常說的組件。
組件化的特點就是詳盡每個元素的操作反饋、延展方案、顯示容器、極限情況等等場景，然后定義元素與元素之間的吸附關系，操作聯(lián)動，使其成為一個完整的操作場景。
說到組件化設計，這有一篇必看好文：《進階必讀！可能是最全面的組件化開發(fā)與設計指南》。
組件還可以根據(jù)功能需求與其它元素自由組合，使得組件可以不斷復用，大大提升設計效率，及適配效率。
組件化的意義有很多，可以方便設計元素的復用，方便開發(fā)組件的復用，減少代碼及元素冗余，方便設計方案的修改等等。橫向組件化之于「去邊界化」設計，主要是在確立了元素特性及層級關系后，以整合元素成為組件的方式提升設計及適配效率。
以上就是「去邊界化」設計理念，包括定義元素三大特性：延展性、吸附性、流動性，然后確定信息的橫縱向層級關系，橫向功能關系緊密的元素可進行組件化處理。這樣整個界面的元素都是層級清晰且不依靠邊界的，這時再給界面套用一個屏幕邊框就非常有依據(jù)了，且能保障所有適配界面具有統(tǒng)一性。
梳理清楚設計理念之后，還需要將上述原則梳理形成設計規(guī)范，同步至團隊所有成員，以達到團隊共識保障最終的效果呈現(xiàn)。
4. 制定設計規(guī)范
以規(guī)矩為方圓則成，以尺寸量長短則得，設計規(guī)范可以幫助設計師快速認知元素特性及使用規(guī)則，工作中快速復用通用元素，提升設計效率，且可以通過規(guī)范說明對新功能尋求設計指導和參考。
規(guī)范的貫徹執(zhí)行，可以保持產(chǎn)品設計語言與品牌形象的統(tǒng)一，保障在不斷更新迭代中產(chǎn)品體驗不走樣。統(tǒng)一的使用體驗可以保障用戶流暢的使用產(chǎn)品，快速識別產(chǎn)品功能，簡單高效進行操作。此外通過規(guī)范說明，可以實現(xiàn)開發(fā)人員與設計師的高效溝通，另外，將組件開發(fā)形成設計組件庫，可以提升開發(fā)效率，方便代碼的復用。
在「去邊界化」的設計理念中設計規(guī)范也是不可缺少的環(huán)節(jié)，把定義好的元素特性和確定的組織結構總結成設計規(guī)范，是把理論層面上的探索轉換成實踐指導。
以上就是完整的「去邊界化」設計理念在實際工作中的應用：從定義應用中元素的延展性、吸附性和流動性，到把零散的信息元素組成橫向、縱向有序的結構，并把上述特性和結構形成設計規(guī)范在設計、開發(fā)團隊中應用推廣。
從蘋果發(fā)布會開始，滴滴設計團隊內部就開始進行著iPhone X的適配工作。了解iPhone X的操作特性、探究滴滴出行應用的適配規(guī)范、上線后跟蹤反饋等，適配只是一個很小的工作需求，但也可以做的很大，做的很多，我們希望抱著這種極致執(zhí)行的態(tài)度做好每一件事情。
從這次的適配工作中我們不僅看到了 iPhone X ，還看到了未來不斷會出現(xiàn)的新產(chǎn)品、新系統(tǒng)等，我們不滿足于一次次被動的適配，更希望可以主動的應對變化，所以我們摸索出了「去邊界化」設計理念，希望這個理念能對大家的設計工作有所啟發(fā)，讓我們?yōu)槲磥碜龊脺蕚洹?
轉載請注明：優(yōu)設網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰(zhàn)案例復盤！
對于剛開始思考 UI 元素尺寸的新人，通常第一反應都是去看官方規(guī)范，新人都以為官方設計規(guī)范的作用就是告訴你們元素的大小和怎么設置，只要看完了就能懂得如何設計 iOS 或 Android 應用。而實際上，這些規(guī)范并不能幫助你們解決這個問題，因為設計規(guī)范涵蓋的內容遠遠比這些復雜。
我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫所示。
官方不會提供一個列表，逐一羅列每個元素的長寬和其它參數(shù)，所以想弄明白，要自己在這兩套素材庫中選中元素查看。如下圖這個按鈕，我們就能看見它的參數(shù)值。
免費獲取 → iOS 11設計規(guī)范發(fā)布了，來下載官方源文件！
在初期，我們想要設計出嚴格符合官方規(guī)范的設計，就可以嚴格照搬官方的元素設置。但是，即使官方的源文件包含的元素字體已經(jīng)非常多了，在實際設計過程中，還是會出現(xiàn)它們無法覆蓋的設計類型，需要依靠我們自己設置。
還有如字體的應用，官方源文件使用的語言是英文，光是官方應用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應用面板中密密麻麻的字體類型。在真實的中文設計場景下，我們是不可能照搬這種規(guī)范的。
新人要明白，官方的規(guī)范，只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內容，我們是無法設計出有趣個性化的設計的，比如下面這幾款已經(jīng)看不到 「 iOS 設計 」的應用。
官方的參數(shù)決定我們設計的下限，當你不知道該怎么做，或者設計的目標就是以系統(tǒng)原生的體驗和視覺為準，那么照搬就行了。后面的文章要說的，就是脫離開這些束縛，正確自定義 UI 元素的尺寸。
UI 和平面不一樣的地方，就是極其關注元素屬性的具體數(shù)值。平面的排版無論是海報或畫冊，使用百分比、目測的形式就足以讓我們做出很多優(yōu)秀的作品，無需緊盯著其中出現(xiàn)的每個元素的長寬高數(shù)值。而 UI 的設計中，無論字體、圖標還是按鈕，都需要我們嚴謹?shù)囟x它們的長寬高，如下圖設計一個按鈕的操作。
這么做的原因是因為在電子屏幕中，圖像的呈現(xiàn)是由屏幕中的像素點來完成的，像素點是最小的顯示單位，一個點只能顯示一個顏色，所以如果設置了帶有小數(shù)點的數(shù)值，那么這個元素的邊緣就會虛化。所以為了避免這種事情出現(xiàn)，我們就得用整數(shù)來定義元素的長和寬。
這當中還涉及到不少比較復雜的屏幕顯示原理問題，尤其是和像素倍率相關的基礎知識，我會在另外的文章里分享，后面文章所有的長度單位默認以 PT 為準，即 XD 和 Sketch 默認畫布的單位，PS 中設計需要在這個基礎上乘以2。
只有分隔線，是唯一可以不使用整數(shù)的例外，因為 1pt 的分隔線看起來會非常粗，一點也不精致，感興趣的同學可以自己在 Sketch 或 XD 中畫個列表然后用 1pt 的線條做分隔，再導出到手機里觀看效果。即使是官方應用，也主要使用 0.5pt 的線條做分隔。
無論在 iOS 或 Android 的規(guī)范中，也都提到過使用 8 x 8 的網(wǎng)格做輔助，這導致網(wǎng)上有很多片面的文章會反復強調對元素的尺寸使用 8 的倍數(shù)。
實際上，我們在真實的設計環(huán)境中，建議大家使用 4 的倍數(shù)作為一般元素的尺寸倍率即可，如 8、12、16、20、24等，它的好處我會在后面的文章中做說明。如果發(fā)現(xiàn) 4 的倍數(shù)無法滿足某些特定的需要，如多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數(shù)如18、22、26等。
以上就是我們一開始要建立的元素尺寸原則，精簡完即：
有了這樣的原則，并養(yǎng)成習慣，我們就能在每次設計前對元素尺寸有個大致判斷，然后再根據(jù)需要按 4 的倍數(shù)調整，如下面設計注冊登錄頁面的輸入框作為案例。
開始我使用 280 寬，44 高的尺寸，但是覺得有點僵硬，太正式了。這時候反思認為應該是輸入框太矮導致的，所以高度上改成 44+(4×2)=52 。這時候又覺得太高了，實際輸入內容也沒那么寬，于是再對高減 4，寬減 40，獲取最終結果。
所以，因為這樣的操作原則，決定了 UI 元素的尺寸不是憑感覺用鼠標拖拽出來的（拖動效率太低），而是在元素的屬性欄中填入它們的數(shù)值。UI 的設計過程就是一個不停鍵入?yún)?shù)和調整參數(shù)的過程。
以上就是對與 UI 元素尺寸定義的第一部分，因為要講清楚需要花的篇幅太長，所以我會將后面具體的案例講解拆成 4 部分，分別由控件、文字、圖標、組件部分組成。
這里要聲明，在我的語系中，控件指的是在界面中最基本的交互單位，如按鈕、滑塊、開關、分頁器等，更復雜的如動態(tài)卡片，功能快速入口等，就歸入組件中，便于我們理解。
下面，會根據(jù)前面定義的規(guī)范，分別講解控件應該使用的尺寸范圍：
按鈕是界面交互操作中使用最頻繁的元素了，當然按鈕呈現(xiàn)的形式也多種多樣，比如可以是文字、圖片、圖標、卡通形象等等。在這里，我們只聚焦于矩形的基礎按鈕。
在進入具體參數(shù)的講解前，要先理解按鈕實際上是所有控件中最復雜的一個，并不是因為在設計樣式上的復雜，而是因為按鈕承載了最多的產(chǎn)品訴求，權重差異極大，例如看下面的案例。
在上圖中，可以點擊的東西不少，我們就說外觀是標準樣式的按鈕，就有 9 個。而這里面，權重最高的必然是 「加入購物車」。權重最低的，應該是前往新品頁。
定義按鈕尺寸，我們首先要知道的是，按鈕在界面或整個應用中的權重，尺寸和權重是成正比關系的。當然，顏色也是對重要性表現(xiàn)的關鍵因素，不過不在這里展開。
按鈕高度
當我們設計按鈕時，優(yōu)先要從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來匹配權重，分成高、中、低三類：
高權重的按鈕，類似登錄頁的注冊、登錄，購物詳情頁的購買，流程頁中的下一步，它的最小高度應該從 40pt 開始遞增，低于這個大小，那么這個按鈕就很難在這個頁面起到視覺支撐，因為感覺太細了。
中權重的按鈕，類似個人主頁的關注、點贊、評論按鈕等。這個層級的按鈕依舊有比較高頻的交互次數(shù)，我們必須得保證它易于點擊。24pt 是在我經(jīng)驗中便于點擊最小的尺寸了。這種按鈕通常是組件的一部分，不像層級最高的按鈕常常是處于一個孤立的空間，所以高度如果超出 40pt，就會對當前模塊產(chǎn)生直觀的破壞。
低權重的按鈕，就類似查看更多、標簽、詳情等類型，相對于按鈕的交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內部文字或圖形元素即可。
使用上面這種方法，在頁面中根據(jù)權重定尺寸就可以了。還需要注意的是，不同尺寸的按鈕之間，高度的差距不要小于 4 ，否則差異太小不僅拉不開層次，還容易使視覺感受變差。
按鈕寬度
主流的按鈕都是橫向的長方形，正方形也有，但是不能變成縱向的矩形。
按鈕的寬度主要和內容掛鉤，內容數(shù)量越多，按鈕自然也就越寬。唯一的例外，只有高權重的按鈕，可以無視內容的數(shù)量。因為它們需要更多的區(qū)域，往往都是撐滿屏幕內容區(qū)域或全屏的，可以特殊處理。
普通按鈕，左右間距距離內容過多，就會讓按鈕看起來非常的不協(xié)調。所以我們要根據(jù)內容來設置按鈕左右的寬，最大寬度應該小于內容距離上下的 2 倍。
按鈕圓角
按鈕尺寸還有最后一個屬性，就是按鈕的圓角設置了。矩形的邊角有三種類型，即直角矩形、圓角矩形、半圓矩形。
為矩形設置圓角，是為了讓按鈕看起來有一定的圓潤感不會顯得太尖銳，這種圓角的數(shù)值賦予要適當，只要超出了一定的范疇，就會對視覺的和諧產(chǎn)生影響，我習慣稱呼為——半圓不圓，如下圖右側的錯誤案例。
所以，我們在設計圓角的過程中，一定要仔細感受圓角在畫面中的和諧性。而圓角的設置范圍，不大于高度的 1/4。例如，一個24pt的圓角矩形，圓角的尺寸就應該不大于 6pt，如上圖的效果。
以上就是按鈕相關尺寸定義的說明，當然，在真實的設計需求中可能遇到很多無法滿足的情況，這就需要大家多做嘗試了。
輸入框也是我們比較常用的元素之一，它和按鈕有非常接近的外形。最常見的就是登錄頁賬號密碼輸入框，以及首頁上方的搜索欄了。
輸入框的使用高度尺寸，常規(guī)在 36-56pt 之間。低于 36pt 時則輸入框看起來會非常擁擠，比如我用下面學生的案例做個演示。
常見的步進器，就是輸入框和按鈕的結合。左右有兩個用來增加數(shù)量的按鈕，中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上，它也介于兩者之間，高度在 28 – 40 之間。下面我再用學員的作業(yè)做次演示，當?shù)陀?28 以后，就會發(fā)現(xiàn)在屏幕中的占比實在太小了。
步進器中常見的錯誤，是在我們設置圓角外框時，繪制左右兩個按鈕，并沒有合理的減去內側的圓角，這是絕對不應該忽略的細節(jié)。
下拉菜單要注意包含多種狀態(tài)，默認、展開和選中。默認狀態(tài)與輸入框類似，主流的高度也使用 36-56pt。但是，當菜單展開后，下方多出來的選項菜單，就值得注意了。
菜單的寬度正常情況下與默認狀態(tài)相同，而高度根據(jù)里面包含的選項數(shù)量決定。單行選項，高度是不大于默認的選項框的。新手很容易在彈出菜單中設定過小的高度，使整個控件看起來會非常的別扭。
開關也是按鈕的一種形式，通常出現(xiàn)在設置頁的列表中，上方就是它主流的幾種樣式。在設計開關的時候，要先確定一個矩形區(qū)域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt。之后再將細節(jié)填入。
滑塊形式接近開關，通常在中間有一個操作節(jié)點，下面有一個用來表示區(qū)間的線條。實際上我們該做的就是分別決定它們的尺寸。
節(jié)點如果做的太小，不僅會顯得難看，而且會讓人覺得很難操作。它的直徑應該在 16-28pt 之間。而下面的橫線，寬度由所在內容區(qū)域的寬決定，高度一般在1-4pt 之間。
指示器用來展示元素序列，雖然在 APP 中沒有太重要的作用，但既然我們加進去，就要讓它看起來和諧。大多數(shù)人在定義指示器時，不是太大，就是太小，可以只從后面提供的尺寸中選擇，就能保證指示器的尺寸不會出錯。
指示器主要是圓形和矩形兩種形式：
提示紅點也是大多數(shù)應用會使用的一個控件，它的大小應該在 24-32pt 之間。作為一個圓形，這個控件設計起來很容易，但設計師往往忽略一件事，那就是如果中間的數(shù)值超過 10 變成 2 位以后，要怎么處理。
在設計這樣的元素時，我們要用一個矩形元素來表現(xiàn)，即畫一個正方形，然后將圓角設成最大，那它看上去就是一個圓形。那么每增加一位字符，我們就需要為這個矩形增加該字符的寬度，可以用左右間距判斷。
因為相同字號下，不同英文、數(shù)字的寬度都是不一樣的，我們要根據(jù)實際輸入的內容所增加的寬度，去增加圓點的寬度。
最后一個控件，就是分頁控件了，安卓中的 Tabs。這個元素在設計時也受到排版空間的影響，較為寬松的排版風格，高度就比較大，若擁擠則反之。
下面是高度：
分頁控件主要應用在頭部和頁面中部的組件中，如下方的案例：
雖然很多時候分頁器是沒有背景色的，但是背景矩形是必須畫出來的，即隱藏填充和描邊，這樣我們就可以通過垂直居中的方式，來確定中間文字的位置。
一個完整的分頁控件，里面會包含兩個或以上的選項，所以定義每個選項的寬也是必要的。通常，我們有兩種定義方法，一種是選項少時，直接進行均分顯示，另一種是選項較多，采取定寬模式，寬度最小建議在 64pt 以上，才不會顯得過度擁擠。
分頁控件選項處于選中狀態(tài)時，有的設計是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個元素如果定義得不好，會讓整個控件看起來非常粗糙，它需要在樣式中能起到畫龍點睛的作用。
下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應該使用的高度都應該不大于 2pt。寬度的定義，第一種和每個選項背景區(qū)域相等，第二種則可以在 8-16pt 間（小于文字總寬）。下面是正確設計效果：
前面說到了不少元素的尺寸，那么真實應用的效果會如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁面中去。
可以看到，模塊大小很均衡，看上去不會覺得哪些地方太大或太小，只要稍加填充樣式，那么就可以變成完整的設計稿了。
這些參數(shù)雖然不能覆蓋所有特殊的狀況和需求，但至少可以保證這些控件不會被設計得很奇怪。當你們沒有對于特殊化風格設計的控制能力時，就先學會正確的使用上面的這些參數(shù)吧。
轉載請注明：優(yōu)設網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰(zhàn)案例復盤！
1. 理論表述
任意一點移動到目標中心位置所需要的時間，與目標距離正相關，與目標大小負相關。
2. 研究背景
1954 年，Paul Morris Fitts 根據(jù)信息類比提出一個假設，該假設能夠量化「移動到目標選擇任務」這個操作的難度「1」。雖然該假設還未涉及到人機交互中的具體參數(shù)，卻給了后來的交互研究人員極大的啟發(fā)。
我們現(xiàn)在經(jīng)?？吹降?Shannon 公式（即上面那個公式）是由約克大學教授 Scott Mackenzie 在 1992 年提出的一個菲茨公式的變體「2」，該變體被廣泛地應用于需要指針操作的人機交互系統(tǒng)當中。作為交互設計和 UI 設計的理論基礎，它更簡潔明了地闡述了時間 T 和目標距離 D 以及目標大小 W 之間的函數(shù)關系：因為以 2 為底的指數(shù)函數(shù)是遞增函數(shù)，所以，T 與 D 正相關（D 越大 T 越大），而與 W 負相關（W 越大 T 越?。?
人們做出一個移動指針的操作通常需要兩步：
菲茨定律所包含的兩點內容：
綜合兩者來看，菲茨定律中的 D 在第一步中起更為明顯的作用，而 W 則主要影響第二步。所以菲茨定律所帶給我們的啟示，主要也是從這兩方面入手。
案例1：系統(tǒng)右鍵菜單，微信彈出菜單
最典型的例子就是菜單，無論是 PC/Mac 中的右鍵菜單還是微信聊天頁里面的加號鍵都遵循著這一原則。作為用戶，點擊這類按鈕之后一定會有后續(xù)的任務和操作，所以這些任務都被安排在了距離所點擊區(qū)域更近的菜單中。
案例2：夸克和 Safari 的 url 輸入框位置比較
另外一個例子是瀏覽器的搜索欄輸入框，現(xiàn)在已經(jīng)有一些瀏覽器（比如簡單搜索、夸克）會將輸入框以及一些其他更常用操作置于底部，這是因為我們正常握持手機時，大拇指離底部更近，所以需要進行點擊操作的話底部的輸入框操作起來更方便，也更快。
這一點在現(xiàn)今的 APP 中做得已經(jīng)非常到位了。
案例3：哈羅出行
作為哈羅單車租用操作的入口，頁面中的「開鎖」按鈕做得足夠大，用戶可以輕易快速地點擊到這個使用頻率最大的按鈕。登錄（也就是開始）按鈕也是一樣的道理。
還有一個比較特殊的就是對于邊角的利用，無論是在 Windows 還是在 MacOS 中，邊角總是有一些比較重要的操作，比如 Windows 的「開始菜單」（在左下角），MacOS 的 Dock 欄（在底部）以及頂部狀態(tài)欄，包括 Mac 特有的觸發(fā)角。
案例4：MacOS 觸發(fā)角設置
為什么微軟和蘋果不約而同地選擇了在屏幕最邊角放置這些權重相當之高的組件或者操作呢？在硬件設備中邊角是一個極其特殊的存在，由于指針再怎么移動都不可能超越屏幕邊界，只能停留在邊界上，所以邊界對于用戶的操作來說是「無限可觸發(fā)」的，這有什么意義呢？這意味著對于隱性存在的目標來說，W 趨于無限大。
既然 W 趨于無限大，根據(jù)公式時間 T 就趨于常量 a。
結論就是無論指針距離目標物多遠，所需要花費的時間都已經(jīng)達到了理論的最小值，輕松且高效。而在移動 APP 中同樣有邊角的應用，比如最近拿了 Google Play 設計大獎的 Drops。
案例5：Drops
創(chuàng)新的交互將屏幕底邊充分的利用了起來，只要將單詞移到底部，就代表用戶已經(jīng)記住這個單詞了。注意整個底部都是可以觸發(fā)的，而不僅僅是腦袋那個圓形區(qū)域。本來「移動」這個操作對于「按鈕」來說更加繁瑣，但是在 Drop 的應用場景下這樣的移動反而沒有覺得麻煩，滑起來相當帶勁。
菲茨定律給我們的啟示通常都是正向的，都是以縮短用戶的操作時間為主要目標，但也有一些場景需要反其道而行之。比如如果遇到需要用戶謹慎的操作時，可以逆向運用菲茨定律，增加操作的復雜度。
案例6：iPhone 關機和微信刪除聊天窗
iPhone 的滑動關機延長了用戶關機操作的時間，以提醒用戶此操作為不可逆，需要謹慎操作。微信也是同理，甚至還縮小了刪除按鈕的大小，以達到警示的目的。
另一個典型就是彈出窗口的關閉按鈕。
案例7：Luckin Coffee 的彈出窗
彈出窗口里一般都包含了開發(fā)商的推廣、廣告、運營活動等等，所以開發(fā)商會希望用戶花盡量多的時間去注意到它們的內容，這時候雞賊的開發(fā)商會把關閉按鈕做得又小又遠（遠離視覺中心），讓用戶花更多的時間去尋找和點擊它們，效果拔群。
注意點1：D 不能過分短
過分短的間距不僅無法提升操作效率，反而會造成視覺壓力從而降低用戶體驗。
反面案例1：唯物魔改版
按照菲茨定律魔改的唯物登錄頁面，理應操作得更迅捷方便，然而實際上除了視覺上造成額外的擁擠感、破壞畫面負空間構成之外，我嘗試著點了一下覺得十分逼仄擠手，所以過度縮減按鈕間的間距并不合理。
注意點2：W 不能過分大
大尺寸的點擊目標確實能夠有效地降低用戶操作成本，但是過分大的目標也會很直接地破壞畫面的平衡，浪費屏幕空間。并且按鈕的可用性與其尺寸并不是呈線性關系，當按鈕已經(jīng)足夠大時，再增大就沒有什么體驗上的提升了，如下圖所示。
反面案例2：KEEP 魔改版
與唯物類似，當按鈕大到一定程度之后，會對畫面造成恐怖的破壞效果。
轉載請注明：優(yōu)設網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰(zhàn)案例復盤！
現(xiàn)在大多數(shù)的 PM /交互/ UI 設計師，在設計產(chǎn)品的時候都是以 iOS 為基準 思考產(chǎn)品上的各種功能邏輯、交互狀態(tài)，而很容易忽略了某些功能在 Android 里并不能「一稿適應兩端」，部分產(chǎn)品差異在安卓上是不一樣的。
所以本文就講下 Android 和 iOS 9大產(chǎn)品/交互差異，希望你在日后的產(chǎn)品設計時，可以考慮到更多層面的知識點。
對在于一些虛擬商品的支付上，如 vip 會員、xx幣，xx豆。iOS 和 Android 就存在不同的支付規(guī)則：Android 基本無限制，無抽成。而 iOS 限制比較多，而且要抽成大約 30% 的手續(xù)費。
舉個例子：同樣充值 30 元，Android 端會得到 300 金幣，而在 iOS 中，只有 210 金幣。正因這個抽成規(guī)則的不同（沒辦法，這是蘋果硬性規(guī)定的），才會出現(xiàn)各種平臺的虛擬貨幣，在 Android 和 iOS 中的充值比例是不一樣的，如快手：
所以對于虛擬商品在 iOS 端的抽成規(guī)則，在產(chǎn)品設計時一定得考慮清楚，因為這關系產(chǎn)品的商業(yè)和盈利模式。通常有 2 種解決思路：
A. 讓用戶承擔 30% 的抽成：
同樣的價格，iOS 用戶得到的商品少些
如同樣充值 30 元，Android 端會得到 300 金幣，而在 iOS 中，只有 210 金幣。像快抖音、陌陌等各種貨幣充值。
同樣的商品，iOS 用戶支付更高的費用
如 3 個月的 vip 會員，Android 端定價是 58 元，iOS 端則可以設為 68 元。如優(yōu)酷、騰訊視頻的 vip 會員價格。
B. 公司自己承擔 30% 的抽成：
如 iOS 端充值 30 元，公司實收 21 元，但 iOS 用戶能得到和 Android 一樣的 300 個金幣。（理論上是有這個解決思路，但現(xiàn)實中很少有公司去實現(xiàn)，畢竟抽成成本就擺在那里）
另外還需要注意的是：因為抽成規(guī)則的不同，對于同一個 ID 的賬戶余額，在 Android 和 iOS 端中是不能通用的。因此在產(chǎn)品設計時需要將這點告知用戶，預防用戶犯錯、以及惡意刷幣。
Android 由于開源的特性，因此對接的都是第三方支付平臺，如微信支付、支付寶、銀聯(lián)卡等。 而 iOS 出于系統(tǒng)的封閉性和安全性考慮，只能調用蘋果自己的支付系統(tǒng)：登錄 Apple ID ，然后用授權的支付方式（支付寶、銀聯(lián)卡）進行付款。
「狀態(tài)欄」也就是我們手機界面最頂部的電池欄，它除了可以在不同背景里切換顏色外，在交互的觸發(fā)上，Android 和 iOS 中也各不相同。
iOS ：用戶在 Y 軸滾動了很長內容時，點擊狀態(tài)欄可以快速回到初始位置。
Android ：無論用戶滾動了多長內容，都是點擊無任何效果。
雖然這一交互差異是 iOS 專有的，但它卻啟發(fā)我們一個新的設計思路：在必要的時候，狀態(tài)欄可以為產(chǎn)品承載新的交互狀態(tài)。如網(wǎng)易的 LOFTER（ iOS 端），用戶離開音樂播放界面時，狀態(tài)欄就用于顯示音樂信息和操作入口，方便用戶在瀏覽其他內容時可以快速關閉音樂，極大提升了用戶的操作效率。
這種大多應用于運營的「拉新」場景，為了能讓新用戶得到好處（紅包、優(yōu)惠券、更好看的內容等）。通常會讓新用戶下載產(chǎn)品 APP 領取。而由于 Android 與 iOS 的下載方式不同，會帶來不同的交互狀態(tài)和產(chǎn)品邏輯。
Android ：可以在當前頁面（后臺）下載，也可以在應用商店下載；過程中可以顯示進度，且允許用戶暫停下載；下載完成后調起安裝頁面，用戶可以取消安裝，也可以自動安裝……正因為 Android 下載軟件的各種便捷性，所以才會帶來各種交互狀態(tài)：未下載、下載中、暫停中、已下載但未安裝、已安裝。這些都是交互設計師需要特別注意的，每個不同的狀態(tài)背后都會不同的產(chǎn)品邏輯。
iOS ：只能跳轉到 App Store 里下載，所有下載流程和狀態(tài)都是在那完成的，可以脫離開活動頁面，相比于 Android 的下載方式就簡單很多。跳轉的方式可以是全屏幕，也可以是半屏。
Android ：由于安卓的開源特性，當有新版本時都會提示用戶更新，且每個產(chǎn)品內部都帶有「版本更新」入口。而更新的方式可分 2 種：
iOS ：而 iOS 端出于對用戶體驗的考慮，是禁止向用戶提示版本更新信息的。這也是為什么絕大部分的 iOS 產(chǎn)品，都是沒有「版本更新」入口的原因（像 QQ 、支付寶、百度網(wǎng)盤等大廠產(chǎn)品）。
即使有，點擊了也直接跳轉到 App Store 查看版本情況。且下載渠道都固定在 App Store 里。理所應當?shù)模浖母路绞揭仓荒茉?App Store 里進行，無法做到與 Android 一樣后臺下載、后臺更新。
在手機鍵盤里輸入文字時，iOS 由于系統(tǒng)的限制，對文字的發(fā)送指令只能在鍵盤上來完成，因此 iOS 用戶的交互操作都全部集中在鍵盤右下角。
而 Android 端就靈活很多，不僅可以在鍵盤上執(zhí)行發(fā)送指令，也可以在輸入欄/搜索欄周邊新增操作入口。
長按一張圖片后，都會彈出一個列表浮層，因為 iOS 手機只有一個「Home 鍵」 而已，為方便用戶退出浮層才增加了「取消」入口。
而 Android 手機本來就有「返回」虛擬鍵，安卓用戶的退出/返回行為都習慣于通過虛擬鍵觸發(fā)，所以多做一個「取消」的意義性不大。
iOS 端一直教育著用戶使用「左滑」刪除列表信息，所有的刪除功能都是支持「左滑」來實現(xiàn)的。
而 Android 系統(tǒng)大部分只能通過「長按」來觸發(fā)編輯狀態(tài)，其中就包括了刪除功能。
不過現(xiàn)在也有極少數(shù)的產(chǎn)品，正在逐漸打破這兩端間的「刪減」界限，比如網(wǎng)易郵箱（Android）就做到了左滑刪除信息。
當我們第一次打開產(chǎn)品、允許了獲取消息通知的權限后，所有的信息傳輸都會基于服務器進行推送。而兩端在這塊的推送機制又有所不同：
iOS ：所有新信息都會實時推送到你的手機里，即使你關閉了軟件，還是一樣會收到提示。就算是你處于斷網(wǎng)狀態(tài)，信息也會先儲存于蘋果服務器，等你聯(lián)網(wǎng)時再一次性把收到的信息推送給你。既釋放手機內存，又不會讓用戶遺漏有新消息。
Android ：而安卓則不同，你若退出了產(chǎn)品，數(shù)據(jù)的推送只有等你再次打開產(chǎn)品時，才會通知你有多少新信息。雖然減少了對用戶的干擾性，但也增加了服務器數(shù)據(jù)儲存的壓力，還容易耽誤用戶接收新消息。
也就是我們手機的搜狗輸入法鍵盤，在微信聊天內、手機短信里復制了一段內容后，由于 Android 與 iOS 的平臺特性差異，會給兩端用戶帶來不同的交互差異。
iOS ：復制完文字后，打開輸入法鍵盤會顯示來自剪切板的文字內容。用戶只需點擊，即可將文字復制在搜索欄、輸入欄等需要文字填寫的操作區(qū)域里，無需觸發(fā)「粘貼」操作。
Android ：而有些安卓機（如小米/錘子/樂視等)，無論你復制了什么信息（文字、數(shù)字、網(wǎng)址等），都很難實現(xiàn)輸入法里的「剪切板」功能。用戶需要觸發(fā)「粘貼」功能，才能輸入剛剛的復制內容。
而對于特定的信息類型：如網(wǎng)址。用戶復制網(wǎng)址往往都帶有極強的目標性、搜索性，一些瀏覽器產(chǎn)品會預判用戶這一操作行為，將復制的網(wǎng)址前置展示出來，以抵消 Android 端對于復制文字帶來的系統(tǒng)限制。如 QQ 瀏覽器（安卓端）就有 2 種解法方法：
方法1：利用安卓系統(tǒng)的消息權限，在手機界面的頂部彈出網(wǎng)址欄提示，無論是在微信還是短信中，復制網(wǎng)址后都能快速地觸達目標。
方法2：復制網(wǎng)址后打開搜索功能，會將網(wǎng)址自動定位并粘貼到搜索欄中，便于用戶查詢。
而 UC 和百度也有類似的解決辦法：將復制后的廣泛信息（文字/數(shù)字/網(wǎng)址/郵箱地址等等）嵌入在搜索框下方，用戶點擊就能搜索。
這也是一種妥當?shù)慕鉀Q方法，因為用戶可復制的信息類型特別廣泛、目標不是很清晰。無法準確判斷出用戶一定會有搜索訴求。所以才將復制后的信息放在搜索框下面，而不是自動粘貼到搜索框中，既考慮了用戶目標，又兼顧了操作效率。
以上就是 Android 與 iOS 的差異總結，若有描述得不當請多指教！下面是總結文件。
轉載請注明：優(yōu)設網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰(zhàn)案例復盤！
@布萊恩臣 ：iPhone X 在 2017 年上市以來，全面屏手機就開始逐漸普及。iPhone 8 的 4.7 寸屏幕到目前最新機型 iPhone 11 的 6.1 寸屏幕，以及 Pro Max 系列的 6.5 寸，各種各樣的劉海屏、水滴屏、挖孔屏、折疊屏等等屏幕方式隨之出現(xiàn)，物理 Home 鍵都被舍棄改成虛擬按鍵，甚至是沒有虛擬按鍵的手勢滑動操作。
而這些手機都有一個共同的特點，就是屏幕尺寸越來越大。屏幕尺寸變大后，手握手機的方式和界面交互操作方式也隨之改變，那對于設計而言，是否也應該隨之進行改變呢？
想單手點擊屏幕的操作，需要手足夠靈活進行一輪操作才能夠到屏幕上方，過程中稍有不慎，手機隨時會砸地上。作者的手機屏幕已經(jīng)修了幾次，差不多趕上一臺二手機的價格了。
在 2013 年，國外設計師 Steven Hoober 發(fā)表了一篇《手機界面設計》的研究報告中，對一千三百名手機使用者進行量化研究數(shù)據(jù)：
據(jù)當時研究的數(shù)據(jù)可以看出，有近半的用戶是單手使用手機（現(xiàn)在肯定不止）。當用戶單手操作的時候，實際拇指可以觸摸到的區(qū)域是如下圖這樣的。綠色區(qū)域是拇指的正常操作區(qū)域，黃色區(qū)域是拇指能觸碰到的最大限度范圍，紅色區(qū)域是觸摸比較困難的區(qū)域。
然而這份研究報告的數(shù)據(jù)是在 2013 年發(fā)布，當時還沒有全面屏的出現(xiàn)，如果把上面研究結論的區(qū)域，套用到如今的手機屏幕尺寸上，頂部的紅色區(qū)域會占更大比例。以 iPhone 11 尺寸比例作為參考，如下圖：
拇指可操作范圍大約在 3 分之 2 的區(qū)域，可見想要觸碰到紅色區(qū)域是有一定難度的。也正是因為這份報告只適合當時的手機市場情況，在當今已經(jīng)不適用了，因此需要重新去考慮如何為大屏幕手機進行界面設計。
根據(jù) 2020 年手機UX設計趨勢，大屏幕設計將會成為熱點。根據(jù)數(shù)據(jù)報告中有說明，2018 年 10 月使用大屏手機的用戶比例是16.3%，到 2019 年 12 月，該數(shù)據(jù)已經(jīng)上升到 41%，并且會在未來更多新機型的出現(xiàn)中持續(xù)上漲。
那隨著大屏幕手機的普及，就意味著設計師在設計界面的時候，要為大屏幕手機的使用場景進行界面調整，避免用戶難以使用的體驗問題。以下是我整理的一些設計建議方案：
1. 頭部區(qū)域設計更高
通過將標題欄的信息區(qū)域放大，盡量把主要操作內容向拇指區(qū)域靠近。
2. 常用導航與操作居于底部
比起導航欄放在頂部，更適合大屏幕手機的方式是將導航和重要操作盡量往屏幕底部放置。
3. 手勢操作頁面切換與返回
抖音和 Instagram story 等短視頻應用界面都是通過手勢滑動屏幕的方式，對頁面進行切換，操作的學習成本很低，而且主要操作也在屏幕底部。這種操作方式也會在今年越來越多地被使用。
4. 提示彈窗從底部升起
常用的彈窗，很多是設計在屏幕中間彈出，為了適配大屏幕，不妨嘗試從底部彈出，關鍵選項都能輕松選擇，提高轉化率。
5. 使用大卡片
屏幕尺寸變大以后，使用整張大卡片可以讓用戶瀏覽內容更專注，大面積的配圖和留白，也能提高用戶的點擊欲望。
除此以外，作為手機廠商，在發(fā)布大屏幕手機的時候，就有對界面操作做了一些對應系統(tǒng)級的設計調整，比如界面下拉懸停，鍵盤單手模式，屏幕邊緣滑動返回等等。
大屏幕尺寸已經(jīng)是趨勢，屏幕大意味著內容可以更大限度地得到展示，有利于產(chǎn)品提供更多的服務，不再糾結首屏無法展示完主要內容。在這個信息爆炸的時代，用戶也不再滿足于小屏幕的瀏覽方式?？梢哉f，大屏幕已經(jīng)是無法改變的趨勢。與其擔心問題到來，設計師更應該思考如何去適應產(chǎn)品的快速迭代，不斷更新自己的設計思維模型，更全面思考問題，產(chǎn)出更合理、體驗更好的設計方案。
希望本文內容可以對你有所啟發(fā)。
轉載請注明：優(yōu)設網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經(jīng)典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰(zhàn)案例復盤！
中國互聯(lián)網(wǎng)公司的迅速發(fā)展正在推動著整個軟件行業(yè)的審美革命，在 C 端產(chǎn)品市場逐漸飽和的情況下，互聯(lián)網(wǎng)大廠正在將資本逐步轉移到 B 端市場的廣闊藍海中?！癇 端 C 端化”的設計理念也應運而生，認為可以用 C 端的模式和思維來進行 B 端產(chǎn)品的設計。
除了剛剛有說到的資本慢慢向 B 端市場的藍海轉移，還有一點就是中國互聯(lián)網(wǎng)環(huán)境的迅速發(fā)展，智能手機的大范圍普及，工作人群的年輕化，使得人們已經(jīng)熟練的掌握了各種軟件的使用，并且在快速迭代的產(chǎn)品中慢慢變得挑剔、謹慎。
并且不斷優(yōu)化迭代的互聯(lián)網(wǎng)軟件產(chǎn)品也在無形中為用戶完成了底層認知的搭建，一些功能、操作、交互邏輯已經(jīng)深入人心，用戶也已經(jīng)被教育成了”高玩”。
所以如今一些新型 B 端產(chǎn)品的設計理所應當?shù)脑?a class="tag_a" target="_blank" style="text-decoration-line:none;border-bottom:none;word-break:break-all;color:#525252;">用戶體驗五要素中最貼近用戶的結構層、框架層和表現(xiàn)層中與一些 C 端產(chǎn)品在一定程度保持了一致，這種設計理念其實也很好的解決了傳統(tǒng)軟件的復雜、門檻高、難用等痛點，很大程度降低了用戶的認知成本和學習成本，把高效、簡單、易用的工具帶到大家的日常工作中。
對這個概念的理解我認為是：”B 端產(chǎn)品在使用體驗和視覺感受這兩個方面和 C 端產(chǎn)品接近”。這是我們設計師需要特別關注的，傳統(tǒng)的思維中，大多數(shù)設計師會認為 B 端是給公司內部人員或者商家使用的，只是一個管理系統(tǒng)，并不需要太過于精細，至于體驗也是停留在“能用就行”的程度。但是在我看來不管是 C 端還是 B 端，其實它的使用對象都是“人”，應該要遵循人們對于事物的認知和一系列復雜的人體工程學操作習慣。兩者都需要關注用戶在使用時的體驗感受，順暢的使用流程、清晰的信息展示和高效的行為效率，以及有效的引導都能夠快速的幫助用戶完成目標任務。無論是 C 端設計還是 B 端設計，滿足這些條件無疑可以給用戶帶來更好的體驗。
但是也不能以偏概全的認為 C 端的設計思維可以完全復用過來。B 端產(chǎn)品的場景其實比 C 端產(chǎn)品還是要復雜的多，應該說是各有各的側重點，思維和設計模式上不能完全照搬，下面我就先說說它們各自的不同處，再舉例帶你看看 B 端產(chǎn)品在哪些方面可以向 C 端產(chǎn)品借鑒學習。
1. 使用者不同
B 端使用者多是同一個組織集體，以群體為單位進行協(xié)同。比如：老板、部門主管、員工或商戶。而 C 端使用者相對比較單一，目標用戶群體即是主要使用人群，使用目標、偏好、個性比較明確。
2. 業(yè)務不同：
B 端業(yè)務大多數(shù)會存在多重維度、場景，使用場景跟業(yè)務緊密相關，同一個系統(tǒng)不同角色使用時的業(yè)務處理和所關注的數(shù)據(jù)信息，側重點會有很大的不同，需要全局考慮。不同角色使用產(chǎn)品的流程差異大，需要不同業(yè)務上更專業(yè)的解決方案。而 C 端業(yè)務一般維度比較單一，業(yè)務邏輯相對固定，任務路徑和展示內容比較單一。
3. 價值主張不同：
B 端注重效率、成本、管控、數(shù)據(jù)分析等。追求產(chǎn)品的穩(wěn)定性、業(yè)務的增長性，保證產(chǎn)品性能和技術上的安全性。而 C 端注重用戶的體驗、使用簡單、有樂趣。
4. 產(chǎn)品思維不同：
B 端產(chǎn)品多數(shù)基于服務思維，工具化思維，更加理性；更多的是幫助 B 端用戶提高效率，完成業(yè)務目標。而 C 端多數(shù)為產(chǎn)品化思維，游戲化思維，更感性，更多的是娛樂和情感的滿足。
5. 產(chǎn)品形態(tài)不同：
B 端產(chǎn)品注重業(yè)務的梳理，多數(shù)會用到圖表、表格、模型，多數(shù)產(chǎn)品形態(tài)偏向更垂直行業(yè)或更專業(yè)的面板形態(tài)。而 C 端更注重用戶的感受，會用到很多夸張的動效，炫彩的顏色。
1. 結構層
結構層確定各個將要呈現(xiàn)給用戶的選項的模式和順序。結構層是用來設計用戶如何到達某個頁面，并且要考慮他們完成事情之后能夠去哪里。
具體在 B 端產(chǎn)品的表單交付場景下可以體現(xiàn)出，以前的 B 端表單往往過于冗長，借鑒 C 端一些注冊場景的設計，把表單拆分成 3 步內的行為步驟，減少用戶的疲憊感提升體驗。
2. 框架層
產(chǎn)品的框架層包括：按鈕、控件、照片、文本區(qū)域的位置?？蚣軐邮怯糜趦?yōu)化頁面設計布局的。
具體在 B 端產(chǎn)品的列表頁可以體現(xiàn)出，列表頁中整體的按鈕、文本區(qū)域的位置、搜索和篩選的布局設計其實與 C 端產(chǎn)品中的商品詳情頁是類似的，遵循用戶的閱讀順序和視覺焦點來進行設計。
3. 表現(xiàn)層
視覺、聽覺、（觸覺）的體驗設計。多體現(xiàn)在一些情感化的設計也被運用在了 B 端產(chǎn)品中。
反觀現(xiàn)在 C 端產(chǎn)品的一些設計風格和流行趨勢，有哪些可以運用在 B 端產(chǎn)品的設計中呢？
1. 3D 化
B 端因為對數(shù)據(jù)的展示有較強的需求，用戶在使用過程中提高效率的判斷緯度也包括信息數(shù)據(jù)的獲取效率，而 3D 的視覺在數(shù)據(jù)可視化層面有著天然的優(yōu)勢，可以幫助用戶更快速的理解數(shù)據(jù)維度所表達的核心價值。近年來網(wǎng)速等硬件設施的升級也為 3D 化視覺帶來可落地的基礎，設計師也嘗試在產(chǎn)品設計中融入更多的 3D 化元素。
2. 情感化
人們對傳統(tǒng) B 端產(chǎn)品的印象往往是覺得它們比較枯燥、呆板的，如今一些新型的 B 端產(chǎn)品的設計理念也試圖在拋開用戶對于產(chǎn)品的這種既定印象，所以很多產(chǎn)品在往一些娛樂化、IP 化的方向嘗試，并且都達到了一些比較好的效果，未來在這方面的思考和嘗試只會越來越多。
3. 個性化
B 端產(chǎn)品的同質化嚴重，所以 B 端產(chǎn)品也需要從一些產(chǎn)品定位去定制更加富有個性的品牌基因，可以讓用戶產(chǎn)生對產(chǎn)品的感情，達到從同類產(chǎn)品中能夠脫穎而出的目標。
不管是 B 端還是 C 端，目的都是為了解決業(yè)務場景中遇到的問題，使用對象都是人，都應該站在“人性”的角度考慮問題，有人說 B 端產(chǎn)品一般都不注重設計，C 端產(chǎn)品的設計更能滿足設計師對美的追求，我只能說它們的側重點不同，C 端更注重視覺感受，要做到在視覺表現(xiàn)的感性層面吸引用戶，而 B 端其實更為復雜，需要做到底層的強大數(shù)據(jù)處理能力，產(chǎn)品的專業(yè)性包括交互、視覺的吸引力，這樣才能從眾多產(chǎn)品中得到用戶的認可并脫穎而出。設計師還需要不斷打磨細節(jié)和優(yōu)化體驗來吸引和留住用戶。
所以說“B 端 C 端化”也只是在某些方面通用，但核心側重點不同，不能以偏概全、一概而論，但可以借鑒與參考，B 端產(chǎn)品也可以做的很精彩。
轉載請注明：優(yōu)設網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
Cs界面設計之二：如何區(qū)別B端與C端的產(chǎn)品設計差異？我總結了26條對比！
我發(fā)現(xiàn)很多新人設計師和我當年一樣，有一個誤區(qū)，認為做C端就是比做B端更好。尤其如果能做知名C端產(chǎn)品，想想都開心。
△ by Chris Ota @ Dribbble
我作為一個兩者都做過的大廠設計師，想要總結一下自己多年的經(jīng)驗和觀察。如果你還在猶豫選擇做C端還是做B端，或者擔心做B端不好，無論你是UX還是UI甚至是PM，都一定要用心看看：
P.S. 本文不能代表所有情況，只能代表很大一部分典型狀態(tài)。
領導和客戶，哪個更難搞定？
我覺得領導更難搞定。
很簡單，如果作為一個基層設計師，你不知道自己有多少層領導，例如設計層、項目層、產(chǎn)品層、公司層甚至集團層…
而且，每一層可能還有不止一位領導。
更可怕的是，他們之間的意見可能統(tǒng)統(tǒng)不一樣…
這還不包括一些與你意見相左的平級隊友…
而方案評審有時還逐層遞進，每一層改一次。好像升級打怪一樣，你還統(tǒng)統(tǒng)無法拒絕。
經(jīng)常是A、B、C、D方案隨機組合各遍，最后發(fā)現(xiàn)又回到了原點…很多情況下，C端大公司里做設計，時間就是這么被消耗掉的。
那B端就好些嗎？
不但要應付本公司的領導，而且還要應付對方的領導，層級還豈不是更多了？
并不是這樣。
雖然領導數(shù)量變多了，然而金主經(jīng)常只有一個——甲方公司內，即能夠審批是否為該項目付費的領導。
對于B端公司來說，做項目的目標特別明確，那就是——能不能讓甲方爽快給錢。
只要錢給夠了其它都好說，不像C端公司那樣，考慮的東西特別多：口碑、留存率、轉化率、活躍度…
也就是說，即便本公司領導不喜歡你的方案，但只要金主爸爸喜歡了，一般就不會有什么問題，畢竟誰也不會和錢過不去。
當然，甲方內部自己意見不統(tǒng)一的情況也是有的，但一般外包項目都會有比較明確的負責人，所以很多時候也不會太復雜。
很多C端公司不重視匯報，很難開一次正兒八經(jīng)的進度報告會。因為就那么幾個人，反正辦公室里抬頭不見低頭見，何必整那些“形式主義”。
甚至設計規(guī)范什么的，意思意思就好了，反正大家翻來覆去也就那么點頁面，文檔做精致了給誰看？
B端就不一樣了。
一整個項目下來，真正和甲方面對面的機會不多，所以每次都一定要特別隆重：
明明只需要一個步驟，恨不得拆分成兩個，一定要讓金主爸爸感覺服務到位、物超所值，最好是能夠多給點錢。
在C端公司工作，你會發(fā)現(xiàn)你學的那些設計流程根本用不上幾個，因為絕大多數(shù)需求都小得跟擰螺絲釘差不多了。
當然，你申請C端工作的時候，作品集里的項目流程一環(huán)不能少，得整得跟造火箭一樣。
C端公司通常不求數(shù)量，更求質量。自家產(chǎn)品的流量來之不易，必須長期迭代維護，才能不被競爭對手超越了。
結果需求越來越細，設計方案可以為要不要圓角、標題字體要不要大1號、留白要不要多2個像素之類的小問題爭論半天…
B端就不一樣了，就跟做飯店一樣，講的是翻臺率。項目能夠1個月搞定，就絕對不要拖到1個半月。
最好是永遠不要迭代，一次過審，盡快拿錢收工走人。
至于細節(jié)問題，只要剛好夠忽悠甲方那就夠了，多一點都是浪費。
C端產(chǎn)品有點像快銷時尚，隔一段時間就得改個版。也不是因為之前有什么問題，就是給用戶換換口味，刺激一下他們的“消費欲”。
而且每推出一個新功能時，界面上最好是設計得有點個性，生怕用戶感覺不夠新奇，沒有點擊欲。
B端就不一樣了，經(jīng)常是項目一次性交付，只要不出問題就幾乎不迭代。
甲方已經(jīng)把價格壓得這么低了，還追求什么個性風格？還不如全部組件化，一套規(guī)范搞定N個界面。不容易出錯，還能把成本降到最低。
這句話不難理解，可以從前面的內容就可以推理而來。
C端追求個性，需要不斷推陳出新，從感官上刺激用戶，那么視覺設計的工作就不會少。
而由于C端產(chǎn)品的需求大多以局部迭代為主，少有大改或者從零到一的機會，所以交互上可以發(fā)揮的余地多少有些限制。
△ by Anton Mikhaltsov @ Dribbble
B端常用組件化設計，需要個性化的地方不多，很多后臺頁面甚至完全不需要視覺設計。
而且很多B端公司會將同一套視覺風格用到不同的項目中，頂多換個色調、改個首頁風格。
而拼湊組件的工作，通常交互設計師就可以解決。
△ by Tom Koszyk for EL Passion @ Dribbble
最后說一點，我認為C端與B端沒有高下之分，就看個人取舍。
但要注意的是，一旦你選擇了其中一個，以后再換方向可能就沒那么容易了，所以做選擇是要謹慎。
轉載請注明：優(yōu)設網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
Cs界面設計之二：如何區(qū)別B端與C端的產(chǎn)品設計差異？我總結了26條對比！
經(jīng)常在網(wǎng)上看到「B 端產(chǎn)品 C 端化」的討論。
一開始我以為這個概念是說 B 端產(chǎn)品以前做得太差了，但隨著競爭越來越激烈，以后也要像 C 端產(chǎn)品那樣注重用戶體驗，更加輕量化、趣味性和人文關懷才行。
當時我還挺不以為然，感覺像是噱頭或者自嗨。
把用戶體驗做好雖然重要，但是這對 B 端公司的實際業(yè)務（錢）未必有什么直接影響。
因為對于絕大部分客戶來說，功能、效率和價格才是真正的硬指標，而且光是能找到能同時滿足這三點的產(chǎn)品就很不容易了！
然而，我最近剛開始參與一個 B 端項目，為了做競品調研，我試用了國內外十多款產(chǎn)品（國外為主）。
做完之后，我深刻反思了自己過去對「B 端產(chǎn)品 C 端化」的理解還是太膚淺。
其實 B 端產(chǎn)品 C 端化，并不是因為傳統(tǒng)的 B 端產(chǎn)品沒 C 端好用（不是這么比的）。
其實關鍵還是獲客模式的轉變。
傳統(tǒng)的 B 端產(chǎn)品是銷售驅動，銷售人員通過電話、上門拜訪等形式促使客戶下單。
一旦成功賣出，只要后續(xù)的服務不太差，客戶就沒必要更換遷移。
現(xiàn)在 B 端市場越來越大、行業(yè)信息越來越透明、客戶的判斷能力越來越強，傳統(tǒng)銷售模式開始變?yōu)榛ヂ?lián)網(wǎng)營銷。
B 端產(chǎn)品在網(wǎng)上發(fā)布信息并投放廣告，吸引客戶自己前來試用并購買，只需提供少量客服人員即可。
這與以往的 B 端業(yè)務模式有很大不同，所以就需要變革。
所謂「B 端產(chǎn)品 C 端化」，表面上是學習 C 端的用戶體驗，背后的真正意圖是要學習人家 C 端的互聯(lián)網(wǎng)獲客能力。
我發(fā)現(xiàn) B 端產(chǎn)品的 C 端化程度，和他們的互聯(lián)網(wǎng)廣告投放力度成正相關。
例如我在油管上經(jīng)常受到 Monday、GoDaddy 這兩款 B 端產(chǎn)品的輪番轟炸。
先不說好不好用（畢竟我也不是目標客戶），我發(fā)現(xiàn)他們用起來真的很有「C 端感」，和傳統(tǒng)的 B 端產(chǎn)品果真不一樣。
倒不是什么“輕量化、趣味性和人文關懷”，而是因為他們在我打開網(wǎng)站的那一刻，就開始不斷吸引我探索使用。
我拿 GitLab 和 Monday 的官網(wǎng)首頁對比一下，也許你就能感受到了：
前者像是一板一眼的「老實人」，后者則像是對你笑瞇瞇的「綠茶妹」，高下立判。
“輕量化、趣味性和人文關懷”這些東西，并不足以打動用戶試用和購買，頂多只能算是「低段位」手段。
只有「高段位」手段，才能讓用戶不自主地地被吸引，心甘情愿地掏錢。
可是要做到「高段位」真的很不容易，我今天就總結幾個技巧吧～
1. 直接坦誠
遇到兩個陌生人：一個打官腔又遮遮掩掩的；另一個說話友善接地氣又誠實，你會更喜歡哪個？
可能大多數(shù)人跟我一樣會喜歡第二個。
C 端化做得好的 B 端產(chǎn)品，會把自己的產(chǎn)品預覽圖直接放到首頁供人觀看，而不是搞一張概念圖外加一堆高大上的廣告詞。
前面放過的那張案例，這里也可能拿來用：
GitLab 的官網(wǎng)畫了一些很抽象的概念圖，寫了一些很抽象的描述，給人感覺很模糊。
Monday 的官網(wǎng)明確把自己的業(yè)務類型列了出來供用戶選擇，還把每種業(yè)務對應的圖標和展示方式畫了出來，感覺很明確清晰。
2. 有效互動
遇到兩個健身房銷售：一個上來就說一個勁地介紹服務；另一個則先確認你平時的健身習慣，再根據(jù)你的情況介紹服務，你會更愿意聽誰說話？
我肯定更喜歡第二個。
C 端化做得好的 B 端產(chǎn)品，不是簡單地展示信息，而是先了解用戶，再根據(jù)用戶的需求提供不同的信息甚至服務。
Zendesk 的網(wǎng)站，會把自己的功能列出來給用戶，給的圖像和描述又很抽象，毫無互動感。
而 Asana 會讓用戶選擇自己需要的功能，并直接給出具體案例的界面展示圖。
3. 降低門檻
遇到商場逛街時遇到兩個陌生餐館，一家在二樓；另一家在一樓，你會愿意嘗試哪家？
肯定是第二個。
很多 C 端化做的好的 B 端產(chǎn)品，會把表單用彈窗的樣式放在產(chǎn)品上面，讓用戶感覺只要填寫完就能立即使用了。
比起 Trello，Smartsheet 只是在表單展示了一下產(chǎn)品內部，就讓用戶感覺門檻低了好多。
即便 Smartsheet 的新用戶后面發(fā)現(xiàn)背后那張圖真的這是一張圖而已，要填的一點不少，但這時都已經(jīng)快填完了……
4. 循序漸進
兩家陌生的兩家餐廳都把菜單擺出來了，一家的菜單寫得密密麻麻；另一家的菜單雖然菜品不多，但是推薦菜品和菜式分類很清晰，你會更愿意嘗試哪家？
我相信很多人都會更愿意嘗試后者。
C 端化做得好的 B 端產(chǎn)品，不會太在意自己的產(chǎn)品是不是看起來功能齊全，而是更在意用戶是否能夠很好的理解產(chǎn)品，不要造成心理負擔。
上圖來源：Figma 這些交互細節(jié)，B 端設計也值得借鑒
Sketch 和 Figma 的屬性面板在功能上其實沒有很大的差異，但是后者看起來卻清晰簡潔許多，對新用戶更加友好。
B 端產(chǎn)品 C 端化這個理念其實很好，但如果被誤以為只是向 C 端學習用戶體驗那就可惜了。
用戶體驗只是手段，關鍵目的是在沒有銷售人員參與的情況下，如何從互聯(lián)網(wǎng)獲客。
這次的經(jīng)驗的提醒我，以后如果再看到一些很火概念，不要簡單的從表面理解，而是要站在決策者的角度，多思考背后的真實意圖。
轉載請注明：優(yōu)設網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
Cs界面設計之二：如何區(qū)別B端與C端的產(chǎn)品設計差異？我總結了26條對比！
藍藍設計的小編 http://m.yvirxh.cn
