99久久精品国产高清一区二区|91色综合|久久久久97国产|亚洲精品WWW久久久久久|99热这里只有成人精品国产|亚洲国产欧美目韩成人综合|国产一区二区三区精品视频|久久久久国产精品麻豆|亚洲综合精品香蕉久久网97|日韩一区国产二区欧美三区|中文字幕一区婷婷久久|亚洲精品中文字幕久久久久下载

我們每天都在和各種各樣的屏幕打交道：手機、電腦、平板、智能手表… 我們通過點擊、滑動、輸入文字來告訴機器我們想做什么。這套我們習以為常的交互方式，叫做GUI（圖形用戶界面）。

每個產(chǎn)品都希望展示更多用戶感興趣的內容，但受限于屏幕大小和人類的認知能力，我們不可能一次性獲取產(chǎn)品中的所有信息。因此，需要采用逐層展開的結構來平衡信息密度與操作效率。這就催生了界面設計中最經(jīng)典的「列表到詳情」界面設計模式。這種模式在列表呈現(xiàn)內容摘要降低認知負荷，同時為深度探索提供入口，完美契合人類「先大概再具體」的認知路徑。

一、概念設計的關鍵組成部分：

1. 問題定義

識別并描述設計旨在解決的核心問題或挑戰(zhàn)。這應包括用戶研究的洞察、業(yè)務目標以及明確的設計目標。

例子：如果你在設計一個健康應用，首先要定義用戶面臨的主要問題，比如“用戶如何跟蹤自己的飲食習慣？”這個定義要包括用戶的痛點、業(yè)務目標以及希望達到的設計效果。

2. 用戶角色和場景

開發(fā)代表性的用戶角色，提供人口統(tǒng)計和行為信息，以幫助理解目標用戶的需求、動機和目標。然后創(chuàng)建場景，說明用戶在各種背景下如何與提出的解決方案進行交互。

例子：創(chuàng)建一個典型的用戶角色，比如“忙碌的職場人士張先生”，他需要一個簡單的方法來記錄每日飲水量。然后，設計場景來展示張先生如何在一天中使用應用記錄水量，并根據(jù)不同的使用情況設計交互界面。

3. 信息架構

定義產(chǎn)品或服務的高層結構，組織內容和功能，使用戶易于理解和導航。這有助于確保信息在整個體驗中清晰且一致地呈現(xiàn)

例子：如果你的產(chǎn)品是一個在線購物網(wǎng)站，信息架構包括如何組織產(chǎn)品類別、搜索功能、購物車和結賬流程，確保用戶能夠輕松找到他們想要的商品并完成購買。

4. 草圖和線框圖

創(chuàng)建粗略的草圖或線框圖，以可視化用戶界面的關鍵方面，并探索各種設計備選方案。這些早期原型有助于識別潛在問題，并指導未來的設計決策。

例子：在設計一個新的社交媒體平臺時，你可以畫出基本的頁面布局草圖，比如首頁、用戶個人資料頁和消息頁面。這些草圖幫助你快速測試不同的布局方案，并發(fā)現(xiàn)可能的問題。

5. 設計原則和指南

建立一套高層次的原則和指南，這些將塑造設計并作為進一步開發(fā)的基礎。這可能包括美學和功能性標準，以及確?？稍L問性和可用性。

例子：制定設計原則，如“簡潔優(yōu)先”，確保每個頁面都盡量減少視覺雜亂。也要考慮用戶可訪問性，如確保文本和按鈕對色盲用戶也友好。

6. 迭代

不斷地細化和迭代初步概念，利用用戶測試和利益相關者反饋來做出有依據(jù)的設計調整。這種迭代方法允許項目在進展過程中保持靈活性和適應性。

例子：你設計了一個新的界面，但在用戶測試中發(fā)現(xiàn)他們難以找到“設置”按鈕。你可以根據(jù)反饋修改設計，調整按鈕位置，然后再次測試，直到大多數(shù)用戶都能順利使用。

概念設計的目標是創(chuàng)建一個連貫且引人入勝的愿景，滿足用戶需求并與業(yè)務目標對齊。通過投入時間和精力于這一基礎階段，設計師可以為成功且愉快的用戶體驗奠定基礎。

蘭亭妙微(www.jzvac.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan

編輯導語：產(chǎn)品設計上的許多細節(jié)都有可能影響到用戶的產(chǎn)品使用體驗，進而影響到產(chǎn)品的打開率以及留存率等。這就要求產(chǎn)品設計師在交互體驗層上結合一定小技巧，以提升用戶體驗。本篇文章里，作者結合案例，總結了一些UI技巧，一起來看看吧。

對于很多設計師來講在設計界面過程中往往會忽略掉很多的細節(jié)，比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等，特別是剛入行的設計師在做頁面時往往是直接拿到競品的頁面搬運到自己產(chǎn)品上，這種做法理論上不會讓自己的頁面出錯。

但是很多人往往忽略了一點，就是別人這么設計的目標是什么，是否會匹配自己的設計目標，如果不了解這些貿然地去搬運設計，那么時間久了會養(yǎng)成一個不好的習慣，需要設計師去進行設計時可能就會遇到很多難點，作為初級設計師或者剛入行的設計師，前期可以去進行搬運設計，但是一定要了解別人為什么這么做。

接下來將分享12個設計上的小技巧，大部分在日常設計中都會遇到，了解到這些設計細節(jié)，可以讓我們的界面更加高效、易用、美觀提升用戶體驗。

一、快捷交互

我在做界面時可以時常利用交互手勢去幫助用戶提升操作效率，避免繁雜小操作步驟。

1. 左側為什么錯？？

左圖中針對單條消息的操作匯聚到了icon內，對于用戶理解成本比較高，當用戶想要去刪除或者屏蔽消息時需要通過聚合入口才能完成操作，大大的提升了用戶操作成本。

2. 建議正確做法～~

我們可以在類似的消息場景或者其他列表形式的場景中，添加一些交互手勢，隨著手機系統(tǒng)的更新，用戶的操作習慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟，并不用擔心用戶無法操作的情況，增加手勢有弊端也有優(yōu)勢，右圖中手勢增加了用戶首次使用的學習成本，但是降低了高頻功能的操作成本，這個理論上是可以接受的。

3. 實際產(chǎn)品中的運用

二、提升交互路徑

利用拇指定律把關鍵的操作入口元素等，放置右側提升用戶操作效率。

1. 左側為什么錯？？

左圖中把按鈕放置了模塊左下側，這樣是不利于用戶進行操作，當然如果整個模塊的熱區(qū)都是同一個，這樣并沒有什么問題，用戶點擊卡片區(qū)域任何位置都能夠完成下一步操作，如果出現(xiàn)一個模塊內存在多個熱區(qū)入口，而用戶想要到達目標必須通過按鈕點擊才能進入，那么左圖中的排版位置就會提升用戶的操作時間。

2. 建議正確做法～～

當一個頁面內出現(xiàn)多個相同模塊或者一個模塊出現(xiàn)多個熱區(qū)入口時，按鈕點擊區(qū)域有限，我們設計時就可以利用拇指定律進行排版，如右圖中布局，將按鈕放置右側可以便于用戶在右手操作時快速到達目標，因為國內使用右手的人數(shù)遠遠大于左手用戶，所以我們需要滿足大部分的體驗，合理利用拇指定律。

相關定律：費茲定律、拇指定律。

3. 實際產(chǎn)品中的運用

三、問題前置

對于我們來講很多東西是簡單的，但是不乏會有一些用戶是陌生的，對于他們來講可能會有填寫成本。

1. 左側為什么錯？？

左圖中理論上并不是錯，我們經(jīng)常設計表單時都會用的提示話術，但是我們需要考慮更多維度的東西，對于我們來講填寫這種表單非常簡單，例如個別用戶，可能會臨時忘了郵箱格式，又或者輸入手機號時多填了一位數(shù)等等情況，用戶錯誤一次操作步驟就會多一步，反之就是降低使用產(chǎn)品時的體驗。

2. 建議正確做法～～

如右圖中，我們設計時可以更改提示的話術，幫助用戶把問題前置，當用戶看到提示郵箱時就會按照格式去填寫，通過把手機號的位數(shù)拆分，讓用戶更好的記憶數(shù)字，這樣無論對產(chǎn)品還是用戶都沒有任何損失，反而能降低錯誤頻率。

3. 實際產(chǎn)品中的運用

四、提升可讀性

無論是頁面還是模塊，用戶在閱讀時是已掃讀的方式進行瀏覽，我們需要保證頁面的文字元素具備一定的規(guī)律，以此來提升閱讀效率。

1. 左側為什么錯？？

左圖中可以看到，文字與輸入框放在同一列進行展示，這樣一方面不利于后續(xù)的文字擴展，通常這種表單填寫的頁面，在頁面中都是具有很大的空間位置，這樣排布會造成視覺上的不規(guī)律和擁擠，降低了篩選效率，當然如果是模塊區(qū)域很小的情況下，可以適當?shù)倪M行使用。

2. 建議正確做法～～

右圖中我們把文字與輸入?yún)^(qū)域上下排布，雖然文字長短不一，但依據(jù)對齊原則在豎列情況看是具備對齊規(guī)律的，有效地提升信息篩選效率。

3. 實際產(chǎn)品中的運用

五、點擊引導

我們在做系統(tǒng)功能模塊時需要注意添加功能點擊引導，用戶對此類消息模塊認知上會默認不可點擊，因此需要我們加以引導。

1. 左側為什么錯？？

我們常見的消息模塊內容為兩種，一種是互動類消息即用戶與用戶，另一種時是系統(tǒng)消息即產(chǎn)品推送的內容。

前者基于用戶習慣而言用戶已經(jīng)沒有使用成本默認是可以進行點擊交互，后者因為部分產(chǎn)品會把系統(tǒng)消息作為展示的形式給用戶，但是有些產(chǎn)品的系統(tǒng)消息卻是可以點擊交互，這就導致了用戶認知上出現(xiàn)了混亂，左圖中像系統(tǒng)通知功能通知其實從視覺上看，并不具備點擊欲望，因此可能會對用戶造成錯誤的理解。

2. 建議正確做法～～

當我們在設計時需要注意，若消息列表中存在系統(tǒng)類消息并且可以進行交互，在設計時可以添加向箭頭、紅點提示等方式告知用戶可以點擊，如果該功能有數(shù)據(jù)指標，這種方式也同樣能賦能產(chǎn)品指標。

3. 實際產(chǎn)品中的案例

六、注意飽和度

目前市場上產(chǎn)品幾乎都有深色版本，我們在設計時深色版本的顏色時需要注意飽和度的高低，同樣的飽和度在黑色背景上會比白色背景上更加亮，這跟人的視覺感官有很大的關系，因此我們在做黑色版本時需要注意是否調整飽和度。

1. 左側為什么錯？？

在黑色背景中使用過高的飽和度會刺激眼睛，很多深色版本都是從白色模式通過反向顏色直接調整，而彩色元素會直接運用到深色中，那么就會造成一個問題，因為我們習慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”，對眼睛的傷害很高。

2. 建議正確做法～～

我們在設計深色版本時可以根據(jù)產(chǎn)品主色降低飽和度，包括圖標等元素，以此來緩沖對用戶視覺感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進行處理，這樣無需在添加更多的顏色規(guī)范。

3. 實際產(chǎn)品中的案例

七、禁止特殊字體

在設計模塊或者頁面時不建議使用特殊字體來突出文字層級，這樣會導致視覺不統(tǒng)一，以及開發(fā)成本增加。

1. 左側為什么錯？？

左圖中灰色字使用了特殊字體，看起來雖然好看，但在實際開發(fā)中會導致開發(fā)成本增加，我們產(chǎn)品一般使用的是系統(tǒng)字體，若使用特殊字體需要讓開發(fā)同學添加對應字體包，這樣會導致我們的產(chǎn)品包的內存過大，除非產(chǎn)品中默認一直使用該特殊字體，這樣才有使用的價值。

2. 建議正確做法～～

一般系統(tǒng)字體就能夠滿足我們的設計需求，在UI設計中我們可以通過不同的字體粗細來調整文字層級，這樣能夠保證視覺更加統(tǒng)一，減少產(chǎn)品包大小。

3. 實際產(chǎn)品中的案例

八、按鈕也要有層級

在設計時需要注意多個入口在同一位置時，需要把它們進行層級劃分，避免影響用戶決策。

1. 左側為什么錯？？

圖中可以看到，兩個面性按鈕非常明顯的在模塊中，當用戶在瀏覽頁面中很容易出現(xiàn)困惑，到底需要點擊哪個才能購買預定，因為兩個都是面性無法快速進行定位入口，這樣不僅影響用戶決策效率，還會影響產(chǎn)品點擊率。

2. 建議正確做法～～

建議設計類似模塊中時，無論是pc還是移動端都需要對入口進行結構劃分，這樣能夠使用戶在瀏覽頁面時快速定位到入口，提升決策效率，做體驗是解決用戶的思考時間。

3. 實際產(chǎn)品中的案例

九、圖標保持一致

在UI設計中使用圖標時，要保持一致性，確保他們共有相同的視覺風格，相同的重量，填充和描邊。不要混搭。

1. 左側為什么錯？？

可以看到左圖中的圖標并不統(tǒng)一，線性里面摻雜著面性點綴，這在UI設計中嚴重違背了一致性的原則，會導致我們的頁面不夠嚴謹專業(yè)。

2. 建議正確做法～～

在設計圖標時，首先要保證圖標風格一致，其次在這個基礎上保證圖標的描邊粗細、視覺占比重量、顏色等，不要出現(xiàn)混搭風格。

3. 實際產(chǎn)品中的案例

十、利用對比

在設計頁面模塊時，可以多利對比度的方式來體現(xiàn)設計的表現(xiàn)力，鮮明直接的色值能夠直接表達事物的性質以及特點，通過對比，也能夠更加清晰的強調設計中的重點，這樣給用戶的印象會更深刻，同樣會給產(chǎn)品帶來一定的趣味性。

1. 左側為什么錯？？

左圖中單看視覺也沒問題，只是在表現(xiàn)上圖標與背景融入到一塊了，導致視覺表現(xiàn)力較差，在設計中如果符合產(chǎn)品風格的前提下，我們可以避免這種方式，這種方式雖然具有視覺效果但不夠強，對用戶的記憶點不夠深刻。

2. 建議正確做法～～

設計到類似的模塊時我們可以利用對比的關系，以此突出視覺元素，通過顏色焦點引導用戶關注，強化用戶印象同時還能增加頁面的視覺表現(xiàn)力和氛圍感。

3. 實際產(chǎn)品中的案例

十一、圖文疊加

在設計圖文疊加的卡片或者頁面時，我們需要注意不同明度的圖片上，文字識別是否有阻礙，一般情況會通過遮罩方式避免這個情況。

1. 左側為什么錯？？

左圖中在深色圖片下字體的可讀性是沒有問題的，但當出現(xiàn)文字底部區(qū)域的圖片相對復雜時便會影響識別，第二種情況當圖片明度過高時文字同樣無法識別，試想一下，一張白色調性的圖片上放文字，那基本無法看清，嚴重影響閱讀體驗。

2. 建議正確做法～～

在界面設計時如果遇到類似的卡片，建議在文字區(qū)域添加漸變遮罩的方式，以此保證文字的識別度，或者添加純黑色透明遮罩進行處理，這樣可以兼容不同環(huán)境的圖片與文字的重疊，保證基本的閱讀體驗。

3. 實際產(chǎn)品中的案例

十二、注意遮罩透明

UI設計中經(jīng)常會遇到彈窗，彈窗是需要配合頁面遮罩來讓用戶進行專注操作，不同的遮罩透明度所帶來的專注度也不同。

1. 左側為什么錯？？

左圖中我們看到，遮罩的透明度過低，我案例設置的是17%，此時彈窗內容與頁面內容結構上區(qū)分并不是很明顯，一般彈窗是用來讓用戶跳脫頁面內容，從而瀏覽彈窗內容，轉變用戶目標，當彈窗無法聚焦時便很難達到目標，并且視覺上層級更加混亂。

2. 建議正確做法～～

右圖中案例我把透明度調整到了37%，我們此時再看彈窗很容易就忽略頁面內容，因為灰色越高，遮擋度越高，用戶跳脫感就越強，這樣我們可以讓用戶專注彈窗內容，同時視覺結構上也區(qū)分很明顯

3. 實際產(chǎn)品中的案例

作者：愛吃貓的魚；公眾號：防脫發(fā)藥水

本文由 @愛吃貓的魚 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。

題圖來自Pexels，基于CC0協(xié)議

蘭亭妙微(www.jzvac.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計，以及相關的軟件開發(fā)服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優(yōu)秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan

在日常場景中，畫面平衡是潛在的一個重要影響因素，合理且有吸引力的視覺平衡設計，可以讓用戶更加舒心地接受并停留在使用頁面或者相應場景中。那么，視覺平衡究竟應該如何做好？本篇文章里，作者針對視覺平衡這件事兒進行了分析總結，一起來看一下。

畫面平衡是一個很基本的設計理念，但很多朋友在平時的作品中容易忽視這個點。彩云在星球中幫不少朋友看過作品集，發(fā)現(xiàn)最多的問題之一就是畫面平衡沒做好，我覺得只要把這個基本問題解決了，作品就能提升一個檔次。

用戶本能地會對不平衡的設計感到厭煩，如何在畫面中創(chuàng)造一個有吸引力的平衡？是本篇文章要分享的內容。

Illustration: Outcrowd

平衡是一個作品中最重要的元素之一。平衡中的對稱關系能夠創(chuàng)造平衡與和諧，這種平衡狀態(tài)直觀上能夠讓用戶感到舒適。

人體是垂直對稱的，我們的視覺接收也與之相對應。我們喜歡物體在垂直軸上保持平衡，直覺上總是傾向于平衡一種力量與另一種力量。

Illustration: Outcrowd

在設計環(huán)境中，平衡是基于元素的視覺重量，而視覺重量是用戶對圖像的注意力范圍。如果畫面是平衡的，用戶會下意識地感到舒適。畫面平衡被認為是其元素在視覺上的比例安排。

如何讓一個頁面看起來平衡？

一、對稱（靜態(tài)）平衡

最常見的平衡例子就是使用對稱。

在潛意識層面上，對稱的視覺能讓人愉悅，能讓畫面看起來和諧有條理。對稱的平衡是通過在水平或垂直的中軸兩側均勻放置元素來創(chuàng)造的。也就是說，畫面中間假想線的兩邊實際上是彼此的鏡像。有些人認為對稱的平衡是無聊和可預測的，但它經(jīng)受住了時間的考驗，到現(xiàn)在仍然是在頁面上創(chuàng)造舒適和穩(wěn)健感覺的最好方法之一。

Illustration: Outcrowd

二、不對稱（動態(tài)）平衡

兩側重量不相同的元素構成具有不對稱平衡。

動態(tài)平衡通常會比靜態(tài)平衡更有設計感，讓畫面不至于呆板。在缺乏平衡的情況下，我們的目光會條件反射性地開始尋找平衡點，這是一個很好的機會，可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點就應該放在這里——抓住用戶的注意力，就像產(chǎn)品的生命線一樣。

Landing page — Asian Cuisine

比如一般這樣去“配重”的元素會是一個按鈕或者標題。

重要信息（或者是行動按鈕）就是我們需要去配重的價值元素。

不對稱的現(xiàn)象越嚴重，用戶就越想找出其中的原因（檢查配重）。人們本能地比平時更仔細地研究這樣的畫面。然而，這里需要注意分寸，過于古怪的構圖并不總是能被很好的感知。

三、徑向平衡

Illustration: Outcrowd

平衡中的另一種類型，特點是視覺元素從一個共同的中心點放射出來。徑向平衡在設計中不常用。它的優(yōu)點是，注意力很容易找到并保持一個焦點——恰好就在它的中心，這通常是構圖中最引人注目的部分。

四、馬賽克平衡

這是一種平衡中的混亂，就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點，所有的元素都有同樣的視覺重量。沒有層次，乍一看，畫面就像視覺噪音，但所有元素又相互匹配，形成一個連貫的整體。

（彩云注：這是一種比較高階的設計平衡處理手法，用的好可以讓畫面非常具有設計感，但把握不好的話，就會非常凌亂。所以，我們平時能看到很多大師的作品看似一些簡單圖形的使用，但就是好看，輪到自己設計的時候就會發(fā)現(xiàn)，越簡單的設計似乎越難設計好。）

Illustration: Outcrowd

五、視覺平衡的秘密？

當談到構圖中的重量平衡時，他們經(jīng)常將其與物理世界中的重量進行比較：重力、杠桿、重量和支點。我們的大腦和眼睛感知平衡的方式非常類似于力學定律。我們很容易把一幅畫想象成一個在某一點上平衡的平面，就像一個天平。如果我們在圖像的邊緣添加一個元素，它就會失去平衡，有必要修復它。元素是否是一組色調、顏色還是點并不重要，目標是找到圖像的視覺“重心”，即圖像的重心。

不幸的是，沒有精確的方法來確定一個物體的視覺質量。一般來說，設計師依賴于他們的直覺。不過，下面這些有用的觀察可能會有所幫助：

1）大小

大的物體總是更重。

2）形狀

不規(guī)則形狀比規(guī)則形狀的元素輕。

3）顏色

暖色比冷色重。

4）色調

深色物體比淺色物體重。

5）圖案

帶有圖案的元素顯得更重。

6）3D

帶有紋理貼圖的元素顯得更重。

7）位置

物體離中心越遠，其視覺重量越大。

8）方向

垂直元素比水平元素更重。

9）密度

許多小元素可以抵消一個大元素。

10）內部復雜性

物體內部越復雜，視覺重量更大。

11）填充空間關系

正形空間比負形空間更重。

12）對重量的感知

照片中的啞鈴看起來會比一只鋼筆更重。

六、總結

當使用對稱時，作品看起來可以更加的專業(yè)和有科學性。其中，靜態(tài)對稱的作品顯得更加有專業(yè)精神和嚴肅的；而動態(tài)對稱的設計方法則能吸引用戶的興趣，表達出個性和創(chuàng)造力，能讓用戶集中注意力。

在界面設計中，好看且和諧的配圖會讓用戶潛意識里更容易接受、或者更愿意停留于當前頁面，那么，如何才能把配圖做好，讓界面看起來更加高級和耐看？本篇文章里，作者總結了10個優(yōu)化UI配圖的小方法，一起來看一下。

“配圖用的好，作品差不了”，UI中配圖的好壞直接影響到界面的品質感。它非常重要但卻經(jīng)常容易被忽視，要想把配圖做好其實也是有規(guī)律可循的，今天的文章就將總結配圖使用的10個優(yōu)秀方法，相信看完一定會有所收獲。之前我也寫過另一篇如何選好配圖的文章《如何選到設計感強的配圖，我總結了這7個實用方法》，同時也分享了很多超高質量的圖片素材資源和網(wǎng)站，千萬別錯過。

在欣賞了Behance上數(shù)百個高質量的項目和眾多Dribbble優(yōu)質作品后，我總結出了一套可以將圖片與UI結合提升設計感的方法，可以讓你的作品立即看起來更加專業(yè)。

本文的靈感來源于我剛開始做UI時所遇到的困難。和許多其他設計師一樣，當我在Dribbble和Behance上瀏覽別人的作品獲得靈感時，面對這些海量作品時常會感到迷失和不知所措。就像透過萬花筒看到各種花哨的圖案一樣，當把萬花筒挪開的時候這些圖案就消失了，幸福的感覺是短暫的。當我自己開始設計作品時，我仍然不知道該怎么做。

隨著時間的推移，我意識到我并沒有從日常的作品欣賞和搜集中思考和學習，就只是漫無目的地欣賞了其他設計師的作品。

漸漸地我發(fā)現(xiàn)了一種欣賞其他設計師作品的好方法，我會有意識地去總結記錄下他們使用的想法和技巧，然后應用到我的日常工作。在本文中，我很想分享一些其他設計師用來處理配圖的方法，這些方法可以使作品看起來更加專業(yè)。

一、使用圖片作為背景

（彩云說：這里的圖片選擇要突出核心內容且一定要高質量，不要選擇雜亂無章或與主題無關的低質量圖片。）

二、將圖片于背景進行融合

（彩云說：結合頁面表達需要，選擇合適的配圖并做融合或出界的設計，會讓畫面極具吸引力和強烈的設計感。）

三、將高質量的圖片緊密的放在一起，不留任何間距

（彩云注：當畫面主要以高質量圖片吸引用戶注意時，盡可能的利用更大展示面積，這樣會顯得更加高級和有視覺沖擊力。）

四、在圖片下方添加色塊

（彩云注：這里的色塊要注意跟圖片的主色調保持相近，可以直接吸圖片上的顏色然后找找鄰近色就好了，色環(huán)上30°區(qū)間內的顏色就比較和諧。）

五、在圖片下方/上方增加圖案或形狀

（彩云注：這里的形狀建議不要太過于復雜，用一些基本圖形就可以，比如圓點、方塊矩形之類的，增強畫面的形式感。）

六、在圖片下方或上方增加文字、圖案或不規(guī)則形狀

（彩云注：這里的文字、圖案或不規(guī)則形狀跟上面的技巧類似，都是起到裝飾的作用，但文字的話有時候還要注意識別性，比如文字比較緊湊的時候。圖案或形狀更多的是起到視覺引導的作用。）

七、將圖片剪切到文字或形狀中

（彩云注：這個很好理解，就是以文字或形狀作為遮罩，增加畫面的設計感，文字盡量選擇粗體。）

八、在圖片周圍增加一個非常窄的邊距

（彩云注：這個技巧可能跟第3條有些沖突，其實這2個方法都是可以的，要根據(jù)頁面具體的排版情況靈活使用。）

八、在圖片上增加顏色層

（彩云注：這個技巧也比較容易理解，一般會選擇飽和度較高的顏色應用在充滿活力的頁面上，增加畫面的沖擊力。）

九、在彩色疊加到圖片中的一部分上

（彩云注：這個技巧跟上面的有些類似，只不過是以小面積疊加的形式，顏色一般選擇品牌色或主題色，與背景盡量有較大反差會更加容易出彩。）

十、將圖片剪切成其他形狀

（彩云注：這個方法有一點需要注意的就是剪切的形狀不要過于復雜，一般用基礎圖形就好。）

以上，就是我總結的一些可以用來操作UI圖片的實用方法，這些方法可以使得作品變得更加有視覺感也更加專業(yè)。

為我投票