App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問。科技迅速發展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
--手機appUI設計--
--bs界面設計--
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問。科技迅速發展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
表單作為平臺與用戶聯系最為緊密的一環，良好的表單設計可以帶給用戶流暢自然的用戶體驗，保證用戶情緒的正向增長，而混亂無序的表單則會引起用戶的負面情緒，影響甚至阻礙用戶操作的完成，降低用戶對品牌好感度和信賴度。對于我們這樣的金融產品而言，產品內存在著如開戶表單、出金申請表單、調整杠桿申請表單等形形色色的表單，如何將這些表單整理歸納形成一套完整的表單設計體系，帶給用戶統一、高效且優質的填寫體驗，是我們這次表單優化的主要的任務。
系列文章中關于表單設計部分我將分為上下兩期來向大家分享，體系化表單設計（上期）主要介紹在項目中總結出的表單設計中的方法論，下期則是介紹方法論在我們項目中實際的應用，希望這次的分享能為你今后的表單設計提供思路與參考。
表單在我們工作、生活中的使用由來已久，在還沒有互聯網的年代，表單就已經是人們收集和存儲數據、信息的重要手段，并一直沿用至今。如體檢時填寫的體檢表、入職時填寫的入職登記表、銀行開戶時填寫的開戶表都是使用的這種印刷的紙質表單。它們身上有很多設計可以作為重要的參考，幫助我們優化 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％的時間都運行良好，但是如果在用戶需要幫助時置之不理，他們是不會忘記這一點的?！禛etting Real》
容錯性概念源于計算機領域，容錯性是指計算機系統在發生故障的情況下，依然能夠保證系統正常運行。計算機這種保證系統正常運行的能力也被稱為容錯能力。延伸到互聯網產品設計領域，容錯性的范疇更為寬泛，包括降低用戶操作的出錯率、及時提供糾錯幫助、提供解決方案等內容。
容錯設計與用戶體驗息息相關，我們在表單頁面設計時也需要進行容錯性考量，盡量避免用戶錯誤操作的出現。當用戶出現錯誤操作時，幫助用戶識別、診斷，及時反饋問題所在，并提出有效的解決方案，幫助用戶快速從錯誤中恢復。讓表單填寫流程更順暢，給用戶帶來更優的用戶體驗，關于表單容錯性設計可以從以下幾個方面來進行。
引導和提示要突出表現，從而引起用戶關注，確保用戶在操作前能注意到引導或提示信息。引導與提示用語要簡單且易于理解，當重要或操作不可逆時，要詢問用戶讓其知道這樣操作的后果。
如何從設計上避免用戶出錯，限制是一種非常必要的方式，可以通過限制用戶的某些交互操作或者增加某些操作的難度來對用戶操作進行限制避免用戶出錯。
當用戶出現填寫錯誤時，及時的反饋錯誤并提供糾錯幫助，出錯信息應當用清晰準確且用戶易于理解，能夠對用戶解決當前問題提供建設性幫助。
允許用戶犯錯，操作者能歸夠撤銷以前的指令，幫助用戶在犯錯以后能夠快速回到正確狀態。
表單的終點并不是提交，一個好的表單設計需要兼顧考慮用戶填寫前的引導、填寫時的及時校驗與幫助、還有填寫后的整體流程體驗，為用戶提供完整的、形成閉環的表單填寫體驗。
舉個例子，當我們設計的表單需要用戶準備如身份證、銀行卡這類的證件時，需在表單填寫前告知用戶，避免用戶填寫途中才發現證件未準備，導致用戶填寫流程中斷。再如，用戶在填寫完證券開戶表單后，其實還需要通過審批后用戶才能進行入金交易等操作，這時我們需要一個結果頁來告知用戶表單提交的結果狀態和下一步的操作指引。
表單設計并不一定需要是嚴肅且正式的，在表單設計時可以嘗試引入一些趣味性的元素，研究表明，更大的文字輸入框、適度的留白空間、優雅的動畫效果、趣味性界面設計會讓人心情愉悅更有填寫的欲望。
例如bilibili的登錄頁面，在用戶輸入賬號時上方的卡通形象是睜眼的，當切換到輸入密碼或者驗證碼時卡通人物會有一個捂住雙眼的動作十分有趣，這樣的趣味性設計能夠在一定程度上緩解用戶在填寫表單時的焦慮情緒，并增加對于bilibili保護賬號安全的信賴感。
以上就是我對于移動端表單設計的一些歸納和總結，過往的項目中自己設計大量的表單頁面，走了不少彎路犯了不少錯誤，但也通過項目不斷的反思總結，收獲不少的關于表單設計的經驗。在這里將項目中關于表單的一些思考和經驗分享出來，總結出自己的一套關于表單設計的方法論，也是希望能夠對正在進行表單設計或者即將進行表單設計的你提供一點點參考與幫助。
表單設計我將分為上下兩期來向大家分享，體系化表單設計（上期）主要介紹在項目中總結出的表單設計中的方法論，下期則是介紹方法論在我們項目中實際的應用，也希望你能夠持續關注。
文章來源：站酷 作者：Yone楊
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔l展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問。科技迅速發展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享精美的app UI設計案例：
icon的設計會貫穿全套設計稿，所以在設計的環節中必不可少，優質的icon設計會幫助品牌和企業更好的樹立形象，形成自己的設計語言。
接下來為大家分享一些經典案例：
--手機appUI設計--
--icon圖標賞析--
更多精彩文章：
“搜索”是產品中一個非常必要的功能模塊，搜索就像為用戶提供了一條便捷的綠色通道，方便用戶快速檢索內容。
搜索動作在 App 中依靠搜索框來完成，好用的搜索框很大程度上決定了產品的搜索體驗如何。大多數搜索框存在相似性，但真正好的搜索框會在細節上為用戶帶來差異化的反饋，帶來很暖很貼心的感覺。
從體驗層面上看，一個良好的用戶體驗需要具備完整的流程。搜索框的使用流程可以簡單劃分為：
其中使用中會涉及到跳轉和輸入兩種不同的狀態，在下面的文章里我會展開來分析。
回想常用 App 的搜索框，好像它們的樣式看起來差別并不是很大，但其實每個搜索框的細節都是經過精心設計的，下面總結了幾種常見的搜索框類型。
1. 搜索圖標
頁面上只提供一個放大鏡圖標，通常需要用戶點擊圖標后才能跳轉到搜索頁面，例如小紅書就將搜索圖標放置在頁面右上角。
2. 基本搜索框
基本的搜索框組成包括放大鏡圖標、文字提示、輸入框三部分。微信主頁的搜索框采用了這種基本形式，文字提示為搜索，簡潔清晰。
3. 文字提示類搜索框
和基本搜索框的唯一不同的地方在于，這類搜索框中的文字提示部分不再是搜索兩個字，而是根據產品需求支持預置多組文字提示并在搜索框內循環展示。
△ 在大眾點評的頂部搜索框中，文字提示部分循環展示了三組不同的內容，引導用戶快速檢索到好吃的和好玩的。
4. 功能類搜索框
之所以叫做功能類搜索框，是在文字提示類搜索框的基礎上根據產品功能的需要額外添加了常用的功能性圖標，如掃碼圖標、拍照圖標、語音圖標等，賦予搜索框更多的功能屬性。
△ 經常使用豆瓣看書評的同學可能會注意到豆瓣主頁的搜索框中有一個掃碼圖標，點擊之后可以快速掃描圖書條碼或二維碼，快速識別書的內容，省去檢索的麻煩。
△ 淘寶搜索框的組成更復雜，除了支持掃碼外還有相機圖標，方便用戶拍照識別商品。
使用搜索框搜索的過程總體可以分為四部分：搜索前、點擊搜索框、輸入中、搜索后。設計分析過程中我們要先理清整體的搜索流程，再考慮每個狀態對應的交互細節及反饋，這樣才能保持邏輯清晰。
位置
大多數搜索框出現在頁面頂部，作為一個大的觸摸目標更符合用戶的認知習慣，更容易被用戶發現和使用。
△ 在蘋果自帶的地圖應用中，搜索框放在頁面中部偏下的位置，相比于頂部搜索框，這樣的位置分布更方便用戶單手操作。
樣式
搜索前的狀態除了前面講的幾種常見的搜索框樣式外，有些產品會直接在搜索框增加“搜索”按鈕。
△ 阿里系產品包括淘寶、支付寶、閑魚等主頁搜索框都額外添加了“搜索”按鈕，相比于點擊搜索框再點擊鍵盤搜索內容推薦，直接點擊按鈕簡化了搜索流程。
搜索框
點擊搜索框后，框內的放大鏡圖標會消失，出現閃爍的光標引導用戶輸入，搜索框右側會出現“取消”按鈕。
△ 點擊大眾點評的搜索框后，搜索頁會出現三個選項，點擊每一個選項，搜索框內的文字提示都會改變，有效幫助用戶提升搜索準確度，雖然是很小的點但做的很用心。
鍵盤
點擊搜索框后會彈起鍵盤，在不輸入內容的情況下，點擊鍵盤自帶的“搜索”按鈕能查詢搜索框中推薦的內容。
搜索頁
搜索頁的內容通常包括歷史搜索、搜索發現、熱門推薦等版塊，記錄用戶的搜索行為，推薦目標商品或服務，提高轉化率。
△ 豆瓣將最熱門的內容都展現在搜索頁中，包括實時更新的熱門書影音榜單、熱門小組、熱門話題等，為用戶提供有效的引導。
關于歷史搜索我們還可以繼續深入分析，思考這些記錄怎么排序、最多顯示幾條記錄……
△ 網易云音樂的歷史搜索最多可以保留10條，采用橫向滑動的手勢交互可以節省屏幕空間。根據內容長短一屏一次可以顯示2-3條記錄，這會導致排在后面的歷史記錄不容易被用戶快速發現。
△ 淘寶的歷史搜索可以容納更多的數量，當搜索記錄超過兩行時會有一個小的展開按鈕，點擊按鈕可以查看早期的記錄，這樣既能節省屏幕空間也能最大化容納歷史記錄。
刪除/取消
當開始輸入內容時，在搜索框的右側會出現刪除圖標，方便用戶一鍵刪除輸入的內容，這里要注意區分刪除和取消的區別。
△ 在淘寶中點擊“刪除”圖標，頁面會返回到上一級也就是搜索頁；
△ 點擊“取消”按鈕，頁面會直接返回到主頁也就是搜索前的狀態。
搜索提示
在用戶輸入內容時，產品會根據用戶輸入的內容提供相對應的搜索推薦，這是搜索框的必備的交互反饋。
通過合理的詞條推薦能極大降低用戶的思考時間，提高搜索效率，同時省去再次點擊搜索按鈕的流程，降低用戶的操作步驟。
字數限制
目前我所知道的大多數 App 在搜索時都沒有字數限制問題。
回顧一下搜索使用場景會發現用戶在搜索框內輸入任何內容都是有可能的，盡量不要約束用戶的輸入內容。無論用戶輸入多少內容，點擊都可以完成基本的搜索操作，這樣整個流程才完整。
△ 在百度中輸入過多字符時，會提示查詢限制在38個漢字以內，多的字符會被忽略，雖然給出了提示但并未打斷用戶的操作流程，可以讓用戶繼續完成搜索。
符合預期
搜索的理想狀態是搜索到的結果符合用戶的預期，滿足用戶的搜索需求，并把最吻合的搜索結果排在前面，為用戶帶來清晰的結果展示。
智能提示
智能提示是對用戶輸入內容上的一種提示或糾正，如果用戶輸入的內容有問題或不夠標準，在搜索結果中會能給最貼切的搜索結果。
△ 在淘寶中輸入“shouji”或“souji”，淘寶會根據拼音給出“手機”的搜索結果，但仍保留原標簽，方便用戶再次點擊搜索；輸入“手ji”時，會直接給出“手機”標簽，這種差異化的反饋能更好的為用戶服務。
無結果提示
△ 相比于直接顯示搜索無結果的狀態，拼多多的搜索結果首先會標明相關商品較少，然后將搜索內容拆分成不同的標簽進一步引導用戶來發現內容。
這里介紹了關于搜索框設計的一些基本體驗，學會從整體到局部再到具體細節一步步分析，大家會挖掘到更多更細的設計要點。
文章來源：優設 作者：Clip設計夾
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
移動互聯網的迅速崛起，讓移動網頁，移動客戶端越來越重要，客戶端的頁面設計也是一門很大的學問?？萍佳杆侔l展的今手機屏幕的尺寸越來越放大化，但卻始終 很有限，因此，在APP的界面設計中，精簡是一貫的準則。這里所說的精簡并不是內容上盡可能的少量，而是要注重重點的表達。在視覺上也要遵循用戶的視覺邏 輯，用戶看著順眼了，才會真正的喜歡。
接下來為大家分享六款精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
首先我們要知道APP的啟動頁和閃屏不是一個東西，啟動頁是用戶打開產品第一眼看到的頁面，閃屏是啟動頁之后出現的頁面。
啟動頁是一個APP必不可少的頁面，在iOS規范中，上架AppStore必須有啟動頁，Android系統會有1-2s的白屏，所以兩個端都需要啟動頁。蘋果官方給的解釋是，為了增加APP啟動時的用戶體驗，確實如此，當打開一個產品時，首頁內容都需要一定的時間加載。
啟動頁的設計角度一般是品牌信息傳遞，建立用戶與產品的認知，一般時常都在2s以內（看網速和手機性能）。啟動頁的設計一般不做動畫效果，因為只要是動畫，就會讓用戶感覺等待時間變長了。
閃屏是啟動頁后面緊接著出現的頁面，當然有很多產品沒有閃屏，如微信、淘寶等，因為產品的定位和運營模式不同。閃屏與啟動頁不同，閃屏是用來運營的，比如投放日常廣告、活動運營、節日等等，大多數產品閃屏出現的時間是3s或5s，一般都提供“跳過”按鈕。
閃屏的設計為了運營，所以可以適當有動畫效果或者視頻，目的是能夠更加吸引用戶，加深印象或是提高點擊率。
啟動頁是寫在安裝包里面的程序，如果更換就得發版，閃屏的程序設計是從后臺配置完成，所以可以滿足日常更換。
對用戶來講啟動頁和閃屏展示的時間越短越好，那時間減少不了，就可以通過設計讓用戶對時間的感知變少，從而提高體驗?？聪聢D，兩張圖通過平滑過度，給用戶的感覺是一張圖在變化，這樣時間上給用戶的感知是變快的。
用戶等待感知短
當然對于不同的產品，設計的傾向性是不一樣的，比如網易云音樂，啟動頁是強烈的紅色，然后生硬的切換到一個跟啟動頁沒有任何視覺關聯的閃屏。這樣的設計形式，用戶等完一個頁面，又等一個頁面，那就會給用戶在時間上的感知是變長的。
品牌感知傳遞強
但是，對于一個音樂產品，渲染產品調性傳遞品牌，要遠遠大于減少用戶等待時間的體驗。所以，從這點來看，網易云音樂這樣的設計形式，也是非常恰當的，設計應該根據產品的定位，來確定設計的傾向性。
敲黑板，劃重點！ 下面的內容才是本文重點！
手機尺寸那么多，閃屏設計尺寸應該如何定義，很多APP的解決方案是使用兩張不同比例的閃屏，還有一部分APP是區分系統，iOS適配一張圖，Android適配一張圖。
下面我以小米商城閃屏的改版為例，分享如何用一張閃屏尺寸適配所有機型，并詳細介紹適配的原理。下圖是改版前的閃屏，需要上傳兩張圖，一張1080*2070（不帶底部logo），另一張是720*1280（帶底部logo）。
老版本閃屏需要上傳兩個尺寸圖
兩張圖，設計人員就需在兩個模版上進行排版設計，小米商城閃屏更換頻率非常高，這樣其實會付出很多時間成本。所以，我們團隊嘗試使用一張圖適配所有機型，這其中的難點就是，找到一個合適的尺寸適配所有手機，并且閃屏內容的呈現在任意手機上都得合適，內容不能被裁剪。
先跟大家普及一下小米公司APP的設計稿尺寸，因為小米手機是Android系統，所以UI設計稿會優先適配安卓的主流手機，即1080*2340，這個尺寸接近iPhone12的比例和尺寸，切圖相當于3倍圖。
所以，閃屏寬度設定一定是1080px，然后高度分為兩部分組成，一個是內容運營區（閃屏內容設計區域），一個是logo位，如下圖所示。
藍色部分為閃屏
logo位部分由開發寫到程序中，所以閃屏頁面高度要去掉logo位高度。閃屏設計尺寸即是藍色部分，正常來看應該是主流長屏分辨率手機與現存短屏分辨率手機的平均數即可，但其實并不可取。
因為，短屏分辨率手機畢竟使用人群是少數，設計的宗旨一向都是優先考慮大多數用戶。所以，定義閃屏尺寸的原則是讓類似小米11、iPhone12等主流比例手機呈現的完美，短屏分辨率手機如iPhone8只要呈現的不出錯即可。
以安卓主流分辨率1080*2340為例（這個比例接近iPhone12），如下圖，logo位高度設定為270px，把這個圖切給開發，讓開發等比縮放去適配所有手機即可。
很多安卓手機底部會有一個系統高度，這個位置不可以占用，但開發可以改變顏色，所以這部分顏色可以跟啟動頁或閃屏顏色調成一致。頁面分辨率2340減去270的logo位就是2070，這就是長屏主流手機閃屏大概要呈現的高度，然后需要用這個尺寸去兼顧短屏分辨率手機。
把短屏手機也計算出來，安卓最短的手機比例是16:9（比例等同于iOS的iPhone8），以1080*1920為例，如下圖，1920同樣是減去logo位的270像素等于1650。
接下來就是最關鍵的時刻，要用1080*2070和1080*1650兩個尺寸設定閃屏的設計模版。先說一下手機的適配原理，如果一個張圖片的比例和手機屏幕不一致，開發設定是撐滿手機屏幕，這時手機上展示的圖片就會出現上下或左右被裁剪的情況。
所以，綜合兩個不同比例的尺寸，短屏手機裁剪上下，長屏手機裁剪左右，然后把呈現的內容保證在不被裁剪掉的區域。
閃屏模版尺寸設定嘗試
最后經過很多次的嘗試，最終選用1080*1920作為閃屏的設計尺寸，向上向下適配內容的呈現都非常合適。下圖是iOS和安卓手機的適配效果，向下適配16:9的手機（裁剪上下），向上適配20:9的手機（裁剪左右）。
長短屏手機閃屏適配效果
定制閃屏設計模版
模版中頁面上方留了較大面積，是為了讓標題內容能夠呈現在長屏手機更恰當的位置上，長屏手機內容靠上，看上去不會很舒適。底部空間留的較少，因為底部再加上logo位的高度，就會讓頁面看起來很協調。
最終小米商城的閃屏就是用一個尺寸適配了所有分辨率的手機，思路和適配原理都已經講清楚，如果自家的產品是優先滿足iOS手機，完全可以用上面介紹的方法嘗試。
敲黑板！ 下面內容可能會顛覆你對UI設計的認知！
閃屏尺寸說完了，閃屏上面還有一個“跳過”按鈕，這個按鈕的位置設計非常非常重要，而且大有學問，會牽扯到廣告學，按鈕合理的設計會讓一個產品的收入倍增。
還是以小米商城的閃屏為例，之前的閃屏“跳過”按鈕在頁面右下角，新版我把“跳過”按鈕放到了右上角，為什么？
可以肯定的是，“跳過”按鈕，放在右上角，用戶體驗是不夠好的，右下角用戶操作起來才會更便捷，改為右上角其實就是為了讓用戶少點擊。用戶不去點擊“跳過”按鈕，那閃屏內容曝光的時間就會更長，這符合小米商城自營平臺的定位，自營平臺閃屏展示都是自己平臺的內容。
有很多產品閃屏的“跳過”按鈕，放在右下角，如微博、網易云音樂，優先滿足用戶體驗，是因為廣告的性質不同。
“跳過”按鈕在右下角的產品
在廣告學中有這樣幾個詞：CPS、CPC、CPM、CPT。
了解完常見的幾種廣告推廣方式后，我們再看一下微博和網易云音樂兩款產品。他們的廣告如果是CPM（曝光量）和CPT（包時間）的推廣方式，那“跳過”按鈕放到右下角可以提升用戶體驗，還不會影響推廣的收入。
再來看一下脈脈和花瓣兩個產品，他們的推廣方式大概率是按CPC（點擊率）或CPS（轉化率）收費的。閃屏的“跳過”按鈕放在右上角，內容的設計形式上強調并引導用戶去點擊廣告。
“跳過”按鈕在右上角的產品
聊一下脈脈和花瓣的閃屏設計，脈脈把閃屏設計成彈窗的形式，用一種騙的形式，引導用戶點擊假彈窗的“知道了”或關閉圖標。用戶的點擊行為與心里目標完全不一樣，這樣的設計雖然能讓平臺獲得更多的廣告收入，但也損害了用戶對平臺的好感。
花瓣閃屏的設計較為友好，實實在在的告訴用戶這是廣告，你有興趣就點“去看看”去了解，沒興趣就等一等，或點擊“跳過”?；ò赀@種設計形式較為適合CPS（轉化率）的推廣放過，因為點擊了解的用戶，都是對廣告興趣的精準人群。
最后總結一下文章的內容，啟動頁和閃屏是兩個東西，通過設計可以讓用戶等待的時間感知更快，從而提高體驗。閃屏可以用一張圖適配所有大中小手機，閃屏的“跳過”按鈕大有學問，合適的設計可以讓平臺的收入倍增。
設計從來都是用來滿足商業目的的，一個小小的按鈕設計，都會很大影響到平臺的收入，所以UI設計任何時候都需要清楚的了解產品定位以及商業模式，這樣才能有效的產出設計。
文章來源：人人都是產品經理 作者：吳星辰
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn