1.阻斷性原則
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：micu設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
網易新聞
Artand
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：站酷 作者：WseSteven
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多受歡迎的產品中都有我們值得學習和借鑒的設計思考點，通過分析海外主流產品，帶大家掌握底部導航欄（Tab Bar）的基本知識，找到解決問題的方法并開拓創意思維。
在開始之前，請大家先思考下面兩個問題～
好像并不是。雖然淘寶、微信、微博、美團等大多數主流的產品都在使用 Tab Bar，但這并不意味著所有產品都需要它。
很多APP沒有Tab Bar，比如日歷、計算器、滴滴、Uber等。對于是否要在APP中使用Tab Bar，應該分不同的情況靈活考慮。
答案是為了易于使用，意味著通過 Tab Bar 這種簡單的設計可以輕松幫助用戶導航到頁面。
明白了上面的問題后，接下來就要考慮如何來設計 Tab Bar，能更好的滿足用戶的需求和體驗。
1. 顯示最重要的信息
導航欄應該只包含最有用的信息，不能添加過多無用的標簽使導航欄混亂。許多 App 在導航欄上添加搜索功能，因為這有助于用戶更快地導航和檢索內容。
在Spotify底部導航中，主頁選項用于播放或收聽所有內容，搜索選項用于搜索下一首歌曲和播客，音樂庫選項用于播放列表中喜歡和保存的歌曲，單獨的會員選項方便用戶輕松點擊并快速完成購買操作。
2. 擴展導航的功能
主流 App 更喜歡在底部導航欄中使用 4-5 個標簽，這樣能保持導航欄的整潔，還避免了標簽過多導致用戶難以精確點擊選項的情況。
Pinterest的導航欄上只有四個選項，這有助于用戶輕松點擊。消息選項會實時更新消息數量，對用戶來說這樣的提示很直觀。另外搜索功能包含在導航欄中，方便輕松地在主頁和搜索結果之間來回切換。
3. 容納多種標簽形式
多數 App 底部導航欄會使用「圖標+文字」的標簽形式，這樣能清楚地告知用戶點擊標簽之后的結果。
有時候我們也會看到有些產品的導航欄只有圖標沒有文字，但這種形式并不會影響我們的操作，因為當導航欄的標簽使用了用戶特別熟悉的形狀和內涵，完全可以省略文字。
宜家App的導航欄使用了大眾都很熟悉的圖標，所以即使不加文字，我們也能清楚地知道這3個圖標分別代表了主頁、分類、我的。
相對于宜家，Youtube的導航欄就顯得有點復雜，因為Youtube的圖標含義用戶可能并不是很熟悉，加上文字說明很有必要。
4. 文字標簽應該簡短
文字標簽應該簡短而清晰，準確的文字說明能對用戶使用正確導航起到關鍵作用。
TikTok導航所有的文字標簽都簡短，并且中間的添加圖標還隱藏掉了文字，以此來引吸引用戶的注意力。
5. 避免隱藏導航欄
Tab Bar 通常包含了最重要的導航信息，應該始終向用戶展示，避免在用戶滾動頁面的情況下被隱藏掉。
Pinterest導航欄的設計是個例。當滾動頁面時，底部的導航欄會隱藏，這么設計的原因可能是為了防止導航欄遮擋圖像，保證用戶看到更多的圖像內容。
6. 傳達位置
Tab Bar 幫助用戶輕松導航，但如果用戶不知道自己的位置，將會影響他們瀏覽和使用產品的體驗。
多鄰國App通過改變導航圖標的樣式來讓用戶清晰的知道自己所有的板塊。
Headspace在底部導航欄加上了線條裝飾，每次切換選項，線條都會跟著一起切換，確保告知用戶確切的位置。
7. 從反饋中學習并不斷改進
反饋是關鍵，如果想改善產品的導航欄設計，就要考慮并測試用戶最喜歡哪個導航選項，不使用哪個導航，需要四個還是五個選項等等。
Pinterest通過收集用戶的使用反饋情況來不斷改進導航欄的設計，幫助用戶更方便地使用產品，這些不斷打磨的改進真是產品成功的關鍵。
8. 在導航欄中顯示更新
Tab Bar 不僅僅起到導航的作用，很多時候還能通過狀態變化告知用戶更多的信息。
在Twitter主頁導航中，當有新內容推送時，主頁就會出現更新的狀態，提示用戶查看新內容。這樣的設計在Youtube、Pinterest等很多主流產品中都有使用。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：Clip設計夾
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
注冊和登錄是進入產品的首要操作，毫無疑問好的用戶體驗能為產品加分，同理好的注冊和登錄體驗會讓用戶對產品留下更好的印象。
簡單的注冊和登錄流程中也存在著很多交互細節，這里介紹 10 個平常經常用得到的設計細節，一起來看看～
交互設計的基本原則之一是去除雜亂，去除每一次不必要的操作，避免用戶長時間的等待或思考。
用戶進入注冊頁面注冊賬號時，會第一時間填寫郵箱，那么我們是不是可以考慮自動對焦郵箱選項，省去用戶再次點擊的麻煩。
我們在輸入注冊信息的時候，可能并沒有意識到錯誤，通常會在賬號全部輸入完畢之后才會出現錯誤提示，因此我們又要重新再輸入一遍冗長的賬號信息，過程很繁瑣。
對于填寫郵箱之類的操作，進行模糊驗證是有意義的，避免了用戶信息全部填寫完整后再驗證，而是在系統發現錯誤后盡快讓用戶知道。
盡可能讓創建的每個帶標簽的文本輸入都有可單擊的標簽，如密碼應該是可點擊的，并將焦點放在密碼字段上。
輸入密碼總是讓人頭疼的一件事，尤其是當密碼有大小寫、數字、符號等要求時，往往需要輸入很多次后才能成功登錄。
不應該讓用戶去猜測密碼有什么要求，相反應該在用戶開始輸入密碼時就給出明確的提示要求。
允許用戶查看輸入的密碼，這樣方便他們對密碼進行二次校驗和修改，同時這種方式比再次重新輸入密碼要簡單。
清晰的按鈕文案既能吸引用戶點擊，也可以引導完成他們想要完成的操作。沒有用戶喜歡模棱兩可的文案提示，尤其是在做選擇的時候。
每個產品的注冊頁面都會有這樣的服務條款，在情況允許的條件下，盡可能提供默認的選擇結果，避免用戶再次選擇和操作。
如果用戶不小心選擇了錯誤的選項，要保證用戶能從注冊和登錄中快速地切換。最常見的形式是在底部添加一個鏈接。
當用戶輸入密碼并顯示密碼錯誤時，需要具體說明密碼不符的原因，告訴用戶如何修改密碼。
如果用戶密碼輸入錯誤，應該保留賬號信息，不必再讓用戶重復輸入賬號，只需要輸入密碼即可。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：Clip設計夾
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
當互聯網不斷的深入到我們的生活中，我們對安全感的需求也延續到了互聯網使用中，特別體現于互聯網金融產品。由于其具有風險性、收益性、流動性等特點，用戶對于資產安全的掌控感更為關注，產品使用體驗欠佳也直接影響客戶安全感。
以下將基于自身工作總結和行業經驗，聚焦互聯網金融產品分享和總結如何向用戶營造安全感。
目錄：
一、需要什么樣的安全感？
二、如何傳達出安全感？
三、怎樣體現出安全感？
安全感是人類最底層的需求，但不同類用戶群體需要的安全感也各有千秋，我們參考第一財經商業數據中心×螞蟻財富的2019線上理財人群報告，將線上理財的人群分為四類：
分別是初入職場的95后、職場新興力量的90后、理財中堅力量的80后和經歷風雨的70后。其中近一年的新增移動互聯網基民中超五層為90后、95后，成為金融移動互聯網的中堅力量。
這類型的投資者由于具有碎片化處理事務的習慣和金融知識不足、理財經驗不豐富、資金的抗風險能力不高的特點，當市場普遍行情下跌時，更容易產生焦慮的情緒而導致“割韭菜”，進而可能會影響到卸載APP的行為。根據Mob研究院的數據顯示，在2021年3月天天基金日均卸載用戶規模為前兩個月的6倍，而當時對應的市場行情正為基金普遍大跌。
因此從安全感的需求上他們更側重高效的信息降維、足夠的理財產品的風險提示、合理的預期收益宣傳以及投后虧損及時的內容陪伴。
而根據騰訊理財通×國家金融與發展實驗室出品的2021年互聯網理財行為與安全研究報告顯示，理財知識更充足，理財經驗更豐富的80后、70后在安全感的維護上則更關注理財產品的信息披露風險、信息不透明風險、市場政策風險、個人信息泄露風險此類問題。
安全感是一種感性的心理感受，而人類的情感由本能、行為、反思三個層面共同決定的。
這三個層次作為人類大腦的運作的規律，映射到設計當中，同樣是可供遵循、值得探究的。
先于意識和思維，它是外觀要素和第一印象形成的基礎，著重于產品的外觀、觸感等?！懊烙^即實用原則”人們會潛意識里認為好看的東西也是好用的，所以在界面設計當中，主要設計對象是視覺設計。
而金融產品中，常用藍、綠等冷色調的色彩，給人以冷靜，穩定的感覺，表現金融產品的科技感和可靠性；常用紅、黃、橙等暖色調，代表著熱情、溫暖與責任。
是人類身體日常行為的運作，行為層的設計與產品使用過程中的愉悅感和效率有關。好的行為層設計對應產品功能傳達、易學性與易用性，以及正面的心情感受。在界面設計當中，主要設計對象是交互設計。（將在下文通過投資場景詳細分析）
超越了本能層和行為層，存在意識和更高級的感覺、情緒及知覺。對應的是產品的情感溫度，主要的設計對象是正向情感的結果反饋以及品牌信任。
良好的企業品牌形象和口碑很大程度上會給用戶帶來認知上的安全感。用戶在初次選擇購買金融產品時，往往強大的品牌背書起到了關鍵作用，即使是同一只基金，用戶也會選擇在自己信賴的平臺里購買。
我們可以通過在頁面設計中加入更多的品牌元素，如品牌主題色、LOGO、品牌IP形象、品牌slogan等，來潛移默化地讓用戶感受企業的價值：
另一種常見于一些平臺利用強大的背書以及所獲的成就，清晰地向用戶展示可以提供的保障權益，責任條款及資質介紹等來傳達企業對用戶負責的態度，提升用戶對產品乃至對企業的信任感：
我們將金融的生命周期分為三個階段，分別可以概括為：投資前（產品選擇）、投資中（產品交易）、投資后（產品管理），不同階段的關注點不同，而對于安全感需求各不相同：
結合文章一開始對人群的分析，由于投前的行為特點更多聚焦于產品的選擇，因此從理財小白的角度對于安全感的缺乏更集中于“買了會不會虧錢？”、“產品買對了嗎”、“看不懂規則”、“這個適合我嗎”等，尤其存在于一些新形式的理財組合產品和策略智能投產品中。
在這個階段的安全感維護，除了相關頁面的信息降維、必要的投教啟蒙以外，還需要考慮用戶疑問的快速解答、合理的預期收益宣傳等。另外投錢的啟蒙教育更可以考慮結合一些運營活動，讓小白用戶通過更有趣的方法了解產品，了解自己適合的產品。
而對于較有經驗的理財“老司機”而言，安全感的缺乏更集中于“過往表現怎么樣，如最大回測率等”、“市場行情、政策是否利好”、“基金經理的資歷”等，而更需要考慮信息的多維度展示、信息披露、行情資訊的展示、甚至是產品的對比等來表達產品的未來盈收能力可期。
當投資者已經選擇好信任的理財產品時，在產品交易的各個界面也需要關注交易流程中安全感的反饋。
其中包括正向反饋和負向反饋。正向反饋是指用戶跟產品發生正確的交互時，系統給予用戶的正確引導，可以幫助用戶打消顧慮，建立信心，讓用戶感受到一切都在順利地進行著，這對那些在設備操作方面缺乏信心的用戶來說尤為重要，用戶不會對自己的操作或對平臺產生質疑，如：專屬的密碼輸入鍵盤、正向反饋如金額輸入時的金額提示、特別提出易誤解的交易規則等
而反向反饋是指用戶在操作過程中出現或疑似出現誤操作時，系統向用戶展示提示或二次確認以促進錯誤的糾正或確保此操作無誤。它能確保在第一時間告知用戶出現了不正確操作，及時更改，使流程順利進行，尤其是對于一些理財小白而言，合理的容錯設計更促進有效投資，提高未來的盈利體驗。如撤銷操作二次確認、購買超出風險承受能力的產品、輸入錯誤金額時的反饋。
引起思考：
雖然天天基金的撤單確認展示了退回帳戶，但是此彈窗的取消按鈕引導性過強，首次操作僅通過銀行卡的列表的箭頭較難聯想到是確認撤單的下一步操作（還以為是可選擇退的帳戶）。
產品交易成功后，投資者的關注會更集中于自己的資產的變化，產品的未來走勢等，因此在安全感的提供上，需要向投資者傳達準確的交易狀態、資產狀態、資產的保護等，甚至可以在產品購買的完成頁設置快捷加入自選和漲跌提醒等
引起思考：
在支付寶的基金總金額中，存在交易進行中的提示文案為“買入待確認*元”，但不少小白會產生疑問，當前展示的基金總金額是否包含提示的待確認金額，此時是否可將文案改為“含買入待確認*元”（畢竟也有部分直銷app并不會將待確認金額包含進產品的總金額中）
另一方面的更需要考慮當基金產品存在虧損時，及時向投資者傳達情感陪伴和合理的投資交易，以促進投資者優化持倉或保持中長期持有，避免頻繁的短期交易而導致不良的盈利體驗。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
以前，設計師們都需要去跟開發溝通并手動標注所有文件，現在，有了像 Zeplin 和 Abstract 這樣實用的標注工具，設計師幾乎不需要花太多的時間在對接上。
但是，還是避免不了很多東西會在對接過程中出現問題。比如，這個按鈕是固定大小的還是彈性大??？是保持底部邊距固定還是在一個較大的對象內居中？讓我們來看下約束布局在對接過程中的使用方法。
約束布局是定義控制應用中內容的規則。這些規則通過使用統一的元素和間距，保持跨平臺、跨環境和跨屏幕大小的一致性。通常應用在 iOS 和 Android 中。
彩云注：這里想跟大家科普下相對布局和約束布局的區別。相對布局是通過相對定位的方式讓控件出現在布局任意位置，相對布局因為邏輯原因，層級較多；而約束布局能夠有效解決布局過多問題，讓頁面更加扁平化，布局之間相對位置也更好控制。約束布局也是繼相對布局后，谷歌官方針對相對布局問題給出的一個更優解決方案，意在將來替代掉相對布局。當然，這里不再過多闡述，感興趣的可以自行去了解下，可能偏開發方面會更多一些。
如果在 sketch 文件中已經設計布局好了所有元素，就可以開始了！
1. 基礎單位
8×8
首先從定義基本單位開始，每個度量值都是其倍數。我建議使用偶數 8 來調整大小和間距，因為這樣可以方便且一致地適配各種設備。
在 Sketch 中選擇首選項>畫布，將“通過 Shift+方向鍵調整移動對象中的 10px 改成 8px”，這樣會解決很多問題！
2. 間隔單位
間隔單位是常用間距的視覺表達。例如，一個“2 間隔單元”是 16 pt/dp，因為 2×8=16。這些符號應該在設計中使用，別名應該被標注成代碼，以便在和開發對接時使用相同的語言。
垂直和水平間隔
在項目很趕的時候，你可能沒有足夠的時間手動做到完美像素對齊。通過使用這些通用單位來標識，而不是標注工具自動生成的標注像素，它可以告訴開發實際間距。數字別名與“Shift +方向鍵”移動對象的次數相匹配。
響應式按鈕：iPhone8、三星 Galaxy S8、iPhoneSE
間隔大小永遠不會改變。如果是水平間隔，則垂直高度被鎖定，反之亦然。這意味著在不同的手機寬度上，組件的尺寸會發生變化，但用于創建它的邊距的間距將保持不變。
有時元素在間隔之間對齊。間隔之間對齊的主要方法是中心對齊和底部對齊。
垂直居、中水平居中和居中對齊
中心對齊是指你想要一個對象或一組對象向中間集中對齊。對象可以水平居中，垂直居中，或者向中間集中對齊。
底部對齊
底部對齊是指希望對象與其中一個對象的底部對齊。當有兩種不同的文本大小并且想要在基線處對齊時，底部對齊就是比較常見使用方法。
1. 點擊對象
48 x 48
在手機上，最小點擊對象尺寸為 48x48dp /pt。這尺寸來自于谷歌設計指南，物理尺寸約等于 12 英寸。(HIG 建議使用 44x44pt，所以我選擇更大的)。將元素放在一起時考慮點擊對象大小。你也可以使用點擊對象符號來表示元素的哪些部分是可點擊的。
讓我們通過一些組件示例切換來測試所有約束的使用：
組件示例：列表項、按鈕和復選框
2. 基本尺寸
組件的基本尺寸，它的最小高度和寬度，應該基于最小點擊對象的尺寸。視覺上小于點擊對象的組件仍應由相同的最小點擊對象大小觸發。這意味著，如果用戶在復選框之外觸摸了一點，也會承認他們點擊了復選框。
組件相對于最小點擊對象的視覺尺寸：精確、高于和低于。
3. 內邊距
使用間隔表示組件內的邊距。
長字符串的水平邊距
你可以通過設置水平邊距來限制元素的水平位置，比如文本框。當文本太長時，你需要指出文本是否應該調整大小、換行和/或截斷。換行到兩行比截斷一行更好！
動態類型的水平和垂直邊距
垂直填充最常用于動態適配。盡管組件在當前手機尺寸、當前語言和當前字體大小下看起來可能很好——但所有這些因素都是最壞情況下的變量。當類型增加時，組件將變得比它的基本大小更大，并且你希望確保它仍然有垂直填充。
4. 基線對齊
使用居中和基線標記來示意，如何讓那些沒有接觸到所有邊的間隔元素表現出來。這部分主要是方便給開發理解的。
垂直居中的列表項文本、底部對齊的價格和居中的復選框
現在你已經布局好了一個頁面，使用與在組件中相同的方式使用間隔、點擊目標和對齊符號。
插圖來源于 Meg
……瞧!這就是移動端的響應式布局!
提示：為你在界面布局中引用的組件創建單獨的 symbol 畫板。在組件中，將所有組件規范包含在一個文件夾中，該文件夾可以輕松打開和關閉。沒有什么比同時標記組件和界面布局更好了。
即使是一個精心制作的交接文件也不能取代你與開發之間良好的語言交流。這應該與開始、移交和書面文檔一起使用。你越讓開發了解你的設計，還原的結果就越接近實際發布的產品。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：優設 作者：彩云譯設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
導語：“自選”作為金融類產品的基礎功能，迭代至今已經非常成熟了。放眼望去，市面上主流金融產品的自選功能似乎都大同小異，但是體驗下來會發現，細分領域下的設計側重點卻有所不同。
如果我們將“自選”轉化為熟悉的C端功能，它類似于“收藏夾”、“關注列表”的概念，是用戶管理交易對象的重要陣地。除了常見的管理對象（交易概念中稱作“標的”）、管理分組外，“自選”還會存在對數據和使用習慣的管理需求。
富途“管理分組”采用的交互方案，初期學習成本是很高的，它雖然充分考慮了效率問題，卻低估了用戶理解上的困難。（截止本文發布前，富途最新版對現方案做了視覺樣式上的更新，看來設計師也意識到了該方案目前存在著一些不夠清晰的地方，期待后續交互上的迭代。）
長橋將分組的“新建、排序、刪除、重命名”拆的很散，理解上不困難，操作起來較為繁瑣。
設計側重點：管理標的、分組與數據、使用習慣的設置完全分開
一些細節問題：比如“管理本頁股票”，在批量操作的場景下，底部欄卻存在不能批量操作的選項
小結：對三類產品的競品調研也驗證了我們最初對需求目標的把握，為券商類產品設計“自選功能”，效率和流暢度是最關鍵的。設計目標明確了，接下來我們看看目前都存在哪些問題，以及對應的解法。
如圖所示，現在如果想完成上述任務，需要4步、且每次僅能將標的添加至1個組。優化后我們可以通過3步完成，且每次可以將標的同時添加至多個組。
（注：Snackbar雖然源于安卓原生的MD設計系統，在IOS并無此原生控件。但是隨著二者在設計上日漸趨同，且控件的應用上也早已互通有無，所以Snackbar在IOS的使用，合理即可，不必糾結于平臺差異。）
交互關鍵點：
關于“冗余路徑”應該保留還是去除，一直以來都存在爭議。討論這個爭議的前提是：冗余路徑雖然不是最優路徑，但是滿足了特定場景下用戶的特定操作習慣。
當“冗余”只是冗余、沒有任何增益時，也要敢于做減法；因為同時還需要考慮一點：出發前的選擇越多，用戶的決策時間越長。
交互關鍵點：
在業務方提出為同一個功能再添加一條新的路徑時，我們必須要弄清楚，這條新路徑是為解決什么問題存在的。不解決問題的需求，大部分是對產品的無效堆砌。做好產品的“守門員”，給出專業的判斷，是交互設計師的重要職責之一。
1）對功能的整理和歸類，是我們為用戶留下的使用線索。如果推理時間過長，說明線索的指向性出了問題。
2）如果層級 1 包含層級 1.x，那么層級 1.x 的操作不應放置在層級 1 的認知區域。
3）如果用戶設置了一些項目，無法在預期場景看到對應的效果，應提前給與說明。
交互關鍵點：
注重“效率”是沒錯的，比如上述case中看似有“效率”的Tab結構。但是這里面隱藏著更多的“清晰”問題。如果一個功能設計的讓用戶用不明白，也就談不上“效率”的提升。
場景1：批量管理標的。
文案問題：按鈕表意都是“刪除”，帶來的實際結果是不同的，存在歧義。
場景2：數據項設置。
文案問題：沒有進行規范化處理，增加了選項的理解難度。
交互關鍵點：
很多時候，一套語義清晰、邏輯順滑的文案，可以等價于某個功能優化的迭代周期。實際功能點不變，只是替換文案，就能讓用戶用的清爽明白。這樣的“好買賣”，卻一直被嚴重低估。
遇到同質化較高的需求重構時，初期應扔掉“套路”思維，從用戶視角、業務視角推導出主要設計思路。帶著問題去分析競品，推敲競品在此類需求設計上的精細差異。不要對行業top給出的方案習慣性盲從，要經過思考和反復論證，推導出最適合自己所負責產品的交互方案。
當設計深入到細節，出現了可A可B的選擇時，回頭看看我們經過深思熟慮推導出來的設計目標。重新評估A/B方案是否符合目標、是否有助益于實現目標。沒有太多“怎么設計都可以”的方案，從我們的選擇中，也透露了決策的傾向。只是我們需要時刻確認這種“傾向”在整體邏輯中是自洽的。
每一份交互輸出都應該是有觀點的輸出，即使最終我們的觀點被業務方、協作方的諸多因素所淹沒，仍要保持、增進自己提出觀點的能力。那些常被用戶生動提起的、打造出特色和性格的產品，都是由一個個鮮明觀點鑄造而成的。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
翻譯：Siyang 審校：ArialXu | UXRen翻譯組 #376譯文
原作者：Denislav Jeliazkov
原標題：《Is Your UI Messy? 7 Common Mistakes to Avoid》
當我們設計高品質產品時，任何微小的細節都是至關重要的。
很多人會爭論好的用戶體驗和好的用戶界面哪個更重要，而我則認為兩者都非常重要。如果其中一個失敗了，你就無法對用戶產生影響。然而，很多時候用戶并不會考慮用戶體驗是什么，而是基于外觀來評價一款產品。
Ignoring Scope/Bad Planning
那些含有lorem ipsum（模板里填充的默認文本）的產品和庫存照片，你多久使用一次? 我想大家都從來沒用過。如果你想提升你的技能，設計時請注入真實內容。網頁會展示哪些真實的圖片，真實的標題可能有多長字符？一旦你美麗的設計被真實的內容填滿，它就會面目全非。
具體來說，在開始UI設計之前，你需要知道頁面的每個部分將顯示什么類型的內容。你還需要知道內容的最小和最大尺寸。這些轉折點（turning point）被稱為極限情況（edge case），因為它們決定了界面何時以及如何改變。
你還需要提前研究圖片的使用限制。如果你的客戶沒有任何定制照片或不打算購買任何照片，那你就沒必要使用來自Unsplash的漂亮但毫無意義的照片。
為什么毫無意義? 因為這些照片都是純概念性的。用漂亮的東西是不夠的。相反，你需要選擇那些能夠創造故事情節或具有深遠意義的圖像。
無論你做什么，不要使用那些毫無必要的照片。如今，人們被大量信息淹沒。額外一點無用的視覺信息只會激怒他們。
另一種極限情況與重復模塊有關。例如，圖像+文本、圖標+文本、數字+文本…。你應該考慮兩行文本和十行文本時這些模塊會是什么樣子，以及它們是否會一個接一個地出現。
對于描述性功能的小型文本模塊，使用三列布局是一個很好的選擇。然而，如果你的文本超過五行，并且不能使用省略號（…）來收起文本，你就必須想出另一種視覺解決方案。為什么？因為又窄又長的大段文本只適合原始的報紙閱讀，而對網絡閱讀十分不友好?？赡艿慕鉀Q方案包括這兩種：水平滑動的輪播模式（Slides）和兩列布局。。
了解內容的極限情況有助于更有效地使用屏幕空間，并為界面的各個模塊選擇正確的界面處理方式。但是要記住，極限情況并不僅僅是你當前已經遇到的情況。優秀的設計師總是會主動思考客戶將來擴展UI的可能性。
No difference between primary and secondary actions
設計應用程序時，會涉及到很多需要用戶完成的操作。強化主操作（primary actions）的視覺重要性非常重要。所有的導航都是通過按鈕完成，所以你必須通過加粗和突出的方式讓用戶更容易識別主操作，次要操作（Secondary actions）則不要那么突出，但如果用戶需要尋找它們，它們是可見的即可。
以下是區分主操作和次要操作的方法：
Frustrating error states
當你在設計用戶界面時，不要忘記任何用戶界面的核心目標：在用戶和服務之間提供盡可能流暢的交互。界面不應存在疑惑、沒有答案的問題，亦或是任何的不確定性。
設計師應該向用戶提供產品狀態的清晰反饋，特別是在產品處于出錯狀態時。因此，出錯時的提醒應滿足以下的幾個簡單規則：
設計師還應該注意那些意外錯誤情況（如服務器錯誤、頁面未找到）。任何錯誤都是用戶使用流程上的障礙。這就是我們需要幫助用戶處理它的原因，提供任何可能的解決方案，并試圖消減糟糕的體驗，尤其是那些非用戶自身原因造成的錯誤。例如，對于404和500錯誤（頁面未找到），一個可能的好方案是為這些頁面設計插圖或動畫。
在設計錯誤狀態時，盡你的最大努力不要惹惱用戶。特別要注意那些所有可能發生的表單校驗情況。
舉例而言，假設你有一個包含必需字段的表單。這意味著開發人員有一個相應的校驗：“所有的必填字段不能為空?！奔僭O用戶試圖以隨機的順序填寫表單，當第1個必填字段失去焦點狀態時，它會彈出一個錯誤提示：“請填寫此字段，該選項是必填項!”
看到這個反饋的可憐用戶驚叫道：“等一下伙計，我只是在表單項之間切換，還沒有點擊‘提交’呢!”事情甚至可能變得更糟，例如，假設你有另一個校驗設置：在所有必需字段全部填寫前，“提交”按鈕是禁用狀態。
想想看吧！你那些可憐的用戶什么也沒做，就無法提交表單，但是你已經將好幾個錯誤歸咎于他。這肯定會激怒所有人，你最好避免這種情況的出現。
不要聽那些開發工程師忽悠：“按你想要的交互方式開發程序，這需要耗費大量精力”。請記住: 如果不能避免這個問題會讓你付出代價，“失去用戶”的巨大代價！即使它的開發成本很低，沒有用戶的產品一文不值。
Poor alignment
好吧，我承認，我是個對齊狂魔。但這只是因為一旦你發現了對齊的魔力，你就會意識到它是讓任何布局看起來漂亮和和諧的關鍵。
許多設計師認為使用柵格系統（grid）會限制你的創造力，在某種程度上，這的確是真的。然而，如果你是一名剛入行的UI設計師，我認為你十分有必要在打破這些規則之前，先學會它們。
適當的填充（padding）和間距（spacing）可以讓你的版面保持整潔有序，同時也能讓讀者更容易地閱讀和理解信息。
在邏輯塊（logical blocks）周圍應該設置相同尺寸的間距（例如，在頂部和底部，以及在左邊和右邊）。如果間距尺寸不一，你的頁面看起來會很混亂，導致用戶對不同部分投入不均等的注意力。
而填充太小則意味著用戶無法將內容分解成更多的邏輯模塊。為了防止邏輯模塊混雜在一起，你需要把它們分開，并在它們之間插入一個大的間距。
維持視覺層級結構的一個簡單方法，是遵循如下的簡單規則：不同邏輯模塊之間的填充尺寸應該大于每個模塊內標題和文本之間的填充尺寸。例如，假設你有一個包含主標題、副標題和段落的超長文本，那么你需要：
這樣的設計可以很好的強調重點。主標題是最大號的文本，周圍有相對較大的空間，但仍與緊隨其后的元素保持相近的距離。
Low Contrast
設計產品和設計一座公共建筑（如圖書館、學校等）有些相似之處，產品需要很高的包容性，能滿足不同人的需求，這也包括了盲人、色盲和弱視群體。
你可以問問達美樂披薩是否認同產品包容性的重要價值。達美樂的網站設計一點也不無障礙（accessible），他們被一位無法通過網站訂購披薩的盲人告上法庭。請不要學達美樂，做設計一定要考慮無障礙。
我們作為設計師，往往關注如何做好看的設計，而忽視了多元化用戶的交互需求。
作為一個成熟的設計師，我已經能夠心平氣和地對待那些限制我做出“完美設計”的條條框框了，這其中就包括ADA（美國殘疾人士法案）的相關條例。
為了讓文字和水平空間更協調，而把字號縮小到8px；或是僅僅為了美觀而使用淺灰色，這些行為都忽視了弱視訪客的使用需求。
為了在Dribbble集贊，設計時我們可以忽略無障礙，但是當我們在為真實的用戶設計產品的時候，忽略無障礙顯然不是個好主意。
按照網絡端內容無障礙設計指南（WCAG）的要求，我們至少需要提供4.5:1的色彩對比度。這份指南還闡述了針對運動、聽覺和認知障礙用戶的視覺設計指導方針。
為確保符合這些規范要求，你可以下載Stark軟件，它可以幫助檢查你的設計是否滿足了無障礙設計的要求。
我的意思是，如果你把兩個完全不同的元素緊挨著排列，用戶無法搞清楚哪個元素是“主要”的，哪個是“次要的”。這就是為什么我們會說，強調對比不僅僅是將不同的視覺效果應用到各個元素上，也需要使用留白的藝術。有時候為了使元素形成對比，你需要用留白來分隔它們。
留白很重要，它使內容更便于用戶閱讀。當然，有時候留白也會使用不當，比如有太多的空白或者在一個小區域內塞進了太多的內容，這都不是正確使用留白的例子。許多充斥各種廣告的網站也缺乏足夠的留白。
避免把低對比度的文本放置在圖像上。文字和背景之間應該有足夠的對比。為了使文本突出，可以在圖像上放置一個提高對比度的濾鏡。黑色很流行，但你也可以使用明亮的色彩，搭配使用。
另一種做法是從一開始就使用高對比度的圖像。在這種情況下，你可以把文本放在照片或圖像的深色區域。
Poor Iconography
當你需要通過一個小符號來表達意思或簡單說明一種含義時，圖標非常有用。它們也是現代界面設計的基本組成部分，特別是在移動終端上。
在應用程序中，圖標通常相當于按鈕。看看Instagram，你只會看到圖標和文字。
這就是選擇正確的視覺圖標來呼應元素含義如此重要的原因。聽起來很簡單，對吧？其實并不簡單。找到正確圖標的過程是非常痛苦的。
你需要用大家都能理解的、簡單的、常見的圖標來表達語義。其次，你還需要將這些圖標與整體UI風格相匹配，最后，你需要以SVG格式把圖標提供給開發人員。
或許你曾經搜索過免費圖標，當你為所有元素找到對應的漂亮圖標時，你會很興奮。你想，它們是多么完美地吻合啊! 它們會被每個人理解！遺憾的是，你所選擇的圖標庫給人的整體印象往往是凌亂的。如何才能避免這種凌亂呢？以下是一個簡要策略:
確實，沒那么細心的用戶可能不會特別注意到線寬或圓角半徑的不統一。盡管如此，設計給人的整體印象還是哪里怪怪的，用戶能感覺得到。
換句話說，雖然使用免費圖標并沒有錯，但最好還是不要用太多。使用免費圖標會讓產品看起來很廉價，甚至是不專業的。另外，還有很多免費的圖標，人們很容易一下子認出來。為什么? 因為他們早就發現這些圖標被到處濫用。
這也是我建議嚴格篩選免費圖標的原因，當然，如果能自己設計圖標就更好了。自定義圖標總是為用戶提供更優越的體驗。
Not thinking cross platform
是的，理想情況下，這在當下應該不再是一個問題。
我們都知道，大多數用戶通過移動設備訪問網絡服務。不幸的是，許多設計師仍然會忘記這一事實。(我猜或許是因為客戶不愿意花錢去做移動端設計的優化？)
然而，對于專業的設計師來說，不考慮多設備的兼容優化，這種情況不應該發生。在創建UI時，你應該始終牢記“手機端優先”的法則。
請關注一下不同的用戶在每個頁面上所看到的內容。然后，問自己：“為了展示某個特定的內容，我選用的UI控件是否合適？”
你可能選了一個很好的UI控件，它可以完美地在桌面設備上工作，但對于手機用戶來說，它就并不是那么好用了。反之亦然。這就是為什么我們必須時刻牢記現今設計必須考慮多設備終端的原因。
微小的點觸目標會讓用戶感到沮喪，因為它們導致用戶難以完成預期的操作。我們都經歷過在智能手機上點錯按鈕，等待錯誤頁面加載時的沮喪感！
所以，在設計可點擊元素時，請記住用戶的手指大小都是不同的:
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
藍藍設計的小編 http://www.syprn.cn