大家好，藍藍設計今天和大家分享20款優(yōu)秀的手機界面設計欣賞，共同學習成長！
我們有許多界面設計的案例，因為有保密協(xié)議不方便發(fā)出來。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
藍藍設計( www.teruid.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
下面是圖文教程：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.teruid.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
會員體系建設的價值在于以體系化機制培育用戶對產(chǎn)品的忠誠度，同時提供給高價值用戶更有價值的權益服務。百度APP DU會員體系搭建整合百度內部資訊專欄、小說、文庫、網(wǎng)盤、咨詢、生活服務、裝扮、工具、小度學堂等多業(yè)務權益，多維度滿足用戶學習、生活服務、效率升級、個性表達、娛樂訴求深度，成為用戶留存的關鍵。
為了將百度體系下眾多跨業(yè)務權益整合為DU會員權益，搭建百度APP DU會員權益服務體系，設計從建立獨特、統(tǒng)一的品牌印記、搭建豐富高價值權益聚合新場域、對用戶轉化全鏈路精細設計3個方向開展。
一、通過獨特和統(tǒng)一的DU會員品牌設計語言建立品牌印記
1、DU會員LOGO圖形與百度體系其他業(yè)務會員差異化設計，目標建立明確清晰印象和認知。
LOGO圖形采用皇冠+V結合100度傾斜角度設計，與其他業(yè)務會員LOGO圖形差異化。LOGO以用戶為中心，百分百為用戶提供百度體系豐富優(yōu)質的權益，提供尊享服務。
2、界面設計以簡潔清晰、年輕精致、豐富尊享的設計定位，從色、形、質、構、字多維度滲透年輕化設計語言，增強品牌識別性和記憶點，凸顯會員尊享感，搭建全新視覺體驗。
色：清透明快、年輕活潑
視覺降噪，以高飽和高明度黃金為主色，搭配白底輔助色，強對比、高明度形成鮮明清晰的視效層次，頭部背景采用鎏金漸變色，整體色彩搭配給用戶年輕、確定、活潑輕快的視覺感受。
形：溫潤親和、直觀清晰
ICON圖形采用肯定包容的面型，以提升權益辨識度、圖形更大、留白更多，幫助用戶更直觀更高效區(qū)分權益類型。ICON圖形疊加部分采用毛玻璃質感，品質細膩精致，ICON親和明確。
質：細膩吸睛、精致尊享
采用高光立體感材質設計，突出會員品質感和吸引力，增強會員權益獲得感。
構：簡潔突出、清晰統(tǒng)一
卡片、圖片、按鈕超大圓角，年輕親和，內容與卡片間距大留白，多模塊瀏覽舒適，提升頁面節(jié)奏感和呼吸感，白底與內容形成鮮明層級關系，視覺降噪簡潔。
字：層次清晰、高辨識度
收斂字號減少層級、標題、數(shù)字字體特殊處理展示，辨識度更高、氣質更年輕。
二、整合百度高價值權益搭建豐富的權益聚合新場域
搭建聯(lián)合會員聚合、流暢播等高價值權益聚合場景，權益顯性化設計。采用3D元素設計，增強會員權益獲得感，突出會員服務品質感和吸引力。
1、聯(lián)合會員高價值場域視覺強化提吸引
會員中心聯(lián)合會員模塊、聯(lián)合會員聚合和權益詳情，封面運用3D玻璃材質設計，強化聯(lián)合會員權益高品質和吸引力。
2、會員熱門權益場域視覺品牌統(tǒng)一強感知
流暢播、視頻備份、裝扮（掛件、個人主頁背景、頭像、換膚）、小度特權等高價值權益，在觸點場景入口和開通面板中，DU會員品牌和3D元素設計顯性化，強化DU會員權益感知和吸引力，提轉化。
3、下沉用戶場域視覺顯性化設計
針對百度APP極速版下沉用戶，會員中心開通前打造省賺看享4大權益，視覺強化大標題突出賺錢，省錢認知，結合極速版任務系統(tǒng)和故事會，豐富權益和省錢感知顯性化設計，提升會員轉化。
三、對用戶轉化全鏈路精細設計促轉化
設計驅動前瞻構建會員開通前、中、后支付全鏈路系統(tǒng)打法，每個環(huán)節(jié)給用戶強感知、易操作、快核銷的操作體驗，強化會員開通和權益核銷引導，提升會員續(xù)費率，做好用戶激勵和轉化。
1、開通前認知階段-強感知
增價值吸引，擴入口規(guī)模，增動效強引導提吸引，權益整合大標題突出賺錢、省錢認知。
建規(guī)范-規(guī)?；厝肟?/strong>
會員滲透場景持續(xù)擴面，統(tǒng)一和規(guī)范DU會員導流控件等入口模塊視覺語言，開通導流條、會員標簽、會員按鈕等會員元素在百度APP主端和極速版26場景規(guī)?；瘽B透，強化統(tǒng)一的DU會員認知。
增動效-強引導提吸引
會員中心權益圖標、開通會員按鈕、運營圖增動效提吸引，權益整合大標題突出賺錢、省錢認知，權益區(qū)打通動態(tài)圖標配置能力，圖標動態(tài)化擴容提升權益感知，周年和節(jié)日大促烘托活動氛圍，提升吸引力。
2、開通中行動階段-易操作
減步長強優(yōu)惠促決策，動效提優(yōu)惠感知和吸引力，優(yōu)惠抵扣任務新玩法，提升優(yōu)惠感知。
支付方式前置，減支付步長
減少用戶支付的阻礙，支付渠道前置購買面板中，根據(jù)用戶操作習慣智能排序顯示常用支付方式，縮短支付步長提升轉化率。
強化優(yōu)惠感知，提決策效率
通過突出優(yōu)惠信息和權益豐富，增強吸引力，讓用戶買得值。
1）支付面板凸顯連續(xù)包月套餐和續(xù)費信息、外露買就送附贈優(yōu)惠信息，重要信息動效設計提吸引力。
2）支付面板增優(yōu)惠抵扣模塊，任務余額抵扣會員費用，提升優(yōu)惠感知。
3）支付增挽留彈窗外露優(yōu)惠信息，動效提優(yōu)惠感知促會員轉化率。
3、開通后留存階段-快核銷
開通后差異設計引導不同階段用戶核銷，突出會員獲得感。
新開通用戶-引導提核銷
儀式感強動效引導熱門權益核銷，沉浸式動畫引導秒殺，給用戶會員超值感受，帶動會員券使用率提升。
沉默用戶 - 喚醒引導使用
從強到弱交叉推送，強動效強視效引導高頻權益，喚起使用核銷，弱打擾Push產(chǎn)品化設計引導權益核銷。
臨期/過期用戶-引導促續(xù)費
通過用戶已使用專屬權益與優(yōu)惠福利到期，在個人中心、掛件商城、會員中心等場景以優(yōu)惠福利、專屬權益強化等多手段引導續(xù)費。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.teruid.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
UI設計3天時間完成~
這個界面不難的，按照我的交互稿上個色就好了~
簡單設計一下，馬上給我~
再調幾個顏色給我選一下~
模塊先設計，顏色最后調一下也很快的~
…
熟悉吧，以上是作為UI設計師的你，幾乎每天都能聽到的把。拜托，就算是路邊打印店，讓人家?guī)湍阍O計個名片，你也會問人家什么時候能做好吧。難不成設計這么好做?要不你行你上?我做不了~
慢著，我做，我做，誰讓你給我發(fā)錢，給錢就是老大，要做就做吧~
于是出現(xiàn)了以下設計稿
常說設計是一個用戶接觸產(chǎn)品的第一道門。從應用市場的圖標開始到用戶下載打開app的啟動頁，再到用戶進入app后看到的首頁。難道設計師真的不考慮什么嗎?真的按照產(chǎn)品或交互設計稿做嗎。從圖標在應用市場的吸引力，到用戶使用app后的留存率，請問哪一個不是和UI設計師有關系！業(yè)績好，業(yè)務好是產(chǎn)品的營銷和自然增長率。業(yè)務差就是設計不吸引人沒有感染力，嗯哼？？？
在此呼吁廣大項目管理者，請給我們的設計師一些思考的時間，一些打磨設計的時間。
好了，廢話不多說，進入正題。假設有一天，公司給了你足夠的時間設計。你該如何思考？你要怎么不受約束的將自己的產(chǎn)品觀融入你的設計中？從現(xiàn)在開始，即使產(chǎn)品給你的設計時間很短，你也要學著思考，學著加入自己的思維，做一個有思想的設計師。做到這一點很難，但是你必須學著這樣做，跟我沒關系，但對你有益。
1.學著像產(chǎn)品經(jīng)理一樣思考(THINKING LIKE PM)
產(chǎn)品經(jīng)理是怎么思考的。產(chǎn)品經(jīng)理是產(chǎn)品的CEO，手握著產(chǎn)品的生殺大權?？紤]的會更偏像于產(chǎn)品的核心觀。幫助用戶解決什么痛點，通過什么方式解決這個痛點，怎么為公司提高贏利、如何提高轉化、如何提升留存…當然你并不需要完全知道所有的東西，因為你有你自己的專長(UI設計)。
但是，必須留意的幾點就是:(1)用戶群體(2)相關競品(3)主要商業(yè)模式
（1）對于用戶群體的了解，你能夠通過這部分用戶群體找到相關的用戶畫像。這一點很重要（因為從你入職為UI設計師的那天開始，你的設計是幫助公司服務于用戶的，并不是為了表達你崇高的藝術涵養(yǎng)的）。通過用戶畫像，你能找到這部分人的主要特征，這將會有助于你選擇設計中使用的顏色、字體大小。
打個比方來說，總不能為服務于紅綠色盲人群設計的產(chǎn)品，UI做出了綠色界面+紅色按鈕吧？你以為你通過顏色對比突出了按鈕，實際…對吧？你可以用顏色來讓界面產(chǎn)生差異，單不能僅依賴于顏色提升設計效果，因為并不是每個人都能精確的分辨出各種顏色。
(2)產(chǎn)品的競品，對于相關競品的研究，也是目前UI設計師設計過程中常用的一種方法。好處呢當然顯而易見，競品的顏色用取，設計風格…這些都是已經(jīng)線上經(jīng)過驗證了的。有很多設計師是在看完競品后恍然大悟，顏色該用啥，按鈕用啥色。但這是萬萬不可取的。這會導致你們的產(chǎn)品沒有任何競爭力，上線比人家晚，看著有和人家差不多。怎么打差異化的戰(zhàn)?取其優(yōu)，去其差。思考人家設計師為什么這么做，他們是怎么想的，如果我設計會設計成什么樣？
（3）你必須要了解你的商業(yè)模式。作為設計師有權知道公司的基本商業(yè)模式，這也是考慮在整體設計里程里面。霧里看花管中窺豹，你永遠看不到你所設計的產(chǎn)品本質。再打個比方：假設你的產(chǎn)品是通過用戶購買相關服務進行盈利的，那么設計前你得思考整個產(chǎn)品其實是需要安全、信任、服務作為設計主旨，其中突出“服務”作為亮點，需要傳遞給用戶一種安全可靠的情感，最終引導消費者完成支付購買。
2.學著像交互設計師一樣思考(THINKING LIKE UE)
用戶體驗、使用場景、信息優(yōu)先級、轉場、使用習慣…對于交互設計師來說這是多么熟悉的名詞。確實，交互設計師考慮更多的是怎么讓用戶在app上操作的爽了，最符合用戶的操作習慣，將產(chǎn)品經(jīng)理傳達下來的商業(yè)模式/邏輯變?yōu)榱鞒痰男问揭龑в脩暨M行使用。通過數(shù)據(jù)的分析，不斷優(yōu)化上線后產(chǎn)品的相關體驗。
作為設計師的你，怎么像交互設計師一樣思考呢?
(1)用戶體驗=顏色是否和諧。顏色的使用，之前已經(jīng)說過了，考慮用戶群體的基礎上，看你顏色的配比是否讓人舒適，是否準確的傳遞出了產(chǎn)品想給用戶的那種感覺。產(chǎn)品正式設計前，通常會進行所謂的風格探索階段。是允許設計師根據(jù)提供的用戶群體發(fā)揮自己的創(chuàng)意進行設計的。當找到那種適合的顏色搭配后，接下去的設計會顯得游刃有余。但是目前很多公司都是略過探索這一步的。為追求產(chǎn)品的快速上線，基本都是領導找競品給顏色，設計師根據(jù)這個顏色（衍生色）進行設計。缺乏用色的專業(yè)性。
(2)使用場景=顏色使用是否符合用戶使用產(chǎn)品時的場景。這個就比較好理解了，產(chǎn)品到底是晚上用的還是白天用的，到底是地鐵上用的還是書房里用戶。不同的使用場景在設計時也應該考慮在內。例如，晚上使用的產(chǎn)品顏色一定會偏暗一些、白天熱鬧場所使用的產(chǎn)品一定會是偏簡潔、書房使用的產(chǎn)品一定是偏溫和…
(3)信息優(yōu)先級=如何通過設計的方法(大小、位置、形狀、顏色、動畫)突出產(chǎn)品重點。通過對比、突出等手法，將重要信息直接展示給用戶。做到簡單直接有效。
(4)轉場=如何通過動效的方式便于用戶理解邏輯跳轉。這一點特別是在相對復雜的產(chǎn)品的時候較為常用，例如層級相對比較深，則會通過轉場的引導告知用戶從哪來到哪兒去。引領用戶使用你的產(chǎn)品，不至于在產(chǎn)品使用過程中迷失。
(5)使用習慣=相關設計規(guī)范。用戶長時間使用完你的產(chǎn)品后，已養(yǎng)成了使用習慣。知道哪個位置是重要的內容。如果用戶已經(jīng)建立了產(chǎn)品工作原理的心理模型，他們可能會有非常強烈的觀點，認為某些東西就應該在某些特定的位置，通常設計師可以利用這一特點來引導用戶發(fā)現(xiàn)重要功能。
3.學著像用戶一樣思考(THINKING LIKE UESR)
（1）用戶在使用產(chǎn)品的時候，最優(yōu)考慮的是，這個產(chǎn)品是不是能幫我解決我的問題(賺錢、記賬、提醒…)，產(chǎn)品的核心功能一定是用戶最先考慮的。
（2）你的設計是不是好看，他會考慮說，這個東西怎么看著這么low，是不是公司不正規(guī)啊?前文也提到了，每個產(chǎn)品都有自己的目標人群，那么研究這部分目標人群的相關喜好，通過設計的方式將其重現(xiàn)給用戶。
（3）這個產(chǎn)品用起來爽不爽，怎么這么卡頓、怎么看起來能點實際不能點、怎么功能這么多都沒用、怎么…
當然用戶有千千萬萬，你不可能完全都能像所有用戶那樣思考，滿足大部分用戶就可以了。
4.學著像你自己一樣思考(THINKING LIKE YOURSELF)
是否在為產(chǎn)品設計的過程中，已經(jīng)忘了像自己一樣思考了。滿腦子都是產(chǎn)品經(jīng)理想要什么樣的，用戶想要什么樣的。這也會讓你喪失自己的思考能力。
(1)學著像自己一樣思考，不是說按照自己的喜好來，而是你在設計的過程中是否偏離了自己的設計觀。對于明顯是錯誤的設計，你選擇接受。
(2)以調研或用戶研究結果為準則，完全喪失你自己對這個產(chǎn)品應有的樣子的判斷。做個半理性半感性的設計師，會讓你的設計既符合用戶口味，又有自己的韻味。
總結
記住設計產(chǎn)品的人是你，對產(chǎn)品美化體驗的是你，如果你的設計和使用不再適用于用戶，他們可以毫不留情的轉向其他產(chǎn)品，而作為設計師的你不能這么做。用戶不知道你的設計是怎么來的是怎么想的，但是你了解這一點。用戶不知道你是通過調研或研究得出他們的相關喜好最終選擇了這樣的設計，但是你很清楚。真正受制于產(chǎn)品設計的人是你，因此要確保它仍是你值得付出，引以為傲的東西。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.teruid.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.teruid.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前言
如果你要設計以真實場景為主的banner或者主視覺，往往都會在各大網(wǎng)站圖庫里找半天，挑挑選選可能都找不到滿意的，或是容易和別人用到一樣的圖片。想要找到一張?zhí)貏e的又獨一無二的難上加難，而且自己也沒時間建模和拍攝
AI圖片的生成為這個痛點找到了更好的解決方案，這篇文章就是要和大家分享一下使用AI制作好用的圖庫素材照片，我將會按照真實工作場景搭配設計落地方案來和大家分享AI使用經(jīng)驗，讓你看了就學會，學會就馬上能用
用結構化方式思考咒語
以下需求是我設計中要用到的素材，我希望可以有一張【穿西裝并且手提公文包的男士站在摩天大樓前】的寫實照片當作首圖，首先先想一下我們需要的素材大概畫面的呈現(xiàn)，思考的框架可以參考以下，以下內容為了方便關鍵詞我會用中文，但是實際操作中Prompt都必須使用英語
通過結構化思維來描述這樣就不會有遺漏，也更能使畫面完整，另外像我的英語并不是很好，就會把寫好的內容通過Deep L或是chatgpt來進行翻譯
關鍵詞的使用
prompt：A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style，the whole body of the figure is presented, —ar16:9
在輸入關鍵詞的時候，我通常會把重要的內容放在前面，有時加在后面的關鍵詞不容易被機器人識別。個人的一點小經(jīng)驗，在描述的最后一定要加上需要的參數(shù)，為了在后續(xù)的設計中更好適配尺寸需求，所以我選擇加上尺寸參數(shù)16:9，以下就是我通過關鍵詞生成的圖片
如果覺得結果都不滿意，可以重新用相同的Prompt再生成。AI好玩的地方就是它的隨機性，像是Promp就不建議非常詳細，因為這樣反而會有意想不到的優(yōu)質圖片產(chǎn)出
機器人生成以后就要開始挑選圖片了，如果對左上的結果比較滿意，就點擊v1，讓機器人針對這個圖片再去生成四張新的圖片，雖然左上效果不錯，但是手部有些奇怪，所以需要通過在該基礎上再次生成，來挑選沒有問題的圖片
這里說明一下U（upscaler）和V(variation)的區(qū)別，U就是選擇這張圖，然后會放大這張圖片畫質更加清晰，V則是會針對你選擇的圖片再生成四張圖，與你選擇的圖片做輕微的調整。1-4的排序為：1是左上，2是右上，3是左下，4是右下
重新生成的左上圖可以看到手部還是有問題，但是右上那張就還不錯，可以選擇這張來用或是再重新生成一遍
prompt：A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style，shot on 16mm, —ar16:9
這里我想要換一個畫面角度，所以選擇使用【shot on 16mm】,這種通常是電影、紀錄片、廣告拍攝使用的，所以使用這個關鍵字去生成圖片畫面會有一種電影感，角度上我覺得更好一點。
最后說一下，我是用的版本是V5，產(chǎn)出的1024??1024高解析圖片，但是我個人感覺還是不夠清晰，所以會搭配圖片放大工具來一起使用。我常用的圖片放大工具http://replicate.com/sczhou/codeformer，放大效果清晰度都非常好，而且處理速度也很快，重點是免費?。?！直接上傳圖片無需更改任何參數(shù)，使用默認預設清晰度絕對夠用，畫質太高也沒有太大意義，反而會影響網(wǎng)站加載速
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.teruid.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
平臺一致性的問題
按鈕的位置非常重要
為什么"確定"按鈕在右側效果更好
按鈕放置在角落還是放在一起？
結論
大家好，我是西瓜～
這次我們聊一個設計知識點，這個知識點平日會被設計師忽視，因為它太過于默許，但我們應該知道的是，很多默認的東西也是有自身的知識結構支撐，久而久之被人忽視了。
大家應該都見到過彈窗、表單里的"確定"和"取消"按鈕吧，這兩個按鈕大家還記得會放在頁面中的哪個位置嗎？"確定"按鈕是完成任務的主要操作，而"取消"按鈕是輔助操作，它主要的作用是用于返回到起點屏幕而放棄任務。那么，根據(jù)它們的功能，最佳的按鈕順序是什么？"確定"按鈕應該放在"取消"按鈕之前還是之后呢？
可能這時候很多設計師會按照習慣，選擇遵循一致性，采用一些常見的組件樣式進行操作。雖然這看起來似乎是解決問題的方法，但實際上并非如此。這并沒有回答哪種位置對用戶更有效以及為什么，單純遵循已有組件并不足以讓設計師有更好的思維和主動思考的意識。
"一致性"是設計師中常用的一個詞。然而，這常常也被用作一個借口，讓設計師不深入思考用戶面臨的設計問題，如果一個設計師都不知道為什么一致性的規(guī)則存在，那么遵循這種設計慣例又有什么意義呢？
如果某種設計慣例對用戶來說是有害的，那么設計師是否應該盲目遵循它，僅僅因為要追求一致性？體驗極差的設計樣式和結果是否應該因為設計師希望迎合大家都默認的設計一致性而繼續(xù)存在？這其實本質就是個問題...
現(xiàn)在網(wǎng)上有很多組建和參考，都被設計師天天借鑒和廣泛使用，因為它們適用于用戶。但關鍵在于，設計師永遠不應該滿足于墨守成規(guī)的選擇設計的一致性，將其作為做設計的唯一理由，我們關鍵還是要理解為什么應該以某種方式而不是其他方式來設計用戶界面。
這時候有的設計師可能會主張通過賦予操作按鈕更多的視覺重量和清晰明了的標簽來突出界面中的操作按鈕，而不是僅關注按鈕的位置，雖然操作按鈕的視覺重量和標簽是需要考慮的重要設計方面，但它們并不是唯一的方面。
真正一名有思想，會獨立思考的設計師會綜合考慮每個設計方面對用戶的影響，而不只是關注其中的一個方面，對于設計師來說，最難的是確定主要操作和次要操作的最佳放置方式。這就是我為什么關于"確定"/"取消"按鈕的位置進行說明的原因。
當我們在使用設計組建框架前進行考慮時，你可能會開始明白哪個位置會對用戶效果更好一些，我們可以通過分析設計對用戶的影響來解決這個問題。
有些設計師認為，將主要操作放在左側，在次要操作之前，對用戶來說更好，因為它更近，所以點擊所需時間更少，這看起來好像有點道理，但我們不能忽視一個問題，即在選擇要執(zhí)行的操作之前，用戶會查看所有選項，這意味著大多數(shù)用戶不會在不查看旁邊的次要操作按鈕的情況下盲目地點擊主要操作按鈕。
他們將首先看到左側的主要操作，然后再看右側的次要操作，然后他們會將視線轉回主要操作按鈕進行點擊。這里總共涉及到三個視覺注視點，在多個方向上分散了用戶的注意力。
與將主要操作放在左側相比，將主要操作放在對話框的右側，將次要操作放在左側，用戶只需注視每個按鈕一次，并在主要操作按鈕上結束。這樣一來，視覺注視的數(shù)量就減少了，并且在一個方向上產(chǎn)生了更流暢的視覺流動。
用戶只關注每個按鈕一次，并最終停留在主要操作按鈕上，將主要操作放在左側可能會使用戶更容易點擊，但從用戶的心理過程和視覺注視速度來看，將主要操作放在對話框的右側實際上更快。
當用戶點擊“取消”操作按鈕時，他們期望的是產(chǎn)品不進行任何操作，而是將他們返回到起始屏幕位置，因此，"取消"按鈕的功能類似于"返回"按鈕。
當用戶點擊“確定”操作按鈕時，他們期望產(chǎn)品進行按鈕所表示的操作，并將他們帶到下一個屏幕。因此，"確定"按鈕的功能類似于"下一步"按鈕，將次要操作按鈕放在左側，將主要操作按鈕放在右側，可以與用戶期望的"后退"和"下一步"按鈕功能相匹配。
這類似于分頁按鈕的放置方式，將用戶帶到下一頁的按鈕位于右側，將用戶帶回先前頁面的按鈕位于左側。這種按鈕位置的安排是有效的，因為它與用戶從左到右的閱讀和導航方向相吻合，其中右側是前進方向，左側是后退方向。
對話框中的"確定"和"取消"按鈕應該遵循類似的交互模式，因為它們的功能類似于分頁按鈕，另外這種左右方向模式也是用戶熟悉的。將主要操作放在右側，將次要操作放在左側，可以使對話框按鈕對用戶更易于理解和使用。
將按鈕放置在對話框的右下角更容易被用戶點擊，因為這符合【古騰堡圖表】。在古騰堡圖表中，右下角區(qū)域是終端區(qū)域，用戶在掃視后的最終目的地。
將按鈕放在終端區(qū)域可以使用戶在視覺掃描時看到他們最后需要執(zhí)行的主要操作，這不僅改善了視覺流動，還改善了任務流程。用戶在掃視過程中不會錯過主要操作按鈕，當他們經(jīng)過時，他們的目光會停留在上面，從而可以立即點擊它。
掃視對話框并采取行動變得更快更容易，因為用戶的目光最終會落在主要操作按鈕上。
我們需要考慮另一個問題，那就是我們應該將按鈕放在角落還是放在一起，當將主要操作和次要操作放在對話框的角落時，這與左右導航方向相吻合，這是很好的映射。然而，由于"確定"和"取消"按鈕并不是導航按鈕，因此并不需要遵循方向映射，有時候這樣做可能帶來更多的弊端。
較大的視覺分離使得比較操作變得困難，并將一個操作與另一個操作隔離開來 如果產(chǎn)品頁面即將執(zhí)行用戶無法撤銷的關鍵操作，那么用戶可以看到"取消"按鈕和"確定"按鈕是很重要的。在這種情況下，"取消"按鈕的功能可能類似于"上一步"按鈕，但它更重要，因為它充當安全按鈕以防止任何更改。
將"取消"按鈕放置在最左下角的危險在于，由于兩個按鈕之間的視覺分離較大，可能會導致用戶忽略它。將"取消"按鈕與"確定"按鈕放在一起可以讓用戶更輕松地在一次注視中查看和比較這兩個操作，以選擇最佳操作。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.teruid.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。
如果軟件操作速度提升了，那么在相同時間內，我們可以有更多時間和精力用于方案的思考，提升工作效率。這也是我們經(jīng)?？吹胶芏郆端產(chǎn)品，在系統(tǒng)做快捷鍵的原因之一。在日常軟件的使用中，我們要盡可能的多使用快捷鍵，減少鼠標操作。舉個實例：
比如，“保存” 用鼠標操作：點擊界面開始菜單 - 調出下拉菜單 - 找到“保存”按鈕再點擊，這一系列動作需要點擊 3 次鼠標，花費3～4 秒。如果使用快捷鍵，光靠下意識的動作，就可以在 0.1 秒內完成操作。
下面整理了一些常用的 Figma 快捷鍵使用技巧，幫助我們提升Figma的操作效率，更快更好的完成工作，節(jié)省時間，以便更專注地思考方案。
文章末尾附 Axure RP9、 Sketch提高效率的常用技巧。
快捷鍵：【Ctrl + Shift + ?】 ，打開 Figma 的快捷鍵面板，可查看 Figma 的所有快捷鍵，方便快速查找。
快捷鍵是【K】，在設計中縮放是經(jīng)常要用到的功能，在 Figma 中，按一下【K】鍵進行縮放，就可以完全保證比例。
快速畫出環(huán)形進度條的方法，先畫一個圓，然后鼠標拖動兩下就完成了。如下圖：
在桌面或文件夾，選擇需要填充的圖片【Command + C】。點選Figma中待填充元素【Command + V】。填充成功，如下圖：
選中一個已經(jīng)調整好樣式的元素（圖形或文字），第一步：【Command + option + C】，第二步：【Command + option + V】就可以把樣式復制粘貼下來。如下圖：
對于使用組件的元素，在調整的時候需要修改組件母版，才會對每個組件生效。當有很多組件時，我們可以通過任意組件，點選右側“跳轉回組件母版”icon，快速定位至母版。如下圖：
第一步：點選右側“跳轉到組件母版”icon，右側紅框處
第二步：自動定位到該組件母版
選擇一組陣列中的多個元素之后，可以隨意交換任意兩個元素之間的位置，其他的不受影響，還能直接拖動調整它們的間距。如下圖：
快速批量修改顏色。比如下面九個元素中有三個是紅色，當我想要批量修改這三個紅色元素的時候，我不需要一個個選擇這三個元素，只需要批量選擇，然后在右側屬性欄那里，選擇想修改的那個紅色，直接改顏色，三個元素的顏色就會一起修改了。
快捷鍵【Alt+L】，可以直接將所有圖層折疊起來，這樣，不管之前展開了多少層，都能直接折疊，方便快速瀏覽整個系統(tǒng)的全貌。
使用鍵盤快捷鍵快速瀏覽圖層?？旖萱I【Tab】快速向 下 切換選中圖層，【Shift+Tab】快速向 上 切換選中圖層。
使用顏色樣式時，這里有一個小按鈕（下圖紅框標出），可以快速得在列表樣式和網(wǎng)格樣式之間進行切換，使用列表樣式能夠更方便瀏覽使用了哪些顏色，方便進行管理。
吸色工具的快捷鍵是【i】，當你按住【i】鍵不動時，移動光標，就能預覽顏色，而不是直接取色了，預覽的顏色就如下圖，是展示在右上角的。
快捷鍵是 【cmd/ctrl + D】，如下圖所示，向右下方復制一個元素，然后使用【cmd/ctrl + D】，會繼續(xù)向右下角復制元素，重復的是相關對象和操作中設計到的所有元素。
如果設計時輸入了一些文本，行高有問題，但是暫時又沒有很明確的行高參數(shù)，這個時候，只需要在行高這里輸入 auto，點擊回車，就可以把這些文字設置成自動行高了。如下圖紅框位置：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.teruid.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。 著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。
先問你一個問題。
拼多多、淘寶、京東這三家購物平臺，你認為它們的區(qū)別是什么？
或者換個方式問你。
買電器你去哪個平臺？買衣服你去哪個平臺？ 買垃圾袋你去哪個平臺？
是不是有了答案了？
沒猜錯的話， 大部分人的答案是：買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。
你看，這就是一個購物心智模型，你的心里對這三家平臺已經(jīng)產(chǎn)生了固有的心智，如果讓你去京東買衣服，你會不會覺得，有些別扭？沒錯，這就是心智模型。
百度百科對心智模型的定義是：
“深植我們心中關于我們自己、別人、組織及周圍世界每個層面的假設、形象和故事。并深受習慣思維、定勢思維、已有知識的局限?！?
關鍵詞是：故事、習慣、局限。
淘寶一開始就我們講了一個故事，一個萬能的集市，我們習慣在上面買衣服，但是也產(chǎn)生了局限性，那就是，當我們想買大額電器的時候，還是會選擇京東。
我個人對心智模型的理解是：
我們內心深處對一個事物的看法。
空口聊天多沒意思，下面舉個例子。
這是一尊陶俑，第一眼你覺得她像什么？
是不是覺得像米老鼠？
為什么？
因為陶俑的頭上的發(fā)髻和米老鼠標志性的耳朵很像。
如果你從沒見過米老鼠，你還會覺得她像米老鼠嗎？
一定不會。
這就是心智模型，你對頭頂?shù)拇髨A形的心智是“米老鼠”，所以一旦你看到類似的形狀，米老鼠的形象就會浮現(xiàn)出來，這個發(fā)髻的形狀和你心里對米老鼠的形象產(chǎn)生了匹配。
對心智模型有沒有一點印象了？下面我們接著聊。
我不想用具體的界面來聊，那樣的話太散，我認為要想理解一個概念，最好還是從“面”的角度來說，所以下面我會舉一些商業(yè)上的案例來輔助理解。
心智模型有哪三種運用方式？
第一種：創(chuàng)建新的心智模型
第二種：改變舊的心智模型
第三種：匹配現(xiàn)有的心智模型
可以理解成一件事情的新生、改變和延續(xù)。
下面咱們一個個來。
第一種：創(chuàng)建新的心智模型
難度指數(shù)：難啊。
記得《盜夢空間》里最難的是什么嗎？
最難的不是盜夢，而是植入一個想法。
創(chuàng)建新的心智模型有異曲同工之妙，都是讓別人內心接收一個事物，需要刻意培養(yǎng)。
舉幾個例子。
當年外賣剛開始的時候，家家搞補貼，很多時候幾乎不花錢就可以點外賣，后來這些福利沒有了，為啥？
因為點外賣的心智已經(jīng)培養(yǎng)好了，你離不開它了，所以平臺可以“不慣著你了”。
還有唯品會的正品低價、瑞幸一開始的星巴克平替，這些都是他們想要植入到用戶大腦中的心智。
為什么要費勁植入一個新的想法？
因為一旦植入了，就很難改變。
現(xiàn)在我身邊的很多朋友想買一些低價的品牌都會上唯品會，買咖啡會喝瑞幸，一旦用戶的習慣養(yǎng)成就很難改變，意味著什么？
意味著留存和轉化的成本更低了。
第二種：改變舊的心智模型
難度指數(shù)：也難。
《盜夢空間》里小李子的妻子被他植入了一個想法“你不在現(xiàn)實世界里”，當他和他妻子回到現(xiàn)實世界后，他妻子仍舊認為自己不在現(xiàn)實世界里，這個被植入的想法已經(jīng)根深蒂固，很難改變。
所以改變舊的心智也不簡單。
例如小米最初主打極致性價比，后來想往高端路線走，很難，大家心里已經(jīng)認準了小米就是“性價比之王”，也就是你的產(chǎn)品不僅要好還要便宜。
這就導致小米一漲價，大家就罵他們忘了初心……所以小米拆分出了紅米主攻性價比，小米往高端發(fā)展，但是仍舊很難。
拼多多的百億補貼也是一樣的道理，一開始的砍一刀深入人心，大家對拼多多的心智已經(jīng)成型：便宜，質量一般。拼多多想改變這個心智，推出百億補貼，并承諾假一賠十，就是想告訴大家，我拼多多，也是有正品好貨的。不過，效果嘛，見仁見智。
第三種：匹配現(xiàn)有的心智模型
難度指數(shù)：相對簡單。
其實匹配現(xiàn)有的心智模型，是相對最簡單的方法，市場已經(jīng)幫你把用戶習慣培養(yǎng)好了，你直接使用，那肯定事半功倍，省時省力啊。
舉個例子，大家最近有關注小米的 13 Ultra 嗎？
小米和徠卡聯(lián)合研發(fā)的，主打徠卡調色的相機。
我有一個同事就直接把手里的微單換成了 13 Ultra，因為拍照足夠好看而且便攜。
這里不是要推銷手機啊，是想讓你們了解 13 Ultra 是個什么東西。
然后給大家看看它的手柄（一個配角，可以拆卸）。
是不是有些熟悉？和相機像不像？
這個手柄就是沿用了相機的心智模式。
小結一下：
心智模型有 3 種用法：
下面聊聊，咱們怎么做才能更加匹配用戶的心智模型？
同樣的，我不會拿具體頁面來舉例，還是希望把思考方式分享給大家，而不是某一個頁面的設計。
要想匹配用戶的心智模型其實就三步：
了解業(yè)務、了解用戶、競品調研。
或者可以這么說， 在懂業(yè)務、懂用戶的基礎上，還要了解行業(yè)內的通用做法。
1. 了解業(yè)務
一定要了解業(yè)務，為什么？
因為好的設計方案千千萬，但是匹配你的業(yè)務的方案才是好方案，如果不了解業(yè)務，可能設計出來的方案就是自嗨，例如網(wǎng)上很多的 dribble 風設計。
又比如說手機瀏覽器一般都把搜索框放到屏幕頂部，而夸克瀏覽器卻把搜索框放到了下面。
為什么？
因為夸克想推翻傳統(tǒng)的瀏覽器，想打造一款更年輕更好用的瀏覽器，把搜索框放到下面也是滿足他們的業(yè)務訴求，現(xiàn)在手機屏幕越來越大，搜索框放在下面手指操作更加方便。
所以，一定要先去了解業(yè)務。
拼多多和淘寶同樣都是電商平臺，可它們的用戶心智相差甚大，因為最后方案設計是服務于最初的業(yè)務目標的，業(yè)務不同，呈現(xiàn)的方案也不一樣，最后讓用戶形成的心智也不同。
2. 了解用戶
為啥？給老人和小孩設計的界面能一樣嗎？
就拿顏色和文字來說。
小孩喜歡高飽和、豐富的顏色，而老人則需要考慮在各種場景下都能看得清楚信息的顏色。
小孩喜歡圓潤的卡通字體，而老人需要識別度更高的字體，更大的字號。
不同的用戶，采用的設計一定是不同的，只有了解了他們的喜好和痛點，才能做出符合他們心智模型的設計。
3. 競品調研
為啥要競品調研呢？
因為競品和我們的產(chǎn)品類似，那么意味著用戶大概率重合度也高，甚至業(yè)務上都有一定相似度，那么意味著，競品的方案，大概率是經(jīng)過市場驗證的符合用戶心智模型的方案。
你看，既然競品已經(jīng)給咱們打了個樣，為何還要自己悶頭造輪子呢？
咱們目的是解決問題，又不是為了證明自己很厲害。
但是，不要誤解，我不是說照著競品抄，而是取長補短，所以不僅要調研，還要分析，分析就是把競品的優(yōu)劣勢找出來，好的地方咱們可以酌情借鑒，不好的地方，咱們也要避個雷嘛。
好了，小結一下，要想匹配用戶的心智模型，一定要了解業(yè)務、了解用戶，還要做競品調研了解市場的通識性做法。
以上。
文章來源：優(yōu)設網(wǎng) 作者：餿面包
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.teruid.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
藍藍設計的小編 http://www.teruid.com
