App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
即時通訊界面設計 表達其物流行業的專業性和商務性，標識整體精致細膩，令人印象深刻，在界面設計時以厚重，大氣的配色方案和視覺風格提升整個品牌的含義。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
無論是在生活場景、工作場景還是學習場景中，視頻播放的普及度都已經非常之高，為我們的多元化場景帶來便利。視頻功能在產品中的體現也已經成為基礎功能，在設計層面的不斷優化對于產品設計師來說至關重要。
本文特意結合目前比較熱門的產品，為大家梳理了涉及到視頻功能的產品在設計上面的解決方案。希望這些優秀的設計思考可以帶給產品設計師更多的靈感，不斷探索和發現優秀的設計解決方案。
影視類產品在不斷優化用戶體驗的時候，為了滿足用戶在一些特殊場景下的使用體驗，推出了后臺播放的附加功能。比如用戶在步行中、騎行中，或者處于不便于觀看視頻的場景中，可以采用后臺播放。視頻將會以音頻的形式后臺播放，讓用戶從視聽體驗轉為音頻體驗，也是一種變相的解決方案。
思考：考慮到用戶的多場景需求，而不只是底層的需求。
很多用戶在睡覺前都會習慣刷一下視頻，有時候經常會忘記關閉視頻就入睡了，第二天起來發現手機沒電啦！定時關閉功能的出現解決了用戶這一痛點，可以根據自己入睡的大致時間評估，設置定時關閉的時間段。人性化的功能設置在細微之處考慮到了用戶痛點，圖標設計也是結合場景化表現，提高用戶對于產品的操作體驗。
思考：幫助用戶培養習慣和解決用戶可能會出現的失誤，以情感化的方式拉近與用戶之間的親和力。
為了考慮到特殊人群的使用體驗，讓視頻播放的效果符合不同用戶的視覺感知，色覺障礙優化的功能設置人性化的呈現了解決方案。該功能針對色覺障礙用戶的臨床表現，優化視頻色彩來提高畫面辨識度。
思考：考慮到特殊人群的使用體驗，才能把產品的體驗延伸到更多的場景。
隨著短視頻的盛行，利用空余時間刷視頻成為用戶消磨時間的方式之一。對于視頻上傳用戶來說，根據視頻拍攝的題材會選擇適合的比例，有些題材適合橫屏比例。
抖音作為短視頻平臺積累了龐大的用戶量，視頻的種類和播放比例也是豐富多樣。為了滿足用戶的播放需求，設計了“全屏觀看”的切換按鈕，方便用戶觀看寬屏視頻的需求。觀看體驗的升級帶給用戶人性化的體驗，也方便更多比例視頻的完美呈現。
思考：為用戶提供匹配當前內容的方式，而不要局限在內容創造本身的匹配度上。
在刷短視頻的時候，刷到自己感興趣的內容想要繼續看完續集，以往的做法是進入作者主頁挨個尋找，視頻多了找起來很慢，用戶體驗很差。短視頻平臺提供了“剛剛看過”的快速定位操作，點擊之后會直接定位到剛剛看過的視頻位置，方便用戶觀看續集。人性化的功能設置節省了用戶的操作成本，方便一些持續更新的視頻內容更好的進行觀看體驗。
思考：節省用戶的時間就是提高自己的認可度，培養用戶的依賴度。
在觀看一些兒歌、短片視頻合集的時候，右側的視頻目錄區采用名稱和視頻截圖預覽呈現，直觀的預覽效果增加點擊觀看的欲望。小朋友在刷兒歌視頻的時候，降低了學習成本，切換視頻也更加便利。
思考：降低用戶的理解成本，才能獲得用戶的青睞。
情感化的設計可以拉進與用戶之間的親和力，體現產品人性化的一面。在特定的節假日或者特殊時間內，為了增強氛圍，視頻播放暫停的設計上面設計師也投入了很多小心思。比如在跨年期間，雙擊屏幕暫停時會出現綻放的煙花效果和 2021 年的絢麗文字，氛圍的營造帶動了跨年的氛圍，帶給用戶更加溫馨的感官體驗。
思考：提高用戶體驗的設計，就存在于細微之處的變化中。
有時候我們沒有明確的觀影目標，打開一個視頻后還想繼續尋找更好的影片，又怕當前影片有看點?！爱嬛挟嫛惫δ芙鉀Q了這個痛點，觀看視頻時點擊“畫中畫”當前播放視頻縮小窗口顯示在側邊，用戶還可以繼續瀏覽新的內容，篩選更多可能性。
思考：在用戶沒有明確目標的時候，帶給用戶多種選擇性。
將影片投到電視觀看是家庭觀影的最佳選擇，讓觀影體驗不局限于方寸之間的設備上，還能與家人朋友一起觀看影片。如果家里有小孩子需要看動畫片之類的，除了投屏電視給他們觀看以外，自己還能繼續在 App 上觀看別的影片，雙向選擇提高了用戶的多場景需求體驗。
思考：特殊場景下不僅需要滿足用戶的需求，也要考慮用戶可能會出現的周邊困境。
各種手勢的研究是產品設計師探索的方向，在刷短視頻的時候，向左滑動除了進入作者主頁以外，也有產品選擇曝光作者更多視頻作品。更多視頻的曝光不僅方便用戶觀看續集，還能通過更多視頻的觀看建立對作者的好感度，讓用戶充分的判斷是否需要關注作者。該交互形式給用戶提供了更多的判斷權，也提高了作者更多視頻作品的曝光度。
思考：通過交互形式的改變給用戶帶來便利，也給作者帶來曝光度，平臺也提高了使用體驗，這是最穩固的體驗三角形。
在視頻播放中的手勢交互為用戶的操作提供了便利，短視頻中的單擊暫停/播放、雙擊點贊、長按浮層、左右滑動也有對應的內容變化。目前運用比較多的是單手操作的手勢，同樣的手勢在不同的產品中也激活不一樣的功能操作，比如影視 App 中通常是雙擊暫停/播放。作為產品設計師我們在交互設計的時候，手勢的變化在視頻功能中的運用可以深入探索。
思考：手勢交互的運用可以在原本的基礎上實現更多可能性。
在很多自媒體上大家經常會看到很多影視片段的 GIF 動畫，不僅增加了趣味性，也間接的傳播了視頻內容。很多視頻類產品為了給用戶提供自動生成短視頻和 GIF 動畫的便利，提供了一鍵生成的操作，不僅可以選擇內容區間，還可以自由控制時間。便利的操作降低了用戶的學習成本，還增加了用戶分享的趣味性。
思考：幫助用戶降低在外部平臺上分享內容的制作成本，也是提高自身內容被分享的概率。
截圖屬于手機系統自帶的功能，通過交互路徑操作或者設備按鍵快捷操作完成。而視頻播放器自帶的快照功能更便利，一鍵操作隨時定格畫面，還能快捷分享或者制作表情，非常的便利。
思考：只有把操作的時間和難度降低到臨界值，才能讓用戶逐漸形成依賴。
在觀看影片的時候，針對一些故事情節比較長的影片，我們可以選擇觀看指定角色的片段，或者選擇倍速播放等來實現個性化的觀影選擇。忙碌的生活讓我們少了一些觀影耐心，這也是短視頻備受喜歡的因素之一，片段的播放需求滿足了這部分用戶的需求。
思考：個性化的功能服務可以培養用戶對產品的忠誠度，這是形成種子用戶的關鍵。
由于移動端設備的大小限制，如何在有限的屏幕內進行延展設計，是產品設計師探索的方向。分屏設計是在保持當前視頻播放的前提下將屏幕劃分為更多模塊，不影響內容進展的情況下進行更多功能操作。
比如愛奇藝觀看視頻時的夸夸功能操作，在操作功能的同時不影響用戶的觀影體驗，增加用戶觀影時的互動性。
思考：有限空間內的更多可能性設計，是設計師不斷探索的過程，盡顯方寸之間的設計能力。
還有更多關于視頻功能在 UI 場景中的運用案例，這里僅拋磚引玉的列舉了部分設計分析，更多分析我們下期繼續。
針對單一功能的體驗總結，是分析和積累同一功能不同設計解決方案的形式，輔助增加設計需求中的效率發揮。產品體驗日記總結的不同維度帶來不同的深度思考，希望這個維度的總結起到拋磚引玉的作用，帶給大家更多的思考方向和總結思路。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：黑馬青年
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
很多設計師包括我在內對按鈕尺寸有著頗多困惑。為什么很多產品甚至蘋果本身并沒有遵循 44pt 的標準規范？為什么有些場景下的 CTA 按鈕那么??？按鈕的最佳尺寸到底是多少？按鈕規范背后到底是什么樣的科學依據？這些依據可否量化？
emmmm，如果你和我一樣有著這些困惑，本篇文章應該可以給你很多啟發。
按鈕的尺寸具體影響到的依舊是視覺和交互的兩種能力。
視覺能力上很好理解。當一個元素尺寸越大，人眼就越容易抓捕到這個元素。所以那些越重要的東西，往往會給予更大的尺寸來強制用戶注意到它，這也可以解釋為什么甲方總喜歡不停地在背后指指點點嫌棄元素太小，就是因為這些元素對他們來說非常重要，只是他們沒有我們那么專業，知道強調一個東西的手法不僅僅是放大一種策略。
因此，相對較大的按鈕尺寸從視覺上，可以迅速捕獲用戶的注意力，對點擊行為是有益的。
而在交互能力上，涉及到的依然是前篇提到的菲茨定律——目標尺寸越大，移動至目標所花費的時間就越短。所以，較大的按鈕尺寸可以降低用戶交互的交互成本，使得目標更加”易點“，對點擊行為同樣是有益的。
但是，按鈕尺寸并非越大越好，一方面是避免視覺上的失衡，另一方面也會受到界面空間限制、以及場景差異等因素的影響。
我們先來看下 iOS 的。蘋果規定的最小點擊區域是 44pt，這意味著一旦點擊區域低于 44pt，將可能會出現點擊失準的情況。當然，一些控件（標簽欄圖標、文字鏈）可以在視覺表現上只有 24pt*24pt，但是會在周圍加入額外的填充使其達到 44pt。
但是，在實際的 iOS 原生產品界面中，很多按鈕并未嚴格執行 44pt 這個數值。小于 44pt 的按鈕比比皆是，比如信息頁的發送、App Store 的獲取、購買浮層的確認、添加 siri、導航類右上角的工具型按鈕，它們的點擊區域為按鈕本身，但是均未達到 44pt。況且其中有一些還是非常典型的 CTA 按鈕，比如 App Store 產品詳情頁中的獲取按鈕，它的高度僅僅是 27pt。
而 Android 中的按鈕建議尺寸是 56dp，但是和 iOS 一樣存在著大量低于這個尺寸的情況。其中不乏那些 CTA 按鈕。
這些情況的發生其實也很好理解，每個按鈕所對應的用戶場景、業務訴求不同，因此并不能一招鮮用一個尺寸吃遍所有場景。但是，有沒有一些科學的依據來可量化地解釋按鈕尺寸對點擊的影響？
著名產品設計師斯科特·赫爾夫就曾在他的文章《Using science to make truly tappable user interfaces》中提過，iOS9 的 Apple Music 在鎖屏界面下的按鈕過小，經常會發生無法準確點擊的情況，他需要集中精力精確得點擊才能完成任務。
不過蘋果在 iOS10 之后，鎖屏界面下的三個按鈕、乃至進度、音量的控制球全部被顯著地增大。這使得歌曲點擊操作的錯誤率明顯下降，不論是在什么場景下（你懂得，跑步、擠地鐵這些不可控的場景下總是會有聽歌的需求）都可以輕松地點擊。
而他為了解釋按鈕尺寸所帶來的變化，引入了歷史上著名的兩個實驗。
第一次實驗
2006 年，芬蘭 Oulu 大學，Maryland 大學和 Parck 學院的研究人員組成一個研究小組。他們的研究目標是，確定在觸摸屏幕上單手使用最容易的按鈕尺寸。
他們進行了兩組不同場景的實驗。第一組讓受試者執行一次性的任務，點擊一個 CTA 按鈕、復選框或者多選框；第二組讓受試者執行多次連續的任務，比如輸入電話號碼。并且在實驗期間，研究人員測試了每一種場景下按鈕的尺寸。最終的實驗結果表明，單個任務下，按鈕尺寸小于 9.2mm 后錯誤率顯著增加，而多次連續任務下，按鈕尺寸小于 9.6mm 后的錯誤率顯著增加。
特別的是，對于多次連續任務，9.6mm 到 11.5mm 之間的錯誤率基本不變。
看到這，來稍微總結一下，9.2mm 和 9.6mm 是兩個關鍵的尺寸節點。在單次任務和多次連續任務下，按鈕尺寸分別小于 9.2mm 和 9.6mm 會導致錯誤率的攀升。這個結果和 MIT Touch Lab 研究得出的最佳熱區尺寸 10mm 很接近。
第二次實驗
當然，這還不算完。5 年后，德國兩所大學的研究人員又進行了一項類似的研究，目的是確定觸摸屏幕按鈕的最佳大小。
他們的實驗方法相對就很潮了。他們專門開發了一款安卓游戲，游戲玩法也很無腦：玩家必須要精準地點擊到屏幕中任何地方飄動的任意尺寸的圓圈，游戲才能繼續。并且速度越快，得分也就越高。
這款游戲在上線之后被下載了 10w 次，并且悄咪咪得暗中記錄了用戶所有的點擊行為，記錄總量約為 1.2 億次。
最后根據統計分析，得出了錯誤率和圓圈尺寸的圖表關系。你可以看到，和 5 年前的實驗同樣，呈現類似的指數關系。研究人員根據圖表發現：
在圓圈尺寸小于 12mm 后，錯誤率開始逐步提升。在尺寸小于 8mm 之后，錯誤率高達 40%以上。并且研究還發現，在圓圈尺寸超過 12mm 之后，玩家的正確率并沒有得到顯著的提升。
由上述的兩個實驗，我們可以概括出一些有用的結論。
那么，按鈕的最佳尺寸到底是多少呢？
斯科特將實驗得出的關鍵尺寸與蘋果、谷歌和微軟三大規范進行結合，發現了一些有意思的現象——
可以看到 Android 和微軟的尺寸，基本對應到了這兩項實驗得出的關鍵尺寸。
最后，再來看下開頭 iTunes 的鎖屏界面的按鈕?？梢钥吹綇?iOS9 到 iOS10，蘋果將按鈕可點范圍由 7mm（44pt）擴大至 12mm（82pt），結果也正好符合了微軟的規范。看到這里，你肯定更困惑了——按鈕的最佳尺寸到底是多少？
其實，并不存在什么按鈕的最佳尺寸。
不論是 iOS 的 44pt，Android 的 56dp，還是微軟的 82pt，都需要具體情況具體分析。界面布局、用戶場景、業務訴求等等，都屬于按鈕尺寸的影響因素。
比如下面這些 iOS 端產品的 CTA 按鈕，它們的尺寸最小到 26pt，最大到 87pt，而且每個產品內部的 CTA 按鈕也存在差異。你能說出這些按鈕哪一個是最佳尺寸嗎?
當然，我們起碼可以去界定一些相對可控的范圍。
這里我簡單根據斯科特文章中的結論，結合市面主流產品的情況劃分出按鈕的幾類尺寸：
1. 常規場景、局部模塊
比如 App Store 的產品詳情頁的獲取，知乎中個人主頁的關注，都屬于當前頁的局部模塊，點擊之后通常是狀態的變化或者出現新的彈層。這些按鈕的尺寸我建議控制在 28pt~40pt 之間。
2. 常規場景、全局模塊、強業務屬性
比如微信個人頁的添加好友、各大電商商品詳情頁的加購、登錄注冊頁的登錄注冊等等。這些頁面的 CTA 按鈕隸屬于頁面全局，所以可以給它極高的權重、甚至全局吸底展示（如詳情頁），以更快地促進點擊。通常，這類按鈕在常規場景下具備了最大尺寸。我個人的建議是保持在 40pt~60pt 之間。
3. 不可控場景
不可控場景的意思就是，用戶點擊按鈕時所處的場景可能比較特殊，并且這種特殊的場景很可能給用戶帶來一系列無法掌控的風險。
比如 keep 在跑步場景下的按鈕，就需要充分考慮到跑步時不穩定的狀態，如果按鈕和常規場景一樣，那很容易發生無法準確點擊的情況，增加意外事故發生的概率；包括來電場景、地圖導航場景、快遞取件場景等等，都屬于不可控的場景。各位可以自己代入腦補一下，這些場景中無法準確點擊時容易產生什么樣的后果。
所以這些場景中的按鈕就得夠大，以盡可能覆蓋到那些極端的不可控情況。我個人的建議保持在 60pt~90pt 之間。
當然，這僅僅是很粗略的參考區間值，如何結合現有業務訴求、用戶場景需求等因素去合理地界定才是重中之重。如果為了追求最佳效果或者尺寸的一致性，反而有些舍本逐末的意思。
其實從知乎去年 10 周年的大改版可以看到一些有意思的細節。很多按鈕的高度比以往更高了。比如鹽選會員的續費按鈕，由之前的 36pt 提升到了 40pt。
個人主頁的關注按鈕也由 28pt 提升到了 32pt，你仔細看的話，按鈕的寬度也發生了變化，從之前的 90pt 提升到了 100pt。
邀請回答界面中的寫回答按鈕，也由原本的文字鏈，提升到了實心按鈕，高度則直接復用了關注按鈕的尺寸——32pt。哦，不好意思，這應該是按鈕設計形式上的改變。
總之一句話，知乎這次的改版，CTA 按鈕的尺寸更大了。我們從尺寸對點擊行為的影響可以推導出，這次改版背后更為明確的業務目標——促進UGC內容生產、促進關系鏈沉淀（一旦沉淀了復雜的關系鏈，用戶也就更難以離開平臺）以及會員付費轉化。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：轉行人的設計筆記
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
合理的移動導航設計能夠盡可能地減少摩擦，引導用戶去他們要去的地方。
這篇文章匯總了移動端導航設計最常見的樣式、要注意的設計準則以及優秀的案例分析，一起來系統性地掌握這些知識～
簡單來說，導航是用戶從 A 點到 B 點的方式，是他們發現設計點并與產品交互的過程。
可能很多用戶認為導航的目標是“在盡可能短的時間內讓用戶從 A 到 B”，但時間短只屬于操作結果，這個結果需要依靠合理且簡單的設計才能實現。
△ 一個頁面中可以存在多種導航。例如在油管首頁，有頂部導航欄、篩選器導航和底部導航，這些導航相互搭配為產品助力。
1. 漢堡菜單
圍繞漢堡菜單有很多爭論，但存在即合理，在合適的場景下漢堡菜單也能發揮大的作用。
來看一下漢堡菜單具備的優勢：
△ 使用用戶熟悉的設計可以事半功倍。例如美團和餓了么兩個產品有著完全不同的主題色，但外賣點餐流程卻是一樣的，仍然是用戶熟悉的操作，并沒有因為產品的不同而改變點餐流程。
2. 底部導航
底部導航欄通常包含產品中最主要的導航鏈接，用戶只需要簡單的點擊就能直觀地在不同頁面間切換。
△ 幾乎每款產品都缺少不了底部導航欄，它方便用戶單手操作，不需要太費力就能快速訪問產品頁面，提高可用性。
3. 頂部導航
關于頂部導航，可以看之前分享的文章，里面詳細介紹了頂部導航的設計方法。
△ 頂部導航通常包含頁面中最重要的信息，與其他輔助導航結合使用。
4. 卡片式導航
卡片式是一種出色的設計樣式，支持改變各種形狀和大小，并且能展示文本、鏈接或照片等各種元素。
隨著網絡上的內容越來越碎片化和個性化，卡片是在頁面中聚合單個信息的好方式。
△ 為了改進體驗，卡片可以個性化顯示不同的內容。另外卡片很容易適應不同的屏幕尺寸，配合響應性設計。
5. 標簽
標簽往往是在一個大主題下同時支持多個選項，每個選項都轉到不同的界面。
△ 標簽通常用于在同一頁面中的幾個視圖之間切換，展示內容上的差異性。而頂部導航欄有主頁、搜索、收藏夾等多個圖標，代表不同的功能。
6. 基于手勢的導航
基于手勢的導航可以讓用戶在所需方向上快速滑動，來完成特定的操作。
這種樣式的優點在于，即使最沒有經驗的用戶也很容易掌握，因為手勢通常是直觀的。
△ 國外大火的約會產品Tinder以及國內的探探，都使用了基于手勢的導航樣式，為用戶帶來滑動的樂趣。
△ 基于手勢的導航并不是Tinder發明的，但這款產品無疑將這種流行帶給了大眾。經典的向左或向右滑動模式保持了事物的動態性、簡單性和娛樂性。
7. 全屏導航
全屏導航是指將大部分屏幕用于導航操作，能夠很好地將用戶的注意力聚焦到具體的產品細節上。這是一種以連貫的方式提供大量導航的方法，可以立即幫助用戶了解產品的功能。
△ 點擊圖片可以跳轉到全屏大圖導航中，能夠更清晰地查看商品的外觀狀態。
8. 3D touch
最初是由蘋果公司提供給用戶的，這是一種創建導航快捷方式的方法，可以顯示選定的 APP 的一些關鍵操作。
△ 蘋果為手機創造了一種全新的快捷方式，同時提供了強大的可用性。
△ 3D touch另一個用途是內容預覽，在處理內容選項時例如收件箱或文章列表時，這是給用戶提供預覽的好方法。
1. 導航需要直觀明顯
對所有類型的導航來說都是如此。在移動端中由于屏幕空間的縮小和交互成本的增加，導航體驗的好壞會對產品產生很大的影響。
△ 從可用性角度來看，直觀的導航對目標用戶來說至關重要。這意味著需要進行嚴格的測試和大量的研究，可以使用卡片分類或樹狀圖等方法來驗證導航的可用性。
2. 考慮手指的位置
這點對于移動應用來說至關重要，沒有用戶想反復點擊圖標卻沒有反應。
△ 鏈接和按鈕的尺寸需要足夠大，以便大多數用戶在第一次點擊時就能成功點擊。頁面中按鈕的尺寸最小通常保持在10mm。
3. 建立視覺層級避免混亂
小屏幕意味著更容易陷入混亂。即使頁面中有少量的元素，如果元素沒有平衡，用戶仍然會有混亂的感覺。
△ 極簡主義是UI設計的一種特定風格，通過必備的頂部導航欄、留白以及由大小、版式、顏色劃分的視覺層級來規劃頁面內容。
1. Facebook
Facebook 的導航構成比較復雜，融合了多種不同樣式的導航。
△ Facebook主頁包括漢堡菜單、頂部導航欄和底部導航欄。通過這種方式，這家社交媒體巨頭明確的將主要內容與次要內容分隔開。
2. Spotify
Spotif 作為音樂流媒體業務的巨頭，即使對于新用戶來說，頁面的設計也容易理解和探索。
△ 以高度視覺化的形式突出每張卡片背后的關鍵內容，另外底部導航也可以完成繁重的任務指引。
3. App Store
App Store 是使用標簽進行導航的好例證，每個標簽代表了同一內容的不同方面。
△ 在排行榜中，用戶可以瀏覽付費、免費和熱門的標簽頁，從而快速建立一致性和對其他頁面的感知。
4. Telegram
Telegram 可以供任何人使用，漢堡菜單提供了用戶可能需要的所有關鍵導航選項。
△ 每個用戶都能立即找出漢堡菜單，非常容易使用和理解，而且幾乎不占用界面中的寶貴空間。
5. Yelp
yelp 在創建全屏導航體驗時采用了一種稍微不同的方法。
△ Yelp將屏幕劃分為兩個不同的區域，實際上并沒有將整個屏幕專門用于導航選項，而是將頂部用于導航選項，并在底部留下更多的負空間。
6. Trello
頁面中的卡片是拉長的矩形，整齊有序地填滿屏幕空間而不會讓用戶不知所措。
△ 卡片系統很好地代表了Trello簡化復雜工作流程的能力，為用戶帶來整潔和方便。
7. Twitter
同樣使用了多種導航混合的設計樣式。
△ Twitter將導航重點放在底部欄上，涵蓋了整個平臺中四個主要的方面。
沒有高速公路，我們很難便利地在城市間穿梭。同理，如果沒有導航，一款 APP 的使用也會遇到很多麻煩。導航就像高速，不斷在為用戶提供必要的指引！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：Clip設計夾
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
2020年可以說是一個風險年，但更是一個機會年，全球各類資產都出現了大行情機會，市場的投資熱情再次被點燃。借著這股東風，在2020年年尾，我們開始了對公司金融產品的優化改造工作，希望通過改造提升產品的用戶體驗，配合來年的運營活動，提升產品的用戶數和活躍度。改造工作主要為優化開戶流程、提升社區氛圍、完善交易功能三個部分。后續我將通過系列文章對這次優化設計過程中的思考進行分享。
表單作為平臺與用戶聯系最為緊密的一環，良好的表單設計可以帶給用戶流暢自然的用戶體驗，保證用戶情緒的正向增長，而混亂無序的表單則會引起用戶的負面情緒，影響甚至阻礙用戶操作的完成，降低用戶對品牌好感度和信賴度。對于我們這樣的金融產品而言，產品內存在著如開戶表單、出金申請表單、調整杠桿申請表單等形形色色的表單，如何將這些表單整理歸納形成一套完整的表單設計體系，帶給用戶統一、高效且優質的填寫體驗，是我們這次表單優化的主要的任務。
系列文章中關于表單設計部分我將分為上下兩期來向大家分享，體系化表單設計（上期）主要介紹在項目中總結出的表單設計中的方法論，下期則是介紹方法論在我們項目中實際的應用，希望這次的分享能為你今后的表單設計提供思路與參考。
表單在我們工作、生活中的使用由來已久，在還沒有互聯網的年代，表單就已經是人們收集和存儲數據、信息的重要手段，并一直沿用至今。如體檢時填寫的體檢表、入職時填寫的入職登記表、銀行開戶時填寫的開戶表都是使用的這種印刷的紙質表單。它們身上有很多設計可以作為重要的參考，幫助我們優化 UI 中的表單元素。
表單是 UI 界面中最為常見的元素，它通常是用來搜集和呈現一些數據、信息和特定的字段。表單的應用極為廣泛，比如登錄應用時填寫賬號密碼、網上購物時完善訂單信息、OA系統中提交休假審批、修改個人中心信息時……都是在和表單發生互動。
表單的目的、內容、大小等雖然各有不同，但是表單的基本構成元素是相對固定的，在設計過程中，設計師需要合理組織這些元素，幫助用戶在填寫表單時，輕松愉快的完成，表單主要組成部分如下圖。
1.標簽：告訴用戶此處相應的輸入元素是什么
2.輸入區：可交互的輸入區域，根據字段類型使用相應的交互組件
3.占位符：對當前項進行額外的信息描述
4.前置圖標（可選）：描述文本所需的輸入類型和特征
5.后置圖標（可選）：對輸入內容進行控制，如：下拉的展開與收起、清空；
6.幫助（可選）：提供表單內容的注釋或輔助類容，如：說明、注意事項；
7.反饋（可選）：告知用戶當前操作可能或已出現的問題，如：提交成功、錯誤提示、網絡問題；
8.鍵盤（可選）：在文本編輯時需要使用鍵盤，如：設備系統鍵盤、應用內置鍵盤；
9.操作按鈕：操作按鈕是在表單的結尾，如：提交、下一步、清空所有信息。
在如今這個互聯網時代，我們幾乎每天都會接觸到形形色色的表單，作為用戶與產品鏈接的樞紐，表單設計的好壞會直接的影響產品的實際數據表現。好的表單結構清晰，交互合理，用戶能夠高效愉悅的完成表單填寫，為用戶節省了時間，同時也提高了自身產品的轉化。而差的表單往往信息邏輯混亂，填寫效率低，且容易讓人產生挫敗感而中途放棄，在無形中浪費掉了很多潛在商業機會。是什么造成了不同表單之間出現如此大的體驗差異，我們又該如何做才能設計出令用戶愉悅的表單呢？在實際項目過程中，總結出一套適用于移動端表單設計的路徑圖-通過做好五個步驟，設計出令人愉悅的表單。
合理的表單框架選擇是打造用戶友好型表單的基礎，在進行表單設計時，我們首先需要依照表單的使用場景和復雜程度，選用最為恰當的表單框架。確定好表單框架，也就決定了后續設計中表單信息如何組織以及呈現。我們將表單框架劃分為“錄入方式”、“標簽布局”和“按鈕邏輯”三個部分，在表單設計時通過對這三個部分的選用來確定最終的表單框架形態。
按照表單錄入方式的不同我們大體上可以將表單錄入方式分為“單步錄入”、“分步錄入”和“分級錄入”三種，在進行表單設計時需要根據實際情況選擇與使用場景匹配的錄入方式。
單步錄入是表單中最為常見的錄入方式，在一個頁面內呈現所有的錄入項，結構簡單，快速錄入、快速提交，適用于錄入項較少的表單。
相對于PC端而言，移動端手機屏幕尺寸較小，一份在PC端1-2屏就能完全展示的表單在移動端往往需要7-8屏。將一個需要7-8屏才能展示完整的表單放在一個頁面內讓用戶填寫，用戶容易產生抵觸情緒會造成表單完成率的降低。
為了提高用戶填寫效率，減少用戶的抵觸情緒，我們可以將一個冗長的表單拆分成多個步驟，分步錄入。通過拆分成一個個步驟，讓表單信息呈現更為清理有條理，并且能引導用戶逐步填寫完成表單錄入。
當表單處于以下4種場景時選擇建議選用分步錄入模式:
1.表單錄入項過多，在一個頁面內已經不能合理清晰的組織傳遞信息。
2.表單內容的錄入方式存在較大差異，不適宜在一個頁面內進行展示。
3.表單錄入項在業務上存在先后順序，只有先完成上一步字段錄入，才能夠進入下一步。
4.在業務上很重要的表單，為了讓用戶能夠沉浸、快速的完成表單填寫時。
分布錄入模式下步4種步驟導航選擇：
1.文字導航：當表單為2步錄入表單時，我們展示步驟條帶給用戶的引導意義并不大，通常這種情況下我們會選擇省略掉步驟條，只展示當前步驟名稱，給予用戶提示。
2.步驟條導航：當表單錄入步驟為3-4步時，我們可以在頁面頂部放置步驟條顯示所有步驟內容標題，用戶通過步驟條能夠對表單有一個清晰的預期。
3.雙層步驟導航：當表單錄入步驟大于4步時，受限于移動端屏幕尺寸，橫向上不夠容納步驟數太多的步驟條，這時我們可以其中某些關聯的步驟歸納為一個大步驟，形成雙層步驟導航。
4.進度條導航：當表單錄入步驟大于4步，又擔心雙層導航給用戶傳遞出表單極端復雜的印象，勸退用戶。這時我們可以使用進度條導航，用百分比進度條來展現表單填寫進度。
分級錄入大家可能相對較為陌生，分級錄入在B端產品中會有相對多見，一般運用于有明顯上下級關系的表單，如項目管理工具中新建任務表單，在新建任務的同時還能新建下屬子任務。又如客戶關系管理軟件中，新建訂單的同時新建下屬的訂單明細。我們可以將使用分級錄入模式的表單視為兩張表單，子表單添加的數據會回顯到主表單上。
標簽用于提示用戶需要輸入的是什么信息。合理的標簽布局結構，能夠提高用戶的閱讀效率，還能降低信息填寫時的錯誤率。常見的標簽布局形式有：左右結構、上下結構和浮動結構。不同的標簽布局都有各自的優點和缺點，我們需要根據項目實際情況來選擇最合適的標簽形式。
左右結構是目前最為常見的標簽布局形式，左右結構中標簽和輸入區域在一行內排布，其中標簽位于左側且居左對齊，輸入項位于右側有居左和居右對齊兩種對齊方式。
優點：節省縱向頁面空間，在移動端有限的頁面空間內能展示更多的錄入項。
缺點：標簽的長度無法確定，視覺上顯得參差不齊，表單的信息瀏覽和填寫效率一般，標簽橫向展示空間有限，對于多語言適配場景不太友好。
上下結構也是我們能夠經常在表單中見到的標簽布局形式，上下結構中標簽位于上方且居左對齊，輸入區域位于下方也為居左對齊。
優點：用戶的視覺瀏覽路徑相對于左右結構來說較短，擁有較強的信息瀏覽和填寫效率，標簽橫向展示空間充足，對于多語言適配場景友好。
缺點：占據縱向空間多，一屏內能展示的錄入項較少。
Material Design中文本錄入的標簽形式就是選用的浮動結構，在浮動結構中標簽和提示文字合二為一，正常狀態下，標簽位于輸入區域內部原本提示文案的位置，當用戶輸入時，內部的標簽就會上移為文本輸入讓出空間，完成填寫后標簽和輸入文案上下排列展示。
優點：結構簡單，視覺干擾少，信息瀏覽和填寫效率高。
缺點：填寫項過多時，表單信息傳遞不夠清晰。
內部結構相對于前面3種結構較為少見，比較長出現在登錄場景，在浮動結構中標簽和提示文字合二為一，正常狀態下，標簽位于輸入區域內部原本提示文案的位置，當用戶輸入時，內部的標簽就會消失，完成填寫后只展示輸入文案。
優點：結構簡單，視覺干擾少，聚焦于操作。
缺點：只適用于如登錄等錄入項極少的場景，一旦錄入項變多，由于錄入后不展示標簽，將導致用戶后續很難判斷輸入的信息是否準確。
按鈕作為表單的重要組成部分之一，合理的按鈕邏輯能夠為用戶順暢完成表單填寫提供幫助，表單的按鈕邏輯主要由按鈕的位置和按鈕的點亮邏輯兩部分組成。
按鈕在頁面中的位置情況主要有以下3種：
1.頂部按鈕：以文字的形式固定在頂部導航欄的右側，頂部按鈕尺寸較小，因為它所占空間有限，因此在操作上相對來說不便于點擊。所以這類頂部按鈕更適用于「編輯頁面」，需要用戶謹慎操作。
2.表單底部：按鈕跟隨表單放置于表單的最下方，根據表單內容縱向空間的大小而上下移動。因為表單內容較多時，容易下沉過多而導致按鈕不可見，所以將按鈕放置于表單底部更適用于當表單錄入項較少不足半屏的場景。
3.設備底部：操作按鈕常駐在設備底部展示，適用于表單錄入項過多的情況，在表單設計時可以盡量將必填項放置在表單前面，用戶填完必填項后就可以點擊操作按鈕提交或者進入下一步，而不用滑動到表單底部再進行操作。
1.當表單錄入項較少時，且有明確預期按鈕何時可用，可以先置灰主按鈕，完成必填項填寫后再點亮主按鈕。
2.當表單錄入項較多時，且用戶不清楚為什么按鈕不可以用，此時按鈕可以常亮，并在用戶點擊時給予反饋，告知錯誤原因。
在確定好表單框架以后，對于表單內容信息的進行有效的組織也尤為重要，特別是對于一些結構復雜、錄入項多的表單，如果不對信息進行組織，很容易顯得繁雜混亂，容易讓用戶在一開始就產生抵觸的情緒，甚至選擇放棄。那么如何合理有層次的組織信息呢？
我們在設計表單時潛意識里都想要從用戶那里獲取到更多的信息，表單中因此出現很多必要性較低的錄入項，表單也因此變得冗長，讓人第一眼就生出「好多信息需要填，好麻煩」的沉重感，在填寫表單之前就萌生退意。我們在進行表單設計時需要保持克制，聚焦于表單的核心任務，讓表單盡量短而美。那么我們要如何為表單減負，可以嘗試以下方法。
表單中每多一個錄入項需要填寫，都有可能會失去一部分用戶好感度甚至流失一部分用戶。在設計時我們需要判斷某個字段信息對于用戶來說是否有必要在表單中進行填寫，盡可能的刪減掉額外的無用字段。例如注冊表單，如讓用戶使用郵箱注冊，那么用戶的姓名字段是否是注冊的必選項？如果不是必選項是否可以在之后的信息完善中進行填寫。
在表單中時有一些信息他們本身緊密相關，我們完全可以視情況將其合并為一個錄入項，來減少不必要的錄入操作，達到簡化表單，提升錄入效率的目的。合并錄入項要結合實際的使用場景以真實的提升表單體驗為目的，而不是一味的追求表單的最簡化。
根據用戶使用數據，適當將使用頻次不高、或者提供給專業用戶的高級表單項隱藏起來。例如一份表單中有一個填寫項，90%的用戶都不需要填寫，那么默認收起。保持表單的簡潔，讓絕大多數用戶快速完成，避免大量的表單給用戶的焦慮，而又滿足了小眾用戶的需求。
根據沉沒成本的定義：人們在做決策時，受到了自己過去所投入的時間、金錢、精力等因素的干擾，對于先前付出了投資的事情有更強的忠誠度和繼續投資的意愿。進行流程設計時也可以遵循這個原理，將容易完成的表單放在前面，這樣做有3個好處：
1.簡單的表單更容易激起用戶的填寫欲望，用戶會迫不及待地去完成。相反，用戶一開始就看到過于復雜的表單，很容易被嚇到，從而放棄整個任務。
2.用戶通過完成簡單的表單，可以增加自信心，即使后面的表單變復雜了，用戶也更有耐心去完成。
3.當用戶將前面簡單的表單完成后，放棄整個表單的機會成本就變高了，即使后面碰到較難的任務，用戶放棄的幾率也會降低。
當我們我們設計的表單字段內容較多時，需要合理的對字段信息進行分組，這樣整體看起來更加有組織性。接近性（格式塔原理）原則告訴我們： 相互靠近的物體被認為比相互距離較遠的物體更有關聯性，這樣能使設計界面層次有序，視覺清晰，減少視覺噪音。分組時需要注意：
1.內容屬性相近或有關聯性的放在一組。
2.根據信息的重要性及難易程度排列分組，將選填的表單內容靠后。
在表單錄入設計階段，我們需要明確認識到一點，用戶在面對一份表單時往往沒有我們想象中的那么有耐心，復雜繁瑣的錄入操作可能會直接勸退用戶。我們需要做的就是化繁為簡，思考如何給用戶減負，讓用戶簡單高效的完成表單錄入。表單錄入操作提效有一些切實可行的方法，下面請我將一一向分享。
對于用戶而言，填寫信息永遠都不是一件有趣的事情，在對用戶足夠了解的前提下，我們可以選擇為表單中的部分錄入項提前設置合理的默認值，節省用戶的操作時間。默認值的設置不是一個隨性發揮的過程，而是基于用戶行為和數據的理性判斷，并且也不是每個字段都適合設定默認值。關于如何設置合理的默認值，什么字段適合設定默認值，下面幾點可供大家參考：
在一些業務場景，會使用到用戶之前在其它表單中已經錄入的信息，此時在填寫新表單時，可以默認帶入之前的數據。
如果用戶正在填寫的內容有相關的關聯數據，可以默認帶入。如我們在填寫訂單時可以默認帶入該訂單關聯的商品基礎信息。
基于移動端設備的能力，我們可以在用戶開放權限的情況下獲取一定的用戶信息（位置信息、電話區號、運動數據等），在特定情況下默認填寫，如滴滴通過GPS定位自動幫用戶填入上車位置。
像電話區號、證件類型、國籍等用戶錄入結果相對固定的字段，可以根據情況提設置合理的默認值。
相較于PC端而言，移動端設備屏幕尺寸較小，虛擬按鍵的輸入效率遠不及實體鍵盤，在移動端手動輸入的成本較高。因此，為了打造便捷優雅的操作體驗，移動端表單需要盡量減少用戶的手動輸入。以下方法可以減少手動輸入。
聯想輸入是給予用戶輸入字段的自動補全功能，用戶少量輸入后進行選擇。錄入方式由原來的輸入變成半輸入后選擇，減少用戶的輸入成本，提高用戶操作效率。
對于表單填寫過程中可以固化選擇的信息，應讓用戶進行選擇操作以代替手動輸入，盡可能地讓用戶減少輸入成本。
一份用戶可能會多次填寫的表單，我們可以提供用戶的歷史輸入項供其選擇，如滴滴的打車頁面會將我的常用目的地放置在目的地輸入框的旁邊供我快速錄入。
一些新型的交互組件的使用能夠簡化信息錄入的操作，例如滑塊組件等。
在填寫表單時如果填寫項需要頻繁的頁面跳轉會使得整體的填寫效率變低，增加用戶的操作成本。在進行表單設計時應盡量規避這種頻繁的頁面跳轉，選用更流暢靈活的交互方式。
在網頁端表單設計中，用戶在表單填寫中需要對選項進行選擇時，常用的交互形式是在選擇器的下拉列表中進行選項的二次點擊。而在移動端設計中，觸發選擇器后的二次點擊會增加用戶的填寫成本。所以在設計時，當選項少于8時，在表單中直接顯示所有可選項，當選項超出過多時則在列表浮層中進行選擇。
在表單填寫中我們期望用戶保持專注，盡量避免產生引導用戶離開當前頁面的填寫交互，這種交互跳轉很容易打斷用戶固有的行為軌跡。因此運用浮層、彈窗等交互來完成輔助信息的采集是我們較為推崇的交互形式。
對于一些標準證件類信息的錄入，可以通過OCR識別文件內容。當用戶上傳圖片后，運用圖像識別技術提取關鍵信息并自動填入結果。值得注意的是，如果圖片不清晰或存在水印，將大大降低識別準確度。此時應提供修正渠道，讓用戶可以逐一校對并修改文本內容。
短信驗證碼升級方案。直連三大運營商，一步校驗手機號與當前SIM卡號一致性。優化注冊/登錄/支付等場景驗證流程，有效提升拉新轉化率和用戶留存率。不做數據加工與號碼精準營銷，保護用戶隱私。
為了避免讓用戶頻繁的跳入跳出相同類型的輸入項，首先整合表單的信息字段，將同類型的字段進行合并，同時結合輸入控件，設計聯動式組件，讓用戶在表單輸入時更加高效。
設計不是簡單的元素拼湊，深入下去，有很多細節需要推敲，細節應該是含蓄的，包含在整體之內。好的細節設計不容易被用戶的眼睛直接發現，但是會讓用戶與產品的交互過程變得通順、舒適，概括來說就是潤物細無聲。對應到表單設計上，我們需要通過表單設計中的細節把控，讓表單錄入這件事變得簡單、高效。
當表單中同時出現必填項和選填項時我們需要對其做出區分，避免用戶不知道哪些字段必須填寫、哪些字段可以選擇性填寫。沿用通用符號習慣，在表單中我們往往使用 * 號來標記必填項。但是當表單中的必填項多于選填項時，大量的 * 號會增加用戶的認知負擔，面對這種情況，我們可以使用暗提示來標記選填項幫助用戶識別。
如電話號碼、銀行卡號這類有數字組合規律的號碼字段，我們可以沿用它們在線下的數字組合規律，通過空格對號碼字段進行劃分，幫助用戶校驗和閱讀。
出于保護用戶賬號安全考量，我們在進行密碼輸入時通常使用隱暗文字的方式來保護用戶賬戶安全，但是暗文字的顯示方式會讓用戶無法確認密碼信息。因此我們可以在輸入時，讓輸入字段短暫顯示，保持1秒然后再轉變為暗文字，這樣既可以讓用戶明確內容，也保證了用戶的賬戶安全。
我們在進行表單設計時，輸入區域的長度要符合心理預期，需要預判填寫內容長度來確定輸入區域的長度。這樣不僅在體驗上一致，而且在視覺體驗上更加愉悅。
用戶應該對他們的操作所帶來的結果非常自信，使用“提交”、“注冊”、“立即支付”、“創造賬戶”等確定性文案來描述用戶將采取的操作。
報錯信息應當一目了然，從用色、圖標到文本都應當起到高亮的效果，而且報錯信息應當靠近輸入框，而非表單的底部或者頂部或者按鍵旁邊。
在設計主要由文本輸入框構成的表單頁面時，要考慮鍵盤出現可能會遮擋輸入框的情況，我們需要把控件放在scrollView上，當鍵盤會遮擋輸入框時,則表單滾動。
對于異常情況不能只是冷冰冰的告知失敗，這樣容易給用戶帶來挫敗感，且缺少下一步操作指引。錯誤反饋不應該只著眼于結果，錯誤反饋的闡述角度應該是引起用戶關注、讓其快速了解出錯情況，并指導如何處理。
經過前面幾個步驟，表單整體形態已經確定，最后一步我們需要從整體體驗的角度對表單進行完善和調整。包含表單的容錯性考量、表單流程閉環的打造、視情況而定的趣味性設計。
即便你的產品90％的時間都運行良好，但是如果在用戶需要幫助時置之不理，他們是不會忘記這一點的。——《Getting Real》
容錯性概念源于計算機領域，容錯性是指計算機系統在發生故障的情況下，依然能夠保證系統正常運行。計算機這種保證系統正常運行的能力也被稱為容錯能力。延伸到互聯網產品設計領域，容錯性的范疇更為寬泛，包括降低用戶操作的出錯率、及時提供糾錯幫助、提供解決方案等內容。
容錯設計與用戶體驗息息相關，我們在表單頁面設計時也需要進行容錯性考量，盡量避免用戶錯誤操作的出現。當用戶出現錯誤操作時，幫助用戶識別、診斷，及時反饋問題所在，并提出有效的解決方案，幫助用戶快速從錯誤中恢復。讓表單填寫流程更順暢，給用戶帶來更優的用戶體驗，關于表單容錯性設計可以從以下幾個方面來進行。
引導和提示要突出表現，從而引起用戶關注，確保用戶在操作前能注意到引導或提示信息。引導與提示用語要簡單且易于理解，當重要或操作不可逆時，要詢問用戶讓其知道這樣操作的后果。
如何從設計上避免用戶出錯，限制是一種非常必要的方式，可以通過限制用戶的某些交互操作或者增加某些操作的難度來對用戶操作進行限制避免用戶出錯。
當用戶出現填寫錯誤時，及時的反饋錯誤并提供糾錯幫助，出錯信息應當用清晰準確且用戶易于理解，能夠對用戶解決當前問題提供建設性幫助。
允許用戶犯錯，操作者能歸夠撤銷以前的指令，幫助用戶在犯錯以后能夠快速回到正確狀態。
表單的終點并不是提交，一個好的表單設計需要兼顧考慮用戶填寫前的引導、填寫時的及時校驗與幫助、還有填寫后的整體流程體驗，為用戶提供完整的、形成閉環的表單填寫體驗。
舉個例子，當我們設計的表單需要用戶準備如身份證、銀行卡這類的證件時，需在表單填寫前告知用戶，避免用戶填寫途中才發現證件未準備，導致用戶填寫流程中斷。再如，用戶在填寫完證券開戶表單后，其實還需要通過審批后用戶才能進行入金交易等操作，這時我們需要一個結果頁來告知用戶表單提交的結果狀態和下一步的操作指引。
表單設計并不一定需要是嚴肅且正式的，在表單設計時可以嘗試引入一些趣味性的元素，研究表明，更大的文字輸入框、適度的留白空間、優雅的動畫效果、趣味性界面設計會讓人心情愉悅更有填寫的欲望。
例如bilibili的登錄頁面，在用戶輸入賬號時上方的卡通形象是睜眼的，當切換到輸入密碼或者驗證碼時卡通人物會有一個捂住雙眼的動作十分有趣，這樣的趣味性設計能夠在一定程度上緩解用戶在填寫表單時的焦慮情緒，并增加對于bilibili保護賬號安全的信賴感。
以上就是我對于移動端表單設計的一些歸納和總結，過往的項目中自己設計大量的表單頁面，走了不少彎路犯了不少錯誤，但也通過項目不斷的反思總結，收獲不少的關于表單設計的經驗。在這里將項目中關于表單的一些思考和經驗分享出來，總結出自己的一套關于表單設計的方法論，也是希望能夠對正在進行表單設計或者即將進行表單設計的你提供一點點參考與幫助。
表單設計我將分為上下兩期來向大家分享，體系化表單設計（上期）主要介紹在項目中總結出的表單設計中的方法論，下期則是介紹方法論在我們項目中實際的應用，也希望你能夠持續關注。
文章來源：優設 作者：Yone楊
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔l展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
藍藍設計的小編 http://www.syprn.cn