動效在 UI 場景中的運用已經(jīng)非常普遍，帶給用戶的體驗升級也是很直觀的。無論是一個圖標(biāo)動效到界面間的轉(zhuǎn)場動效，還是聊天場景中的表情動效等，都證明了動效已經(jīng)是無處不在。
最近黑馬哥在體驗產(chǎn)品的過程中，發(fā)現(xiàn)了很多優(yōu)秀的動效案例，今天選擇其中的 10 個和大家一起交流學(xué)習(xí)，希望能夠帶給大家一些靈感啟發(fā)。
01. 動效，讓點贊與眾不同
動態(tài)表情為社交場景帶來更活躍的體驗，使得交流過程變得更加趣味性。一個動態(tài)的表情不僅活躍了氛圍，也使得通過簡單的一個符號代表了千言萬語。
最近在使用釘釘 APP 進(jìn)行聊天的過程中，發(fā)現(xiàn)輸入框的大拇指圖標(biāo)在長按的時候結(jié)合了動效的變化，對話場景中出現(xiàn)的大拇指表情會隨著長按而增大。結(jié)合動效和長按手勢，為點贊的圖標(biāo)增加了不一樣的趣味性，帶給用戶不一樣的社交體驗。
02. 動態(tài)提醒，增強消息的關(guān)注度
各類通知/消息在產(chǎn)品中隨處可見，紅點提示剛出現(xiàn)的時候還引起了用戶強迫癥，短時間內(nèi)也增強了消息的閱讀率。隨著紅點效應(yīng)逐漸淡化，未讀消息的點擊率逐漸降低，大家都在嘗試更多提高關(guān)注度的形式。
支付寶在消息模塊的服務(wù)提醒中，采用了動態(tài)形式提高關(guān)注度。當(dāng)用戶點擊消息進(jìn)入界面時，小鈴鐺圖標(biāo)會左右晃動，以此來吸引用戶的目光，達(dá)到增加關(guān)注度的目的。
03. 圖標(biāo)動效，讓你脫穎而出
在金剛區(qū)眾多的業(yè)務(wù)模塊中，想要突出重點模塊的關(guān)注度，采用動態(tài)圖標(biāo)是比較常用的方式。采用動靜結(jié)合的形式，會讓動態(tài)表達(dá)得到突出。
比如 Keep App 將活動挑戰(zhàn)圖標(biāo)動效化，在不改變配色規(guī)則和圖標(biāo)設(shè)計規(guī)范前提下，依然可以達(dá)到突出主題的作用。
04. 博人眼球的動態(tài)懸浮廣告
在不破壞產(chǎn)品結(jié)構(gòu)的前提下，融入廣告的做法中，懸浮層廣告是較為明顯的形式。通常是靜態(tài)異形和動態(tài)異形較多，而動態(tài)的關(guān)注度相對更強一些。
比如 Keep App 將活動的折扣信息以懸浮層的形式表達(dá)，既不會占用太多空間（隨著滑動會隱藏顯示），又能吸引用戶的關(guān)注度。如果用戶覺得影響操作，也可以直接關(guān)閉，就不會反復(fù)提醒而形成干擾。
05. 內(nèi)容模塊結(jié)合動效替換突出存在感
在一些內(nèi)容量比較多的產(chǎn)品中，比如電商產(chǎn)品，很多內(nèi)容模塊都是百花齊放。都想要突出自己模塊的存在感，帶來更好的流量引入。而動效的結(jié)合也是不錯的選擇，但是需要考慮動效的干擾度。
當(dāng)當(dāng) App 在突出今日搶購欄目時，為了不影響臨近板塊的干擾度，利用動效轉(zhuǎn)場來替換展示的商品信息?？s放替換商品時的動效既能達(dá)到差異化，也不會破壞整體的結(jié)構(gòu)，算是一舉兩得的設(shè)計解決方案。
06. 微弱的動效也能呈現(xiàn)有溫度的設(shè)計
有時候在進(jìn)行產(chǎn)品設(shè)計的時候，動效帶來的關(guān)注度并不是需要很強的表現(xiàn)力，一些微弱的動效依然可以提升產(chǎn)品體驗，帶給用戶更有溫度的設(shè)計。
自如 App 整體的設(shè)計都是做得非常不錯的，在“我的”板塊頭部區(qū)域，結(jié)合背景插畫視覺感也是非常不錯。插畫中部分元素的微動效增強了生活氣息和真實感，讓用戶感受到這是一款有溫度的產(chǎn)品，提升用戶的好感度。
07. 動態(tài)感十足的底部標(biāo)簽欄
圖標(biāo)動效運用到底部標(biāo)簽欄十分普遍，在這個頻繁切換的操作中，動態(tài)的形式可以帶來更強的趣味性和關(guān)注度。
優(yōu)酷 App 底部標(biāo)簽欄采用多種顏色變化轉(zhuǎn)場，結(jié)合路徑動效帶來動感十足的體驗。首頁圖標(biāo)還結(jié)合了刷新的功能，方便用戶進(jìn)行內(nèi)容的刷新，增強用戶體驗感。
08. 拓展功能的動態(tài)指引設(shè)計
針對一些功能體量較大的產(chǎn)品，會經(jīng)常結(jié)合一些隱藏式設(shè)計，拓展出更多功能操作。通常默認(rèn)為展開狀態(tài)，在滑動瀏覽內(nèi)容時隱藏，通過動效吸引點擊展開，不會造成主內(nèi)容的干擾。
比如平安口袋銀行底部標(biāo)簽欄上方的拓展功能區(qū)，動態(tài)形式的展開與隱藏方便用戶瀏覽主頁內(nèi)容。個別內(nèi)容采用動態(tài)設(shè)計（點我抽獎），突出其點擊欲望。動態(tài)設(shè)計不僅提高了功能的曝光度，也能引導(dǎo)用戶操作，將繁瑣的操作變得更便利。
09. 結(jié)合動態(tài) IP 的下拉刷新
針對下拉刷新這一常規(guī)操作，設(shè)計形式也是豐富多樣。結(jié)合 IP 形象進(jìn)行動態(tài)演變完成刷新動作，被很多產(chǎn)品設(shè)計師所采納。
美團(tuán)外賣就將品牌 IP 形象結(jié)合得恰到好處，下拉刷新時兩只耳朵搖擺非常俏皮可愛，松開后 IP 形象露出，還配合眨眼睛等可愛的表情動效。情感化設(shè)計結(jié)合動態(tài)表現(xiàn)，拉近與用戶之間的親和力，帶給用戶更人性化的使用體驗。
10. 圖標(biāo)動效帶動局部功能的關(guān)注度
對于一些局部功能或者模塊占比較小的欄目，為了提高曝光度，獲得用戶的關(guān)注度，動態(tài)的形式是比較常用的方法。通常會在圖標(biāo)部分、文字部分、裝飾元素部分等進(jìn)行動效設(shè)計，帶來的效果也是顯而易見。
比如 QQ 音樂在“我的”模塊中，將活動中心、會員中心、每日簽到的圖標(biāo)采用動態(tài)設(shè)計形式，雖然幾個模塊占比較小，但是依然能夠獲得用戶的關(guān)注度。
小結(jié)
動效表達(dá)在產(chǎn)品設(shè)計中的應(yīng)用越發(fā)普及，不僅可以強化功能的關(guān)注度，也能帶給用戶感官體驗上的升級。優(yōu)秀案例的積累和分析，有助于我們掌握更多的表現(xiàn)形式，靈活的運用到項目設(shè)計中。
作者：黑馬青年（vx: heimaux）
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
當(dāng)你為你的項目創(chuàng)建有效的，可訪問的，漂亮的ui時，只需要最小的調(diào)整來幫助快速改善你的設(shè)計。 努力創(chuàng)造。在這篇簡短且易于理解的指南中，我收集了一些容易放置的內(nèi)容。在實踐中，這些小技巧可以毫不費力地幫助你改善你的設(shè)計，還有用戶體驗。
希望你喜歡！
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界（只是一個陰影比你的實際影子）周圍的某些元素可以使這些元素出現(xiàn)
更清晰，更清晰，幫助你避免那些看起來泥濘的陰影。
標(biāo)題給一個更好的光學(xué)范圍。減少長格式正文的字母間距？這是一個大大的“不”。但對于標(biāo)題……我要說“是”!
你的標(biāo)題很可能會比他們的標(biāo)題更大，更重。相比于正文，字母之間的間距有時會出現(xiàn)視覺上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標(biāo)題視覺平衡，更易于閱讀，通常更賞心悅目。
為了一致性，確保你的圖標(biāo)具有相同的視覺風(fēng)格。確保它們擁有相同的視覺風(fēng)格;同樣的重量，要么填滿，要么秒變了。不要混搭。
只使用一種字體就很好。在設(shè)計時，使用單一字體是絕對沒問題的，這樣做實際上可以幫你產(chǎn)生更強、更持久的結(jié)果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產(chǎn)生完美的可接受的結(jié)果。雖然只有一個單獨的字體。
留白是UI設(shè)計朋友。大膽的使用。適度的留白，即使是少量的白色物質(zhì)，但要使用得當(dāng)。能讓你的設(shè)計透氣，而且看起來更光亮。
創(chuàng)建長篇內(nèi)容？給20 pt試試。對于長形式的內(nèi)容（即微博文章，項目描述等等），試著這樣做20pt(甚至更多一點)為你的文本字號。當(dāng)然，這取決于所選擇的字體，但大多數(shù)流行的字體在20pt時效果得很好，并帶來更好的閱讀體驗當(dāng)你的用戶面對一堵文字墻的時候。18pt太過時了。
使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義，Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標(biāo)題、按鈕等)字體比例將幫助你產(chǎn)生看起來和諧的文本字號集。因為他們的大小根據(jù)設(shè)定的固定比例增加和減少。
選擇一個基本顏色，然后使用色彩和色調(diào)增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設(shè)計。如果項目允許，簡單地使用一個有限的調(diào)色板選擇一個基地顏色，然后使用你選擇的顏色的色調(diào)和陰影可以增加一致性以最簡單的方式來改變你的設(shè)計。
改善用戶登錄的體驗。記住拇指規(guī)則。允許用戶在任何時候跳過您的移動應(yīng)用程序上線序列，并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調(diào)整，可以為你的用戶提供更好的體驗……
記住，拇指仍然是主宰！
你的影子來自其中一個光源對吧？確保你的影子總是來自一個光源。這是一個簡單的錯誤，但它可以讓你的設(shè)計看起來更拋光且統(tǒng)一。記住，我們不是生活在一個擁有一千個太陽的國度里。
使用更好的字體組合，效率會很很快。當(dāng)你想要提高你的字體組合技巧的時候，當(dāng)面對1000個字體選擇，只是去尋找對應(yīng)的自己集合，效率會快很多。
文字和圖像與一個微妙的覆蓋。根據(jù)文本可能放置在圖像上方的位置，您可以選擇嘗試，并測試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實現(xiàn)兩者之間的簡單對比。為了在你的文本之間形成良好的對比，不要太復(fù)雜的內(nèi)容和圖片。
太多就會導(dǎo)致用戶體驗不合格。盡量只在標(biāo)題和小段落中使用中心文字。對于幾乎所有其他內(nèi)容，保持文本左對齊。你的用戶會感謝你的你。
當(dāng)選擇一個多用途的文字，盡量找一個大量權(quán)重。你搜索的字體有很多選擇嗎？重量、風(fēng)格？如果你打算在你的一些項目中使用它，請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當(dāng)然也有例外，某些項目會要求“只有一種風(fēng)格”
更精致的字體，但對于絕大多數(shù)項目，你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風(fēng)格，希望你在設(shè)計過程的后期需要更多的空間。
想要創(chuàng)造更容易理解的界面，對吧？把你的文字調(diào)暗在光亮的背景上。在淺色背景下工作時，不要讓你的文本太亮。
當(dāng)涉及到長形式的內(nèi)容時，某些常規(guī)的粗細(xì)字體仍然可以看。但太重了，在屏幕上會很僵硬。你可以很容易地解決這個問題，選擇一些像深灰色（即#4F4F4F）的基調(diào)，把文字往下寫，讓眼睛更容易看。
總是通過icon最突出的內(nèi)容。你認(rèn)為這是常識，對嗎？我并不覺得。通過使用色彩對比度做區(qū)分，尺寸和標(biāo)簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標(biāo)。如果可以使用文本標(biāo)簽，那就使用它們，讓用戶更好地理解。
當(dāng)你的字體變小時，請增加行高，以達(dá)到更好的通用性。這同樣適用于當(dāng)你的字體大小增加。簡單地降低行高。
使用x-height來測試字體的可讀性?；旧?，x-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高，通常有助于更好地閱讀，特別是在使用長形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無法選擇的字體，可以做這個測試，比較來自特定字體的三個字符：大寫字母I，小寫的L和數(shù)字1。
當(dāng)設(shè)計一個在應(yīng)用程序內(nèi)部使用的菜單時，確保提供最多經(jīng)常使用的動作（例如：上傳圖像，添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇，會給你的產(chǎn)品帶來生命。簡單地從你的產(chǎn)品圖片中選擇顏色，然后應(yīng)用各種色調(diào)。你選擇的顏色陰影到你的背景，文字，圖標(biāo)或更多，可以添加。你的設(shè)計具有豐富的視覺趣味和個性。
基于字體的x坐標(biāo)，設(shè)置您的線高度。不同x高的字體需要不同的行高測量，實現(xiàn)文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來實現(xiàn)。
突出最重要的元素。通過使用字體大小，權(quán)重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡單，但微妙的調(diào)整，讓用戶體驗更好一點。
操作錯誤的時候，添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式，但很有幫助，當(dāng)他們填寫任何形式的表格時額外的視覺輔助。
嘗試在移動端創(chuàng)建慷慨的熱區(qū)。當(dāng)為移動設(shè)備設(shè)計時，嘗試創(chuàng)建足夠大的可點擊區(qū)域，是好的。對于只包含文本的按鈕和鏈接來說，這是很有挑戰(zhàn)性的，盡可能使用帶有標(biāo)簽的圖標(biāo)。
以下是iOS和Android的最小推薦點擊區(qū)域：
44 x 44pt用于iOS
48x48dp用于Android
在短標(biāo)題上盡量使用全大寫。如果你想在標(biāo)題上使用全大寫，請確保它們在任何時候都很短。有可能，最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣，在標(biāo)題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺效果更好。
在輕文本和圖像之間，保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應(yīng)用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。
看看這些很棒的字體，用在標(biāo)題非常好的。發(fā)現(xiàn)他們真的很適合標(biāo)題，設(shè)計感很強。（我沒有推廣費用，請放心用）
看看這些很棒的字體，用于長文本是非常好的，強烈推薦使用。（我仍然沒有任何推廣費）。
標(biāo)題和正文。當(dāng)你想實現(xiàn)一個好的垂直節(jié)奏，以及一個強大的視覺之間，需要對文本元素排版、間距作設(shè)計。我見過許多設(shè)計，最常見的是在文章列表中，它們已經(jīng)被應(yīng)用標(biāo)題的上下空白相等，這樣就失去了這種聯(lián)系在它下面有正文。在這種情況下，我總是會給我的標(biāo)題更多的頂部邊距，而在底部，標(biāo)題和下面的內(nèi)容之間的連接是更強，有良好的垂直節(jié)奏，視覺層次保留在所有的文章之間。
對于下載指標(biāo)，試著去做盡可能提供信息。對于用戶，嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現(xiàn)這一點，用百分?jǐn)?shù)來顯示當(dāng)前進(jìn)度，一個簡單的圖標(biāo)，讓他們可以在任何地方取消下載時間。
如果你能保持標(biāo)題簡短，簡潔……“想做就做”。
如果可以，如果合適的話，保持標(biāo)題簡短，時髦，切中要點。而不是“這是你的風(fēng)格，你的方式”，簡單地使用像這樣的“你的風(fēng)格。你的方式。”人們會瀏覽，保持這些標(biāo)題簡短有力有助于他們更快地消化中的信息。
記住，這種方式可能會讓人感覺很突然，你需要考慮一下你所從事的項目類型，以及目標(biāo)受眾來決定方法是合適的，相對于更標(biāo)準(zhǔn)的格式。
正確的設(shè)計“聲音”。在項目中處理文本時，選擇正確的字體將影響就像你說話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨特的聲音，關(guān)鍵在于找到合適的字體你正在做的項目的聲音。當(dāng)你剛接觸字體時，這似乎是一項艱巨的任務(wù)，所以不要害怕從類似的項目中獲得靈感，并從這些項目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。
你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面，45到75個字符被普遍認(rèn)為是滿意的行長度，而行長度為66個字符(包括字母和空格)被發(fā)現(xiàn)是最佳位置。當(dāng)然，字體大小和行高在決定可讀性時也起著重要作用，但是對于行長，保持在45到75個字符之間，就會更好了。
偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問題。屏幕上的大部分文本內(nèi)容應(yīng)該堅持可用性最佳的做法是沒有問題的。但有時，希望添加純出于裝飾目的的文本，我們不希望所有的設(shè)計都落入乏味。如果沒有元素會以任何方式影響用戶體驗，那么出于裝飾的原因，插入奇怪的元素是可以的。
使用戶界面中的元素彼此區(qū)分。按鈕、通知，ui中兩個獨立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區(qū)分開來，輕松掃描您的網(wǎng)站或應(yīng)用程序。按鈕，在大多數(shù)情況下，將優(yōu)先，所以確保他們是最突出的。項目在屏幕上，并很容易區(qū)分其他元素。
只是一些細(xì)微的陰影，你所需要的。我們都喜歡陰影，對吧？它們可以作為微妙又很強大的視覺線索，在您的設(shè)計中使用要適度。現(xiàn)實世界中的陰影，在大多數(shù)情況下幾乎是不可察覺的，而且所以你應(yīng)該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實現(xiàn)一些的東西更微妙和栩栩如生。
使用全部大寫？選擇適合的字體，能夠達(dá)到光學(xué)清晰度。在你的設(shè)計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重，使用戶的光學(xué)清晰度。
讓面包屑脫穎而出，易于為用戶解釋。面包屑無處不在，經(jīng)常用于內(nèi)容豐富的網(wǎng)站，通過最小的調(diào)整，你可以確保用戶能夠快速定位他們在一個網(wǎng)站上的位置以及他們可能需要去的其他地方。如果用戶已經(jīng)通過使用跳轉(zhuǎn)到網(wǎng)站的某個深度，這一點尤其有用。
使用高度飽和的顏色?試一試用淺色調(diào)來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍(lán)色、紅色、綠色等)可以讓網(wǎng)站看起來很棒，但是當(dāng)過度使用時，它們會使使用者的眼睛疲勞，主要是在使用的時候的文字內(nèi)容。盡可能使用時要適度，并盡量與柔和的顏色搭配顏色或色調(diào)變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內(nèi)容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時，可讀性和可訪問性應(yīng)該是最優(yōu)先的。
在ui中使用已建立的圖標(biāo)，為了避免給用戶造成混淆。在你的設(shè)計中添加圖標(biāo)時，試著選擇一個有代表性的已建立的圖標(biāo)。不要選擇一個能傳達(dá)正確含義和功能的圖標(biāo)否則會引起困惑，成為用戶的認(rèn)知障礙。不要在這些圖標(biāo)上過于叛逆。
在眾多經(jīng)過嘗試和測試的設(shè)計原則中，這里有一個是幫助您為用戶生成更清晰的ui的關(guān)鍵。接近只是確保相關(guān)設(shè)計元素放置在一起的過程，表明彼此之間的關(guān)系，這有助于加快用戶的認(rèn)知。
4pt基線網(wǎng)格+ 8pt網(wǎng)格=單一網(wǎng)格。當(dāng)使用類型時，8點網(wǎng)格旁邊使用4點基線
可以為你的設(shè)計帶來更和諧的垂直節(jié)奏。您需要對齊您的類型到基線網(wǎng)格4，使用的行高值為4的倍數(shù)（16、20、24、28等）
為什么4？我發(fā)現(xiàn)在過去使用特定的文本大小時，按8的倍數(shù)縮放是不太合適。
減少標(biāo)題上的行高是很好的。與長形式的主體文本不同，它需要足夠的行高，以便折行易讀。標(biāo)題的推薦行高通常約為1至1.3倍。
選顏色有困難計劃嗎？在顏色上進(jìn)行類比論。類似的顏色，也被稱為相鄰或相鄰的色調(diào)，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調(diào)幫助您創(chuàng)建一個簡單的，顏色方案快速。當(dāng)你需要快速將顏色調(diào)和到混合中時，可以使用類似的方法。
在你的設(shè)計中盡量提高信噪比。你可以在你的設(shè)計中通過最大化信號來實現(xiàn)清晰和可用性最小化噪聲，從而產(chǎn)生高信噪比。您可以通過確保提供相關(guān)信息(信號)來實現(xiàn)這一點有效，不相關(guān)的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說話。語氣嗎？嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時，使用類似全小寫的拷貝可以呈現(xiàn)更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達(dá)到較強的對比。
當(dāng)使用類型時，元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進(jìn)行細(xì)微的調(diào)整就可以實現(xiàn)這一點。這樣做可以讓用戶掃描并找到必要的元素，避免在過程中產(chǎn)生任何混淆。
養(yǎng)肥了，字體大小為最佳易讀性。當(dāng)設(shè)置暗色文字與淺色背景，選擇一個更輕的粗細(xì)。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量，特別是對于長表單副本。以最佳的易讀性為目標(biāo)，避免讓用戶的眼睛疲勞。
試著為你要呈現(xiàn)的內(nèi)容選擇合適的字體。用戶是精明的，有一種直觀的感覺，當(dāng)內(nèi)容與他們交談當(dāng)它不是。正確的字體選擇是至關(guān)重要的，使您的內(nèi)容講給他們直率和情感的水平。
你是否使用全大寫的短行文本？嗯…這是一個好主意，增加這些字母之間的間距，以達(dá)到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因為字母更多彼此區(qū)分。字母之間的間距只要稍微增加一點就可以。
打開這些錯誤消息，您的表格有幫助。在使用表單時，請嘗試并確保錯誤消息得到解釋。出了什么問題，如何補救。總是讓用戶了解情況，即使是像常規(guī)一樣常見的事情的形式。讓這些錯誤消息有用，不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會發(fā)生一些的事情你的應(yīng)用程序。顯示應(yīng)用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發(fā)生一些事情。系統(tǒng)狀態(tài)可見性是一個重要的原則要遵循，并允許用戶知道發(fā)生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應(yīng)用了某個動作。在應(yīng)用特定的操作之前，總是嘗試并詳細(xì)地告知用戶可以有結(jié)果。這尤其適用于具有不可逆轉(zhuǎn)后果的行為，如刪除某些東西。讓用戶知道將要發(fā)生什么，并在此之前要求他們進(jìn)行確認(rèn)。他們就會按下那個標(biāo)有“刪除”的紅色大按鈕。
參考文獻(xiàn)《UI & UX Micro Tips - The Ultimate Collection》
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
在設(shè)計的創(chuàng)作重，很多設(shè)計師都喜歡追求軟件技法帶來的炫酷感，而忽略了構(gòu)圖理論知識帶來的重要性，這篇文章就是為了解決這個問題
海報設(shè)計對于初學(xué)者而言，是一個簡單入門，又容易出作品集的類目。在剛開始練習(xí)時不要天馬星空的去想象，最好的練習(xí)就是根據(jù)一定的構(gòu)圖規(guī)范，嘗試尋找規(guī)律，建立可行的秩序，讓版面具有一定的閱讀性。
-
只有在版面具有基礎(chǔ)的閱讀性，才可以根據(jù)想法思路進(jìn)行創(chuàng)意性的表現(xiàn)，而建立持續(xù)最簡單的方式之一就是運用構(gòu)圖。當(dāng)下主流的常用構(gòu)圖，我大概總結(jié)整理有七種形式，下面我們一起來了解一下，附帶案例演示。
第一種：四周壓角構(gòu)圖→
四周壓角構(gòu)圖指的是將標(biāo)題或者重要信息放置在版面的四個邊角處,可以是圖形或者文字，其余信息元素等則放置在畫面中間區(qū)域，使其整個版面嚴(yán)謹(jǐn)有序,平衡且具有視覺的張力。壓住四角一般會結(jié)合居中式構(gòu)圖來呈現(xiàn)版面,可以產(chǎn)生視覺聚焦。
①
將信息壓在四個角之內(nèi)
②
將信息超出頁面四角一部分
③
將信息沿四周環(huán)繞排版
第二種：對稱式構(gòu)圖→
對稱式構(gòu)圖指的是將版面分成上下或者左右兩個部分,上下或左右兩部分比重相同,排版相似,對稱式構(gòu)圖可以使版面更加有秩序感,適合處理信息較多,層級較為復(fù)雜的內(nèi)容。對稱式構(gòu)圖可以很快速的塑造出版面的平衡，視覺上的平衡幾乎就等于完成了版面的50%設(shè)計目的。是初學(xué)者中最為常見的形式之一，對稱之間互相呼應(yīng)，信息處理可以從中快速打破呆板狀態(tài)，讓版面具有靈活性。
①
上下對稱式構(gòu)圖
②
左右對稱式構(gòu)圖
第三種：居中式構(gòu)圖→
居中式構(gòu)圖也叫中心式構(gòu)圖，是指把主體信息放在版心中間,這樣容易產(chǎn)生視覺聚焦,其他信息圍繞版面中心來進(jìn)行排版設(shè)計,放在版面中心的可以是文字、圖片、圖形或者文字等。使用居中式構(gòu)圖，需要多注意畫面整體的平衡和元素之間的留白關(guān)系，讓元素組合之間留有足夠的對比與閱讀性。
第四種：S型式構(gòu)圖→
S型式構(gòu)圖,將主要元素按照S型排版,版面更加的自由生動,非常具有表現(xiàn)力,是一種很常見的靈活構(gòu)圖手法,主要元素可以是圖像、圖形、標(biāo)題文字、slogan等。S型式構(gòu)圖是講曲線與版面進(jìn)行結(jié)合，可以快速的創(chuàng)造出靈活的版面視覺以及節(jié)奏感，可以很好的提高版面的形式感，同時也可以有效的引導(dǎo)觀眾讀者的視線。
第五種：三分式構(gòu)圖→
三分式構(gòu)圖是指將版面分割成相等或不等的三塊區(qū)域,每個區(qū)域放置相應(yīng)的信息,三分式構(gòu)圖分垂直三分法和水平三分法,三分之后版面更有秩序感,適合處理文案較多,層級較為復(fù)雜的內(nèi)容。難度較高，同時容易讓版面連貫性斷層，所以在運用當(dāng)中需要額外留意元素與空間之間的融合表現(xiàn)。
①
水平三分式構(gòu)圖
②
垂直三分式構(gòu)圖
第六種：傾斜式構(gòu)圖→
傾斜式構(gòu)圖,是指將版面整體或者主要元素作傾斜處理,也可做透視處理或?qū)翘幚?這種構(gòu)圖使版面更靈活,更加的具有形式感，作傾斜處理的元素可以是主題、圖片等元素。傾斜與對角可以提高文字或圖片的表現(xiàn)力，能很快速的塑造整體的空間感。
第七種：散點式構(gòu)圖→
散點式構(gòu)圖,是指將元素按照規(guī)律或者不按照規(guī)律自由的放置在版面的區(qū)域,散點放置的內(nèi)容通常有文字,圖片等,通常散點式構(gòu)圖都會結(jié)合S型式構(gòu)圖搭配使用,這種構(gòu)圖形式感強,更具有畫面表現(xiàn)力.在運用的時候，需要特別注意文字或標(biāo)題的閱讀性，過于搶鏡會讓版面丟失主題。
光說不練假把戲，實操案例來一個，這一個案例是圍繞四周壓角構(gòu)圖來分享海報的制作操作技巧。
涉及到的知識點有:
①四周壓角構(gòu)圖的技巧;
②文字編排;
③利用文字的局部輪廓化使版面更具有形式感。
我們先來看看最終的海報效果先。
第一步：→
所選的文案是一個攝影展，所以我們找了一張具有故事性的圖片作為底圖,新建文檔,背景填充為黑色，置入圖片,確定圖片在版面中的位置，因為我們準(zhǔn)備做四周壓角構(gòu)圖型的海報，所以我們與居中式構(gòu)圖相結(jié)合,這樣能使版面的視覺聚焦。
第二步：→
根據(jù)圖片的構(gòu)圖，我們來確定整體版面的構(gòu)圖形式,由于圖片是居中偏右的，所以我們用居中式構(gòu)圖加上四周壓角構(gòu)圖來進(jìn)行整體版面的風(fēng)格呈現(xiàn)。
第三步：→
將主題文案“無限的山峰”以四周壓角構(gòu)圖的方式放置在版面的四個角上,我們使用的是壓在版面以內(nèi)的壓角構(gòu)圖,并結(jié)合居中構(gòu)圖的方式，這樣能使版面更加的規(guī)整有序,而且具有視覺張力,注意圖片和文字的聯(lián)系。
第四步：→
現(xiàn)在我們來進(jìn)一步進(jìn)行處理，由于主題文案相離較遠(yuǎn)，接下來就是增強主題文字之間的聯(lián)系，我們嘗試用線來處理,線的作用就是連接與分割,我們用線將主題文字連接起來,并加上一些漢語拼音元素,使線條不會那么單調(diào)，并且更具有形式感。
第五步：→
先不急著下一步，我們先來觀察下版面，現(xiàn)在的版面被我們分割成了四份,我們把剩下的信息分別在指定的區(qū)域內(nèi)進(jìn)行排版。
第六步：→
我們將剩下的文案分別進(jìn)行排版，重要的信息我們需要放大處理,不重要的信息可以偏小一些,重要的信息比如:參展藝術(shù)家、日期、地址等,這里要注意層級之間的劃分,要使版面顯得井然有序。
第七步：→
其實版面到這里已經(jīng)處理的差不多了,但是主標(biāo)題看起來稍顯平凡,跟內(nèi)文的文字一樣，沒有什么特征特色，所以我們可以做更多的變化,拆分主題文字的一些筆畫,并使其輪廓化,我們還可以傾斜或放大一些筆畫，或者局部模糊，打散等等眾多效果都可以嘗試。
第八步：→
其最后把整體的細(xì)節(jié)稍微調(diào)整下,這樣，一張具有形式感的海報就形成了,這張海報用到了四周壓角構(gòu)圖，居中式構(gòu)圖,所以可得出結(jié)論,七種構(gòu)圖方式之間是可以交叉使用的,只要能使版面更加的好看,更具有形式感就行。
→ 完成??！
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
隨著新的一年緩緩拉開序幕，UI設(shè)計領(lǐng)域也迎來了新的變革與挑戰(zhàn)。蘭亭妙微設(shè)計團(tuán)隊，作為行業(yè)內(nèi)的佼佼者，始終站在設(shè)計前沿，不斷探索與創(chuàng)新。今天，我們將與您一同解鎖2025年UI設(shè)計的新趨勢，特別是色彩與布局方面的秘籍，為您的設(shè)計之旅提供靈感與指導(dǎo)。
一、色彩趨勢：回歸自然，擁抱溫暖
在2025年，色彩選擇將更加傾向于自然與溫暖。這反映了人們對和諧共生、心靈慰藉的渴望。以下是我們預(yù)測的幾個熱門色彩趨勢：
1. 大地色系：從沙漠的金色到森林的綠色，大地色系以其沉穩(wěn)、質(zhì)樸的特點，成為營造溫馨氛圍的首選。這些色彩不僅能夠激發(fā)用戶的舒適感，還能與多種設(shè)計風(fēng)格相融合，展現(xiàn)出獨特的韻味。
2. 柔和粉色：粉色作為近年來備受追捧的色彩之一，其柔和的色調(diào)在2025年將繼續(xù)占據(jù)重要地位。無論是淺粉色還是略帶灰調(diào)的煙粉色，都能為用戶帶來溫馨、浪漫的感受，非常適合用于女性用戶或情感類產(chǎn)品的設(shè)計中。
3. 活力橙色：在追求舒適與溫暖的同時，活力橙色以其鮮明的個性和積極向上的態(tài)度，成為打破沉悶、增添活力的不二之選。在需要強調(diào)重點或激發(fā)用戶行動力時，橙色能夠發(fā)揮重要作用。
二、布局趨勢：簡潔明了，注重交互
在布局方面，2025年的UI設(shè)計將更加注重簡潔性與交互性。以下是我們總結(jié)的幾點布局趨勢：
1. 極簡主義：隨著信息量的爆炸式增長，用戶對于簡潔、清晰的設(shè)計需求愈發(fā)強烈。因此，極簡主義在2025年將更加盛行。設(shè)計師們將通過精簡元素、優(yōu)化排版、使用留白等手段，打造更加舒適、易用的界面。
2. 卡片式設(shè)計：卡片式設(shè)計以其直觀、易讀的特點，成為近年來備受青睞的布局方式。在2025年，卡片式設(shè)計將繼續(xù)發(fā)展，不僅限于信息展示，還將更多地應(yīng)用于交互設(shè)計中，如滑動切換、點擊展開等。
3. 動態(tài)布局：隨著響應(yīng)式設(shè)計的普及，動態(tài)布局在2025年將更加成熟。設(shè)計師們將更加注重界面在不同設(shè)備、不同屏幕尺寸下的適應(yīng)性，確保用戶在不同場景下都能獲得良好的使用體驗。
結(jié)語
色彩與布局作為UI設(shè)計的兩大核心要素，對于提升產(chǎn)品的吸引力與用戶體驗至關(guān)重要。蘭亭妙微設(shè)計團(tuán)隊將繼續(xù)關(guān)注設(shè)計趨勢的發(fā)展變化，不斷探索與創(chuàng)新。我們相信，通過巧妙地運用色彩與布局技巧，我們能夠為用戶帶來更加美好的使用體驗。讓我們攜手共進(jìn)，共同迎接UI設(shè)計的新篇章！
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
作者：彩云Sky
鏈接：https://www.zcool.com.cn/article/ZMTU5NDg1Mg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
大體上分為兩類：彩蛋流和體驗流
搜索的本質(zhì)是什么？無疑是內(nèi)容的召回和信息的推薦。
可隨著時代的發(fā)展和行業(yè)公司的內(nèi)卷，不少公司除了持續(xù)優(yōu)化搜索結(jié)果與推薦外，在搜索的體驗和彩蛋上也是下了不少功夫，從而進(jìn)一步加強自有產(chǎn)品的競爭力與用戶黏性。因此今天就來盤點一些，那有意思的大廠搜索交互。
大體上分為兩類：彩蛋流和體驗流
注重提升搜索過程中的趣味程度，以增加用戶的好感度與產(chǎn)品印象/口碑。行業(yè)代表：谷歌瀏覽器、百度瀏覽器
可以說是搜索彩蛋的先行者，內(nèi)置了很多搜索關(guān)鍵詞的有趣彩蛋，如娛樂角色：搜索【滅霸】，頁面右邊會打響指，相關(guān)字段會被’毀滅‘掉
搜索【馬里奧兄弟】，右邊也有游戲里一樣的點擊彩蛋
還有各種有意思的搜索結(jié)果比如搜：is google down（谷歌關(guān)閉了嗎），搜索結(jié)果優(yōu)先顯示：NO
再如搜索《銀河系漫游指南》的一句話：the answer to life, the universe, and everything。此時搜索結(jié)果頁會自動計算成42。貌似也只有讀過《銀河系漫游指南》的人才能明白其中的奧秘。聽說是生命、宇宙與萬事萬物的終極解答。
而且在日常的節(jié)日、活動、熱點運營上，谷歌也從不缺席。都會在搜索框上用【插畫、動效】等形式承載各種活動入口、吸引用戶參與，可以已經(jīng)形成一個穩(wěn)定、具有品牌感的企業(yè)文化了。
如各種復(fù)活節(jié)、開學(xué)季、母親節(jié)動效。而且更多有趣、創(chuàng)意的設(shè)計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設(shè)計方法。
百度在搜索彩蛋里下的的功夫也不少，最著名的應(yīng)該是搜索【黑洞】時，頁面上會出現(xiàn)黑洞的吸入特效。
而且和谷歌相同，在其他的搜索關(guān)鍵詞上，百度也是埋下了不少彩蛋，比如：搜索【翻轉(zhuǎn)】，頁面會左右翻過來
搜索【跳躍】，頁面會在上下跳動
搜索【失重】，頁面上的字會飄起來
而在【活動運營】上，百度也是很有心地進(jìn)行著創(chuàng)新設(shè)計，力求給用戶一種眼前一亮的感覺。比如每年的愚人節(jié)，搜索結(jié)果頁上都有‘調(diào)戲’用戶的創(chuàng)意設(shè)計，各種輕松調(diào)皮的畫風(fēng) 給不少用戶帶來了新鮮感和趣味性。
還有在【活動入口】的設(shè)計上也是特別有想法：在某年的圣誕節(jié)上，百度創(chuàng)新性地將活動入口’嵌套‘在結(jié)果頁卡片中間，用活動里的ip形象-雪人「抬著」結(jié)果頁卡片和在上面「滾動」
用這種充滿創(chuàng)意+應(yīng)景的的入口設(shè)計與引導(dǎo)方式，最大限度地降低漏斗，吸引讓更多用戶參與該活動。另外，百度搜索框上面的運營活動入口，也和谷歌有異曲同工之妙。
而且更多有趣、創(chuàng)意的設(shè)計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設(shè)計方法。
注重提升搜索過程中的交互體驗，以增加用戶的操作效率與產(chǎn)品易用性。
代表：蘋果產(chǎn)品、夸克瀏覽器
·iPhone
iPhone的【桌面搜索】除了能查詢手機上的各種信息、文件，它還自帶了【匯率轉(zhuǎn)換和計算器】。在搜索框輸入【數(shù)學(xué)公式、匯率轉(zhuǎn)換】時會自動計算對應(yīng)的結(jié)果。無需用戶額外打開計算器、瀏覽器，大大減少操作鏈路。
在iOS的原生鍵盤里，可以根據(jù)輸入詞檢測+搜索對應(yīng)的手機號碼：當(dāng)你輸入 【打+我或通訊錄好友+電話】時，鍵盤上會自動顯示自己或好友的電話號碼，點擊號碼就能自動粘貼在輸入框中。
用戶無需前往通訊錄就能輕松「獲知+想起」誰誰的電話號碼，大大提升操作體驗與效率
·Mac
在Mac電腦的工具欄上搜索相關(guān)幫助時，系統(tǒng)會直接把該結(jié)果所對應(yīng)的頁面位置調(diào)取出來并懸浮展示。用戶可以直觀地該結(jié)果在哪里，并減少尋找的操作路徑，免去多余操作
在Mac電腦的‘系統(tǒng)偏好設(shè)置’里搜索幫助，在結(jié)果列表上會以聚光燈的形式展示各個結(jié)果入口。選擇具體某個結(jié)果時，該入口的聚光燈會更清晰些，特別容易找到搜索結(jié)果。
夸克瀏覽器除了傳統(tǒng)的「點擊搜索框」喚出輸入欄外，在屏幕任意位置下滑手勢同樣可以喚出搜索框。
降低「需要往上手指移動，才能點擊搜索框」的操作成本，讓用戶更快、更精準(zhǔn)地觸達(dá)搜索。
而且在輸入網(wǎng)址或英文等字段時，搜索框下方會出現(xiàn)一個滑塊區(qū)。點擊就會變成長條的滑塊，拖拽滑塊即可改變光標(biāo)位置。
而且更多有趣、創(chuàng)意的設(shè)計案例，可上：有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設(shè)計方法。
讓用戶更方便地將光標(biāo)快速移動到想要的位置中，以便更快地搜索信息，大大降低操作成本。而且夸克還會前置搜索結(jié)果， 比如在搜索框中輸入“某城市+天氣”的關(guān)鍵詞，上方就會以卡片的形式顯示該地區(qū)最近一周的天氣。
用戶無需觸發(fā)搜索、進(jìn)入結(jié)果頁才能看到想要查詢的信息。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
不管是一部電影，還是一張視覺創(chuàng)意，想要消費者或者老板買單，從形、意、色、字、構(gòu)、質(zhì)等一系列視覺語言，都需要很好的掌握。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
設(shè)計過程被描述為多個階段，每個階段都包含不同的活動來完成該階段，它沒有統(tǒng)一的標(biāo)準(zhǔn)流程，每個公司和設(shè)計師都有自己的流程版本。
盡管存在多個流程，但一般流程和階段類似于以下內(nèi)容:
了解問題：初步了解問題。觀察、采訪和傾聽用戶。
定義問題：解釋和定義要解決的問題。
構(gòu)思：通過頭腦風(fēng)暴產(chǎn)生盡可能多的想法。
原型設(shè)計：構(gòu)建原型并與其他人分享（ 再次縮小解決方案空間，為實驗階段 ）。
測試：測試可能的解決方案、實施、改進(jìn)或重新設(shè)計。
傳統(tǒng)的問題解決采取有條不紊而又科學(xué)的形式。該過程從一個問題開始，定義要采取的步驟以及達(dá)到解決方案的工具或方法。
設(shè)計思維是一種創(chuàng)造性的策略，可以產(chǎn)生創(chuàng)造性的未來結(jié)果和/或創(chuàng)造性的問題解決方式，它應(yīng)該被認(rèn)為是一種以解決方案為中心的思維策略。
它通常被描述為一種創(chuàng)造性、主觀和感性的對許多大型組織的分析邏輯（ 布朗，2008 年 ），或作為分析和創(chuàng)造性推理模式的組合（ 鄧恩 & 馬丁，2006 年；利特卡，2015 年 ）。
設(shè)計思維來源于常規(guī)問題解決方法，常規(guī)問題解法是設(shè)計思維的基礎(chǔ)。
從解決問題到設(shè)計思維，Liedtka (2013)
結(jié)果發(fā)現(xiàn)，設(shè)計思維實際上也是一個解決問題的過程，而不僅僅是一個創(chuàng)新過程（ 利特卡，2013）
一個例子是，豐田采用設(shè)計思維從頭開始分析其西海岸的一個客戶聯(lián)絡(luò)中心，在重新設(shè)計過程中，組建了一個由一線呼叫代表、軟件工程師、業(yè)務(wù)主管和變革代理組成的跨職能團(tuán)隊，這一舉動最終改變了客戶和員工的服務(wù)中心體驗。
我們每天都會遇到問題，但是當(dāng)我們解決同樣的問題時，它們就成了例行公事（ 似乎已經(jīng)忘記它們是問題了 ），我們甚至都沒有意識到正在解決這些問題。例如，我的辦公室在 30 分鐘路程之外，該怎么到達(dá)那里？開車、坐火車或巴士到目的地；除非車子輪胎被刺破，否則你就需要弄清楚如何到達(dá)辦公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創(chuàng)造了特定術(shù)語：“設(shè)計思維”，并將多年來醞釀的方法和想法封裝成一個統(tǒng)一的概念。
設(shè)計思維是以人為中心、開放式、基于問題的方法論。這種方法最初是為了改變工程教育中的教學(xué)方式，而工程師處理和解決問題的方式有其設(shè)計思維的基礎(chǔ)。
設(shè)計思維一詞可以追溯到 1987 年 Peter Rowe 的著作：“設(shè)計思維。” 他描述工程師和建筑師處理問題的方法有很大不同。
90 年代初，認(rèn)知科學(xué)家 Don Norman 加入 Apple 團(tuán)隊，擔(dān)任他們的用戶體驗架構(gòu)師，這使他成為第一個在職位中包含 UX 的人。他提出了“用戶體驗設(shè)計”這個術(shù)語，因為他想“涵蓋人們對系統(tǒng)體驗的所有方面，包括工業(yè)設(shè)計、圖形、界面、物理交互和手冊。” 從那時起，這些領(lǐng)域中的每一個都將用戶體驗，擴(kuò)展到了自己的專業(yè)領(lǐng)域。
設(shè)計思維在解決“棘手問題”時特別有用。
棘手問題的特征
“棘手問題”一詞是由設(shè)計理論家 Horst Rittel 在 1972 年創(chuàng)造的，用來描述本質(zhì)上非常模糊 \ 特別棘手的問題。棘手問題，有很多未知因素，沒有確定的解決方案。問題或解決方案可能與另一個棘手的問題有關(guān)，因此這是一個需要設(shè)計思維的持續(xù)過程。貧困、饑餓和氣候變化是一些現(xiàn)代的棘手問題。
設(shè)計主題的范圍是普遍的，因為 設(shè)計思維可以應(yīng)用于人類經(jīng)驗的任何領(lǐng)域。
它可以用于：
符號和視覺傳達(dá)：這包括平面設(shè)計的傳統(tǒng)工作，如排版和廣告、書籍和雜志制作、科學(xué)插圖、攝影、電影、電視和計算機顯示。
材料：這包括對日常用品的形式和視覺外觀的傳統(tǒng)關(guān)注 —— 服裝、家用物品、工具、儀器、機械和車輛。
人類活動和組織性服務(wù)：包括對物流的傳統(tǒng)管理關(guān)注，結(jié)合物質(zhì)資源、工具和人類低效的序列和時間表，以達(dá)到特定的目標(biāo)。
復(fù)雜的系統(tǒng)或環(huán)境：生活、工作、娛樂和學(xué)習(xí)。這包括系統(tǒng)工程、建筑和城市規(guī)劃的傳統(tǒng)關(guān)注點，或復(fù)雜整體部分的功能分析及其隨后在層次結(jié)構(gòu)中的集成。
設(shè)計思維起源于設(shè)計師的培訓(xùn)和專業(yè)實踐，但這些原則可以被每個人實踐并擴(kuò)展到每個活動領(lǐng)域。（布朗，2013 年）
在企業(yè)中，設(shè)計過程可以為企業(yè)環(huán)境中的問題解決帶來創(chuàng)新思維。它還可以用于醫(yī)療保健，通過向護(hù)士、醫(yī)生和管理人員教授設(shè)計思維技術(shù)，我們可以激勵相關(guān)從業(yè)者貢獻(xiàn)新的想法。
不管是什么設(shè)計，理解和研究問題是必不可少的，因為我們能夠從其出發(fā)，從而進(jìn)行以用戶為中心的設(shè)計。
設(shè)計思維的最早階段是搞懂你能帶來的情感價值。設(shè)計思維方法迫使你停留在提問與質(zhì)疑階段，而不是準(zhǔn)確定義出問題后進(jìn)入下一階段。我們都有過快進(jìn)入解決方案模式的傾向，所以設(shè)計思維方法迫使你真實地存在于這個不清楚、有時還非常混亂的時刻，從而使你對要解決的問題產(chǎn)生更好的理解。（利特克，2013）
傳統(tǒng)的問題解決涉及提出一個解決方案，但設(shè)計思維首先使我們發(fā)散，試圖為問題生成各種可能的替代解決方案。然后讓我們進(jìn)行收斂性思維，縮小多種可能性，找到單一的最佳解決方案。
根據(jù)利特卡和奧美 (2011) 的說法，設(shè)計思維的全部意義在于學(xué)習(xí)一種新的、系統(tǒng)的解決問題的方法。正如我們思考創(chuàng)造力一樣，即使是設(shè)計思維也可以通過實踐來教授和改進(jìn)。
設(shè)計過程從來都不是線性的，它由多次失敗和迭代組成（布朗，2018）。
首先，設(shè)計師試圖將問題與過去的類似案例聯(lián)系起來。如果這種方法不能提供任何解決方案，下一步就是使用知識和創(chuàng)造力作為一種實驗思維形式來產(chǎn)生新的想法。使用決策矩陣對這些想法進(jìn)行評估，從而會產(chǎn)生被進(jìn)一步分析和測試的解決方案。如果成功，它將被實施。如果不成功，則需要重新表述問題，并重復(fù)該過程。這是一個迭代過程，即循環(huán)方法。
這一持續(xù)不斷的重新再設(shè)計過程，源于和客戶親密接觸的洞察。
學(xué)習(xí)設(shè)計思維不僅僅意味著學(xué)習(xí)一套新的工具。它還意味著：學(xué)習(xí)收集和分析大量數(shù)據(jù)；學(xué)習(xí)挖掘?qū)ο罂赡艿男螒B(tài)而不是自主認(rèn)為他是什么；學(xué)習(xí)管理不確定感，以及與許多新的伙伴合作（ 利特卡和奧美，2011）。你可以進(jìn)行的研究類型分為三類：生成性研究、評估性研究和驗證性研究。
一種常見的表述 —— 實際上是設(shè)計思維的另一種視角 —— 即設(shè)計師應(yīng)該預(yù)料到會“很快失敗或經(jīng)常失敗”（布朗，2009）。
當(dāng)過程早期發(fā)生故障時，例如被拒絕的原型，實質(zhì)上它可以為有效解決方案提供關(guān)鍵見解。這種觀點與傳統(tǒng)的先形成理論，再檢驗正誤的方式相矛盾。
Airbnb、Braun 和百事可樂等多元化公司都在 采用設(shè)計思維并將其作為核心戰(zhàn)略。例如，IBM 為全球旗下的 44 個設(shè)計工作室聘請了 1600 名設(shè)計師，并且正在培訓(xùn)數(shù)以萬計的設(shè)計師員工建立深度創(chuàng)新能力 ( O'Keefe, 2017 )
設(shè)計思維為我們解決問題添加了以人為本的元素。當(dāng)我們試圖通過牢記人們的想法來解決問題，并使用基于直接觀察乃至訪談的研究時，我們便會捕捉到與消費者需求一致的意外見解和創(chuàng)新。
它有助于將成功的產(chǎn)品更快地推向市場，最終節(jié)省企業(yè)資金。
IBM 的健康和人類服務(wù)組織的設(shè)計思維實踐，通過有效使用設(shè)計和設(shè)計思維幫助企業(yè)將缺陷數(shù)量減少了 50% 以上。這種更高效的工作流程導(dǎo)致計算出的 ROI 超過 300%。
由于復(fù)雜的問題從來不能被所有人完全理解，因此在嘗試設(shè)計解決方案時，處理歧義和多個并發(fā)的思路方向的能力是至關(guān)重要的素質(zhì)。
設(shè)計思維通過綜合和歸納思維，幫助實現(xiàn)質(zhì)的飛躍。它允許通過解構(gòu)來測試約束，并允許通過多樣性思維和批評思維，來擁抱和探索歧義。
消費者通常不知道他們有什么問題需要解決，或者他們無法用語言表達(dá)出來。只有經(jīng)過仔細(xì)觀察，設(shè)計者才能根據(jù)真實消費者行為中看到的東西來識別問題，而不是簡單地根據(jù)對消費者的想法來確定問題。這有助于定義模棱兩可的問題，并找到解決方案。
該方法鼓勵“跳出框架思考”（“瘋狂的想法”）；它蔑視顯而易見的事物并采用更具實驗性的方法。
在早期的流程階段鼓勵大膽的想法，以產(chǎn)生創(chuàng)造性的解決方案。使用它是為了讓設(shè)計師可以嘗試開發(fā)新的不受約束的思維方式，或?qū)ΤＲ妴栴}的創(chuàng)新解覺方法。
根據(jù)大多數(shù)設(shè)計學(xué)院的說法，具備特定特質(zhì)的人能夠更好地發(fā)揮設(shè)計思維的作用。
同理心：從多個角度想象世界 —— 同事、甲方客戶、實際使用者和消費者的角度。要成為更好的同理心，必須傾聽和觀察他人的行為，注意并獲得洞察力。
綜合思維：重要的是不僅要有分析能力，而且要能夠提出新穎的解決方案，還要憑直覺。
樂觀：除非你相信有解決方案，否則在遇到挑戰(zhàn)且解決方案遇到瓶頸時，你可能會放棄。
實驗主義：重大創(chuàng)新并非來自漸進(jìn)式調(diào)整。設(shè)計思想家以創(chuàng)造性的方式提出問題并探索限制因素，并朝著全新的方向發(fā)展。
協(xié)作：產(chǎn)品、服務(wù)和體驗日益復(fù)雜，因此必須擁有一支具有不同背景的團(tuán)隊，以幫助從多個角度看待問題。
當(dāng)我們想到一個問題的多種解決方案時，對我們解決問題會非常有幫助，因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問題。想要擺脫功能固定，首先是要讓人們可以使用“改造后的衣架進(jìn)入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開簡單的彈簧門鎖。
為了幫助設(shè)計師利用文科和技術(shù)理論，整合多個領(lǐng)域的知識以找到創(chuàng)新的解決方案，我們采用設(shè)計思維來獲得洞察力。該方法側(cè)重于可視化和操作，因而幫助我們更容易地了解實際解法，而不僅僅是理論模型。
第一批美國公司在 2000 年代初期開始實施設(shè)計思維，這一概念引起了德國投資者 Hasso Plattner 的興趣，他于 2006 年資助創(chuàng)建了兩所設(shè)計學(xué)校（d.schools），其中一所位于波茨坦大學(xué)（德國），另一所位于美國斯坦福大學(xué)。由于兩所學(xué)校都成功地為大型組織提供了高管設(shè)計思維培訓(xùn)，因此該研究重點關(guān)注這些國家，以尋找早期實施者。
設(shè)計思維通常涉及希望參與整個設(shè)計和開發(fā)過程的龐大利益相關(guān)者團(tuán)隊。
觀點、才能和經(jīng)驗的多樣性被認(rèn)為是注入新思維的部分重要來源。多樣性確保通過融合不同的觀點、技能和知識來產(chǎn)生創(chuàng)意（卡振思，2018 年；薩梅和德拉赫-扎哈維，2013 年）。設(shè)計思維的協(xié)作方法和工具可幫助團(tuán)隊以積極的方式利用他們的差異。
決策是平等的，因為每個成員的意見都被征求和使用（卡爾格倫等，2016）。
當(dāng) IDEO 去 Apple 展示他們的鼠標(biāo)時，它不是什么花哨的設(shè)備，而是一個用膠帶粘起來的原型。
低保真原型制作起來既快速又便宜（ 想想幾分鐘和幾分錢 ），但可以從用戶和同事那里得到有用的反饋，這符合快速驗證、廉價試錯的原則。為每個想法投入盡可能少的資源意味著前期投入的時間和金錢更少。此外，將多個原型帶到現(xiàn)場進(jìn)行測試為用戶提供了比較的基礎(chǔ)參考，同時也有助于揭示某些需求。
為了創(chuàng)新，設(shè)計思維意識到認(rèn)知和行動對創(chuàng)新過程很重要。認(rèn)知包括接受度、樂觀和創(chuàng)造性的信心（ 凱莉 & 凱莉，2013；鄭，2018），而行動包括快速原型設(shè)計、旅程地圖和假設(shè)浮現(xiàn)（ 假設(shè)浮現(xiàn)：assumption surfacing，這是一種評估技術(shù)，涉及寫出潛在的假設(shè)和反假設(shè)。）（ 卡爾格倫等，2016；利特卡，2015）
如果領(lǐng)導(dǎo)層不歡迎風(fēng)險、模棱兩可和風(fēng)格的改變，實施起來就會變得更加困難。它會被管理者“質(zhì)疑”其具體指標(biāo)
沃爾特斯 ( 2011 ) 聲稱，由于設(shè)計思維的模糊性，它與組織文化相沖突。
據(jù)受訪者稱，在日常業(yè)務(wù)中使用設(shè)計思維之所以不會是最優(yōu)選項， 因為它是資源密集型的，增加了工作量。（ 麗莎等，2016）
在醫(yī)療保健等規(guī)避風(fēng)險的行業(yè)和公司中，“經(jīng)常和早點失敗”的方法被認(rèn)為是非常困難的。
許多設(shè)計師反對設(shè)計思維這一觀點，設(shè)計思維不僅關(guān)乎一個過程，而且關(guān)乎改變思維過程并提高人們可能提出的解決方案的創(chuàng)造力。
“設(shè)計思維”的推廣已被大型全球公司用來增加業(yè)務(wù)。不過，在更廣泛的設(shè)計世界中，我甚至?xí)f“設(shè)計思維”的過度宣傳導(dǎo)致了所提供設(shè)計質(zhì)量的下降。—— Yasushi Kusume
弗吉尼亞理工大學(xué)科學(xué)、技術(shù)和社會助理教授 Lee Vinsel 在《設(shè)計思維運動是荒謬的》中寫道，“歸根結(jié)底，設(shè)計思維與設(shè)計無關(guān)。這與文科無關(guān)。這與任何有意義的創(chuàng)新無關(guān)。如果這意味著重大的社會變革，那肯定不是關(guān)于“社會創(chuàng)新”。這是關(guān)于商業(yè)化的。”
觀察人們的行為以及他們?nèi)绾闻c環(huán)境互動，可以為你提供有關(guān)人們想法和感受的線索。
你可能認(rèn)為你知道問題所在，但只有通過觀察才能了解消費者真正需要什么。
宜家派設(shè)計師到人們家中，觀測他們的互動行為來了解他們的需求。這將使設(shè)計者能夠推斷這些經(jīng)歷的無形含義，以發(fā)現(xiàn)洞察。這些洞察提供創(chuàng)新解決方案的構(gòu)思方向。而事實上，最好的解決方案來自于對人類行為的最佳洞察。
Good Kitchen 是一家為老年人和體弱者提供膳食的社會服務(wù)機構(gòu)。起初的問題似乎是設(shè)計不當(dāng)?shù)纳攀巢藛巍Ｈ缓笤O(shè)計思維揭示了無數(shù)問題，所有問題都源于服務(wù)本身的性質(zhì)。因此，經(jīng)由對服務(wù)進(jìn)行了徹底改革的之后，最終提高了客戶和員工的滿意度（利特卡，2014）
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
對于設(shè)計師來說，遇到設(shè)計瓶頸期很正常，入行一段時間后所具備的能力就會達(dá)到峰值，無法突破峰值就會遇到瓶頸。主要在設(shè)計思維和設(shè)計技法層面受限，打開設(shè)計思維才能突破瓶頸期，通過積累優(yōu)秀的案例并進(jìn)行總結(jié)分析，可以更快的打破思維限制。
分享目錄
一、趣味性的登錄設(shè)計
二、瓷片區(qū)的趣味性手勢交互
三、營造懷舊感的溫馨體驗
四、趣味性的進(jìn)度提示設(shè)計
五、場景感的點擊操作
六、動效引導(dǎo)用戶發(fā)帖
七、卡通形象強化瓷片區(qū)視覺感
八、不改變布局的曝光強化
九、可以晃動的 Banner 圖
十、場景感的底部標(biāo)簽欄設(shè)計
一、趣味性的登錄設(shè)計
登錄是進(jìn)入產(chǎn)品的第一道防線，也容易讓用戶產(chǎn)生排斥感，降低用戶的防備心理才能提高登錄的意愿度。
盯潮 App 在登錄界面中，以潮流元素和商品等內(nèi)容進(jìn)行設(shè)計，使得頁面視覺感豐富。晃動手機時元素也會移動，在掉落或者碰撞手機邊緣時配合震動感，讓體驗變得非常有趣。趣味性的設(shè)計降低了用戶的排斥感，提升了登錄的意愿度和體驗感。
二、瓷片區(qū)的趣味性手勢交互
瓷片區(qū)、Banner、金剛區(qū)是產(chǎn)品中的三大運營模塊，起到提高曝光度達(dá)到引流的目的。瓷片區(qū)在頁面中的布局比較靈活，設(shè)計表現(xiàn)也非常豐富。
盯潮 App 在首頁瓷片區(qū)設(shè)計中，以柵格式布局進(jìn)行區(qū)塊劃分，占比較大的模塊類似于 Banner 式表現(xiàn)。通過手勢可以任意拖動實現(xiàn)切換，趣味性和互動性相結(jié)合，提高了用戶的使用樂趣。
三、營造懷舊感的溫馨體驗
童年的記憶是我們逝去的青春，每每看到小時候的畫面，總能勾起我們童年的回憶。最近發(fā)現(xiàn)一款結(jié)合懷舊感營造設(shè)計風(fēng)格的產(chǎn)品，名字叫“軟眠眠”。
這是一款拯救失眠者的治愈系睡眠 App，以一幅小時候生活的環(huán)境插畫填充界面背景，圖標(biāo)設(shè)計也是提取小時候的玩物或者生活用品，視覺風(fēng)格營造極強的懷舊感。無論是畫風(fēng)還是配色、配樂等，都勾起了我們滿滿的回憶，帶給用戶溫馨的體驗。
四、趣味性的進(jìn)度提示設(shè)計
在完成步驟化和消耗數(shù)據(jù)等內(nèi)容表達(dá)層面會選擇進(jìn)度條，通過可視化的表達(dá)提高用戶的理解，減輕信息認(rèn)知負(fù)擔(dān)。
軟眠眠 App 在定制睡眠計劃的過程中，完成選項時的進(jìn)度條設(shè)計非常有意思，是一個小孩通過拉動繩子移動。拉動過程中結(jié)合動態(tài)表達(dá)，配合手繪風(fēng)的表現(xiàn)讓人感覺輕松愉快，趣味性的設(shè)計也提高了完成選項任務(wù)的意愿度。
五、場景感的點擊操作
在保障底層操作體驗的基礎(chǔ)上，設(shè)計會越來越講究細(xì)節(jié)的體驗，逐步強化情感化的融入和場景感的體驗。
最近在體驗小雞上工 App 時，在找工作的列表設(shè)計中加入了“搶”按鈕，在點擊列表時按鈕會有按壓的動效過程。模擬搶拍按鈕獲得機會的體驗，營造場景氛圍感，提高了設(shè)計表達(dá)的趣味性。
六、動效引導(dǎo)用戶發(fā)帖
微動效可以提高功能的吸引力，也能讓互動體驗變得更有趣，可以通過動效引導(dǎo)功能操作和提高關(guān)注度。
騰訊動漫 App 在圈子欄目中，以 IP 形象結(jié)合動效強化發(fā)帖按鈕，以此引導(dǎo)用戶參與發(fā)帖。動效不僅突出了發(fā)帖的關(guān)注度，也讓發(fā)帖按鈕設(shè)計更有親和力，進(jìn)而提升用戶的點擊欲。
七、卡通形象強化瓷片區(qū)視覺感
瓷片區(qū)起到強化曝光達(dá)到流量引導(dǎo)的作用，提高該模塊的吸引力至關(guān)重要，視覺感的突出也尤為重要。
會玩 App 在首頁“一起玩”的瓷片區(qū)設(shè)計中，以卡通形象結(jié)合豐富的色彩進(jìn)行表現(xiàn)，各種裝扮的形象豐富視覺感。卡通形象設(shè)計風(fēng)格統(tǒng)一，卡片色彩豐富且協(xié)調(diào)，整體瓷片區(qū)視覺沖擊力十足。
八、不改變布局的曝光強化
在當(dāng)前產(chǎn)品結(jié)構(gòu)不變的基礎(chǔ)上，如何提高局部內(nèi)容或者主推內(nèi)容的曝光度，是產(chǎn)品設(shè)計師不斷探索的方向。
愛奇藝 App 首頁推薦欄目 Banner 圖下方，默認(rèn)情況下以宮格布局推薦影片。前段時間在打開時發(fā)現(xiàn)了一個臨時設(shè)計表達(dá)，保持當(dāng)前結(jié)構(gòu)布局不變，放大了圖片填充和推薦影片，整張畫面填充宮格，視覺張力十足。該設(shè)計表達(dá)既不會干擾當(dāng)前布局，也能強化推薦影片的曝光度，解決方案值得探索。
九、可以晃動的 Banner 圖
Banner 可以在創(chuàng)意、造型、互動形式等方面進(jìn)行設(shè)計發(fā)揮，也呈現(xiàn)了許多優(yōu)秀的方案，產(chǎn)品設(shè)計師也在不斷嘗試更多的可能性。
最近在體驗盯潮 App 時，發(fā)售欄目頂部 Banner 圖設(shè)計引人關(guān)注。當(dāng)用戶左右晃動手機時，Banner 圖背景層不動，而文案和產(chǎn)品等元素層會跟著晃動的頻率左右移動?？梢曰蝿拥?Banner 圖非常有意思，成功地吸引了用戶的關(guān)注度和點擊欲。
十、場景感的底部標(biāo)簽欄設(shè)計
底部標(biāo)簽欄設(shè)計可以在背景、造型、圖標(biāo)等元素中發(fā)揮，其中圖標(biāo)設(shè)計中的發(fā)揮相對更多一些，在背景和造型層面的案例較少，不過最近也發(fā)現(xiàn)了一個解決方案。
在體驗云游萬里長城小程序時，進(jìn)入之后的小程序底部標(biāo)簽欄設(shè)計結(jié)合了長城墻面和結(jié)構(gòu)，非常有場景代入感。設(shè)計了深色版和淺色版，圖標(biāo)造型設(shè)計也融入了長城元素，不失為一種優(yōu)秀的差異化設(shè)計探索。
小結(jié)
希望本期的分享可以開啟大家更多設(shè)計思維，從優(yōu)秀的設(shè)計方案中發(fā)現(xiàn)設(shè)計的軌跡，復(fù)用到后期的項目設(shè)計中。本文描述屬于個人理解和總結(jié)，不足之處歡迎大家留言補充，我們互相進(jìn)步。
蘭亭妙微(www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計的小編 http://www.yvirxh.cn