展開和收起屬于比較細節的問題，按照慣性思維，內容多了我就折疊一部分，用戶需要看更多內容就點擊「展開」，內容展開之后，相應的還應該支持內容的「收起」。

整個流程這樣看起來沒什么毛病，但是卻缺少一個重要的前提，哪些場景或者什么情況下才需要展開或收起呢？

如果只是單純給出一個流程，顯然缺乏對產品邏輯和用戶體驗上的思考。可能很多設計師之前沒怎么注意過這個地方的交互邏輯，或者深入思考需要注意的問題，這次借著答疑的機會咱們一起來深入探討下。

1、拋開展開和收起

雖然提出的問題是分析展開和收起的運用場景，但是我覺得不應該一上來就陷入到具體的細節里。

這個問題相對來說屬于比較小的點，直接鉆到細節里會讓我們只盯著這一小部分，缺少對全局的思考，因小失大。

盯著已有的設計進行推導，這樣多少帶有個人主觀的臆想。先不要盯著具體的展開和收起功能來想場景，反過來想，在設計過程中有哪些地方需要這樣的交互邏輯，為什么需要呢？

無論面對什么樣的設計需求，這樣的思考過程會一直伴隨著我們。

2、先場景后行為

先回到場景上，考慮哪些場景會觸發「展開和收起」行為，再具體問題具體分析。

場景一：當某段內容字數太多，占據了大面積的空間，如果用戶不想看這些長篇大論，想看下一個內容，要滑動屏幕很久才能略過這些內容，顯然我們不想給用戶帶來這樣的操作負擔，這時候就可以考慮添加收起功能，把多余的內容收起來。

這里的收起需要注意兩點：

• 內容被收起不代表被收起的內容不重要；
• 收起相對節約屏幕空間，用戶更方便上下滑動查看內容。

場景二：頁面上仍然有很多內容，但是這些內容有主次之分，我們想讓用戶最先看到前面的內容，后面的內容可以考慮收起來突出重點并節省空間。

這里的收起就和場景一有差異，可能被收起的內容相對沒這么重要，只露出重點/熱點內容或權益來吸引用戶，相對次要的內容被收起，這里的收起會涉及到內容重要程度的排序，這種排序就可以體現在排行榜設計中。

3、展開然后收起

展開和收起屬于一組行為，看到展開我們必然會聯想到收起。展開是為了看到完整的內容，收起則是內容看完的標志，點擊收起可以繼續下一個內容。

在知乎問答中，我們首先看到的是標題的問題，這些問題往往言簡意賅，通常光看標題我們就能知道這個問題想表達什么意思。

▲ 標題下面的問題簡介是對標題的進一步解釋和補充，這里的簡介作為說明性文字，就支持展開和收起。當簡介內容太多時，就要考慮折疊一部分簡介，這樣能保證在首屏上能同時看到問題和答案。

另外當內容很多，以信息流的形式呈現，并且需要上下滑動來瀏覽時，就可以考慮使用現展開后收起。

比如在微信朋友圈，如果文字內容較多，就會被收起一部分，想看完整的內容則需要點擊「全文」選項，看完后點擊「收起」，內容就會被折疊起來，方便我們繼續滑動瀏覽其他朋友圈。

4、展開后不收起

點完展開看到了全部內容，卻沒有收起選項，但是這樣并不影響我們的觀看體驗，而且展開這個動作給用戶和頁面帶來的反應都很小，不會讓用戶感到不適。之所以選擇「展開」，一個重要的原因是因為我們有想看完整內容的強烈需求。在這種意愿的號召下，我們會毫不猶豫地選擇展開功能。

▲ 在豆瓣電影介紹頁中，在劇情簡介區域會有「展開」提示，如果我們選擇展開，說明我們有觀看完整簡介的意愿，并且是主動選擇展開，不添加「收起」選項正好避免了給我們增加操作上的負擔。

另外，當內容相對沒那么多，能在一屏上顯示，不需要用戶上下滑動太多時，可以考慮省去收起，比如在QQ群介紹、抖音個人頁的簡介等。

 

最后

以上是我對展開和收起的運用場景的一些小思考，主要從場景角度來考慮交互邏輯。

授人以魚不如授人以漁，關于展開和收起的場景還有很多，希望大家能掌握這樣的思考邏輯，去發掘更深層的設計內容，當然有問題咱們可以隨時溝通～

 

原文地址：Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網》展開全文后需要支持收起嗎？從運用場景分析交互邏輯

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

a

01.  蘋果iTunes主設計師Ryan Farina 

Ryan Farina之前主要負責iTunes還有蘋果開發者產品的設計，以及蘋果TV的設計。也在Facebook和ins擔任過UX設計師，是一位攝影愛好者，平時特別喜歡攝影和足球，除了twitter好像沒有其他的社交賬號。

Twitter上的賬號也主要分享生活為主，很少去分享設計相關。個人作品博客也目前主要分享攝影作品為主。

Ryan Farina的作品集非常簡單，標準的蘋果風，直接首頁封面放了幾個效果圖作為背景。

和很多設計師不一樣，項目介紹就是一個簡簡單單兩句話說清楚項目背景，如上圖就是介紹蘋果Testflight這款軟件是針對蘋果開發者發布測試的一款產品。

這是他之前負責Facebook個人頁面的作品設計，也是采用簡約的排版和布局。

以及蘋果TV和iPad等產品的一些UI界面設計，蘋果的設計師也并沒有我們想的那么輕松，很多官方APP都需要設計，同時還要考慮眾多平臺的設計和統一。

在職期間主導的iTunes產品設計，這些作品集雖然有點老，但是設計師作品集的包裝上還是有很多值得我們學習的，沒有太多花里胡哨的東西，主要是在板式上凸顯設計功底。

所以從這個設計作品包裝中，我們其實可以學習到，今天一個作品集并不是一定要放很多套路化推導，好的作品你不需要說話，隨便看看設計細節都能被認可。

a

02.  蘋果元老設計師Craig Dehner 

Craig Dehner是和Jony lve一個團隊設計師，他們一起打造了蘋果iOS設計系統，現在在蘋果應該11年了，他是在2009年以實習生身份加入蘋果的。你現在用的蘋果系統就是他參與的，并且是核心設計師。是Cincinnati大學畢業的。

他平時也和很多公司進行過項目合作，包括airbnb等這樣的知名公司。目前定居在舊金山，是一個戶外愛好者。

他的代表作有很多，最出名的就是siri，從0到1構建了siri的設計生態，雖然目前我覺得siri還是不夠聰明和智能，但是在設計層面，還是無可挑剔，特別是動效的設計。

他也參與了airbnb的設計，合作過很多知名項目，不知道是官方合作還是個人項目合作。

他幫助airbnb打造了搜索租房以及選房頁面的體驗，應該是從交互視覺到動效完成了整體的體驗升級。

整個作品集的包裝遵循了蘋果一貫的簡約風格，細節和動畫也處理的非常逼真。

同時他作品集還有lyft打車應用，這個應用相當于美國的滴滴。他主要和他們負責UI設計和動畫設計，以及最早的概念海報。

打車頁面設計，整個打車處理的動效非常逼真和真實，流程也非常順暢。

整個動效非常細膩，路障的設計，周圍的人的設計，以及拐彎場景等等非常逼真，同時也能感覺到智能科技的感覺。

以及在iPad端的一些體驗設計，一如既往的蘋果風格和高級感。

他也是iOS9的主設計師，這里想分享一點，用模型機的技巧。很多設計師用樣機，但是完全看不到界面任何細節，樣機選擇一定要高質量高清，能看清楚設計細節。

這個是一款比特幣銀行的電子錢包設計，區別于其他錢包設計，在安全性上做的比較精致。

電子錢包開鎖界面非常的酷，不像傳統的輸入密碼打開那樣，而是非常逼真的方式，像打開保險箱一樣的方式。

整體設計區別于其他的比特幣錢包，運用黑色的設計，非常酷，同時頁面很多地方都體現出了安全感，讓用戶放心。

早期的蘋果TV引導頁面，以及蘋果系統登錄激活的頁面都是這位設計師做的，真的是蘋果元老級別的設計師。

整個的電視界面設計，一如既往簡約風格。在AR空間里面做設計，體驗上有手機上有很大的差別，但是設計師駕馭的非常的好，也很有創新。

我很喜歡他的扇形菜單設計，非常的科技感，戴上VR眼鏡后，仿佛世界就在你眼前。

最后看幾張他的作品包裝，版式很簡單，左圖右文沒有很復雜的包裝形式，但是每個作品細節深入人心。

s

03.  蘋果實習生Julia Liang 

蘋果設計團隊人不多，每年也會招募一些非常優秀有潛力的實習生，Julia Liang是美國UC Berkeley大學的一名女生，目前在蘋果實習，可能現在轉正了，我們一起來看看什么樣的水平能夠進蘋果實習。

這是這位設計師大學期間設計的海報設計，是一個印刷海報，雖然很簡單，但是里面細節很豐富。

平時一些手繪設計，會畫一些自己學會的東西?？吹某鰜硎且晃粺釔凵畹脑O計師。

大學也經常接一些私活項目，貌似還給中國一個律師網做過LOGO設計。

這是他平時的一些LOGO設計，紅十字會的一些公益設計。

在校期間的一些學校?；仗剿鳎梢钥闯鲈O計師雖然設計作品沒有那么商業，或者很強技法，但是在設計創意表達上還是有很多天賦。

另外一個APP設計，從作品集中看出應該是全程參與其中，并且做了很多調研的工作。

是一位UX思維非常強的，作品集有大量設計分析和思考的過程。

一些落地方案的設計，在他這套作品集里面我看到了很多和我們國內作品集不一樣的地方，設計師在發現問題解決問題思路上很閉環，并沒有很虛的套模塊。

a

04.  最后 

今天分享的幾個蘋果設計師作品集，主要幫大家打開眼界，好的作品集不一定要有很多流程很多套路，只需要在作品里面能體現你的思考，你的視覺表現力即可。好的作品本身就會說話，切忌為了追求形式化而用錯力。

原文地址：我們的設計日記（公眾號）

作者：sky

轉載請注明：學UI網》國外 百萬美金作品集。長啥樣？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

1、SimilarWeb – 網站流量來源和排名

可以看到一個網站的基本數據，比如瀏覽量，訪客都來自世界的哪里？-都是通過什么途徑訪問的該網站等等

以上是我用B站來舉例，可以看到一些基本信息，點擊下面的按鈕可以跳轉到新頁面用以查看很多的信息：

最關鍵的來了，最下面可以查看與該網站相似的網站，這條對設計師非常有幫助，很多設計師做網頁設計的時候不會找競品，這功能簡直是福音?。?

另外還有一點，比如你要去面試一個公司，很多人不知道面試說什么，你就可以用這個小插件來看看你要面試公司的網站數據情況，然后再結合你自己的設計作品鏈接起來，顯擺你對他們公司客戶群的了解，這樣面試時候就可以做到侃侃而談不失尷尬。

 

2、Nimbus 截幕 & 屏幕錄像機

功能非常多，各種模式的截圖都有：

 

3、也就是萬人推薦的Muzli 2 – Stay Inspired

設計師必備的主頁，每次打開都可以看到很多新鮮的設計資訊。

你甚至可以直接搜索顏色，然后會出來很多設計作品。還可以搜索關鍵詞，比如你搜索dasboard

有條件的可以打開chrome檢查看看自己是不是都安裝了，如果你還有不錯的插件推薦，可以在下面留言。

 

原文地址：追波范兒（公眾號）

作者：terechen

轉載請注明：學UI網》關于設計的小插件，我只保留了這3個

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

 

#2.信封透明封面小冊

 

#3.高級感簡約iphone樣機

 

#4.3D手持樣機

 

#5.工卡名牌樣機

#6.iphone12樣機模型

#7.高級感紙張紋理樣機，可以使用在海報包裝上

#8.折疊小冊子模型

#9.簡約紙袋模型

#10.高級感褶皺樣機

#11.情緒版展示樣機

好了，分享到這，文件已打包好

轉載請注明：學UI網》我翻遍全網，這11種高級感樣機建議下載

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

1. 場景化用詞

針對特定的場景，使用文案進行情感的烘托、渲染或是放大，通?？梢詭硪庀氩坏降男Ч?。

案例 1

QQ 音樂會員到期的續費提醒文案，是由各類歌名組成的一句話，每天的到期提醒都不同。這種形式增加了用戶的停留時長，也更富有情感共鳴。

案例 2

釘釘的桌面版，在用戶退出后重新登錄時，在產品的右半側會分不同時段展現不同的歡迎用語，下圖是早上和中午的歡迎頁。

案例 3

知識星球在用戶發表評論時，會用不同的語句，對評論這個場景做用戶行為引導。

案例 4

很多產品對于某些功能的空狀態設計，都融入了個性化的語言描述，至少會讓頁面更有情趣：

2. 更精準的描述信息

有些文案對于信息起到精準的描述和呈現，雖不是必須要呈現的內容，卻可以將文案作為加分項，而創造更優的體驗。

案例 1

支付寶頁面的“理財熱點”和“抗擊疫情”的數據，都顯示了實時更新的時間數據，讓信息給用戶的感覺變得更加可信和準確。

案例 2

京東的一些商品在提交訂單頁面，會顯示商品進入了某個排行榜，比如  “恭喜你，挑選的商品好評度高達 97%”，或者 “XXX熱賣榜第 2 名” 等，給予用戶的選購能力和產品質量的肯定，促使用戶開心買單。

案例 3

美團外賣在開通會員的卡片上很醒目的標示出卡通會員后，可以為用戶節省的預估成本，以及限時的驚喜紅包提示，降低會員成本在用戶心里的預估價。

案例 4

飛書的聊天窗口中，每條消息的時間默認不顯示，但在單擊每條消息時，就會在下方顯示該條消息的時間，精確到秒級。

3. 字體和排版設計

對于文案本身的字體選擇和排版設計，如果可以和文案的內容或功能有效的結合，也可以對用戶體驗起到提升作用。

案例 1

得到 App 的閱讀設置頁面，字體有 4 種選擇，字體樣式就用在字體名稱上進行展示，讓用戶對于字體的樣式一目了然，很有體感。

類似的方案在很多軟件中都有體現，比如 Sketch 的字體選擇功能：

案例 2

8 月 13 日有英仙座流星雨，B 站的央視新聞當天的直播彈幕，就變成了流星雨的形狀，很有新意。

案例 3

同花順 App 中把用戶對于股票的評論以彈幕的形式進行呈現，既讓評論變得直觀，又可以提升用戶對于個股的重視程度。

原文鏈接：長弓小子（公眾號）

作者：元堯

轉載請注明：學UI網》案例錦囊｜如何巧用「文案設計」優化用戶體驗？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

一  階段劃分

按時間和經驗區間來看，大致可以分為三個階段：初級階段、高級階段、專家階段。

每個階段我們總結出一個最具有關鍵點的問題來展開分析。

二  初級階段

這個階段的設計師初入職場或者一兩年工作經驗，處于小白階段，對任何事物都有好奇心，精力也是最充沛的階段。

同時也是在這個階段，設計師往往是迷茫的，不知道自己要朝著哪個方向努力、該學習什么。一個不小心，努力錯了方向，耽誤的時間是彌補不了的。

這里我給初級階段的設計師總結了一個問題，同時這個也是目前各大廠在招人的一些可參考的標準。

（問題一）如何在眾多設計師中脫穎而出？

2.1 對設計有足夠的熱愛

俗話說干一行愛一行，只有對設計有足夠的熱愛，才能激發出無限的潛力。加班到深夜完成一個項目后，才會有無比的滿足感而不是厭惡感。

2.2 學習能力

學習伴隨終生，互聯網發展如此之快，你如果只局限于現有的能力，早晚會被時代所拋棄。學習能力分為兩類：

• 自我學習：抓住當下火熱的趨勢，不斷挑戰自己的能力，提升自己；
• 項目中學習：項目完成后做復盤，可以讓你學到更多的東西，避免相同問題再犯錯。

2.3 交叉能力

職業有邊界，設計無邊界。不要只看重自己當下職業中的技能，要把有限的職業做出無限的可能。多學習相關知識和技能，充實自己。

2.4 協作能力

隨著互聯網的發展，協作能力變得越來越重要，很多項目是你一個人無法完成的，所以就需要多人協作，人效也尤為重要。為了提高效率，你就必須增強你的協作能力。

2.5 責任心

有責任心的設計師往往是會被看重的，像那些只為了眼下自己的任務而不關心項目整體的設計師，會被慢慢邊緣化。

2.6 有想法

這個是基本的能力，就不用過多闡述了吧？沒有想法的設計師只是一個沒有感情的做圖機器。

2.7 高執行

無論有多好的設計能力、想法，最后能落地才是好方案，高的執行力可以讓你的方案很快的落地，不至于讓別人認為你只有嘴上的功夫。

2.8 懂商業

隨著行業的發展，設計能力不僅僅是視覺能力，更大一部分是是否滿足商業化的需求，只有懂商業才能設計出更符合消費者的產品。

2.9 正能量

設計師一定要有正能量，是一個積極向上的人，每天都在想 *** 的事情，是不能成為真正的大神。

2.10 有沉淀

每個設計師的思想都是獨特的，你要把自己的想法和經驗沉淀下來，多年過去回頭看，你才不會覺得前些年什么都成績都沒有。

三  高級階段

高級階段一般處在 5 年左右的一個工作經驗，這個時候職業技能方面已經爐火純青，行業上面也有一些造就。

這個時候呢，又到了職業生涯的第二個分叉口。我們就來引出第二個問題：

（問題二）30+ 歲的設計師如果走不上管理崗，該如何做好自己的職業規劃？

在這里我想反問大家兩個問題：

• 管理崗位跟你的職業目標是不是一一對應？
• 你是想要獲得一個管理崗位還是管理的能力？

其實在 30 歲這個年齡，是設計師最美好的時間。要職業技能有職業技能，要經歷有經歷，也有年輕人的干勁。

其實很多人都是因為喜歡設計這個行業才做的設計，剛畢業的時候都是憧憬著自己哪一天能成為設計界的大?！，F在卻被行業內卷的，非要走上管理崗嗎？

設計上走上管理崗是一種出路，但不是唯一出路，我們完全可以在專業度上深挖，把自己打造成一位大神（據大廠數據統計，專家級別的平均年齡在 30 出頭）。

設計是有無限的可能，把所有的時間都放在專注設計上都不夠用的。

最后，我想再反問大家一個問題：你真的想得到的是管理崗嗎？你有可能只是想得到認可。

所以價值的體現會在各個方面，不要被內卷的世界所誤導。

四  專家階段

這個階段你就已經站在了行業金字塔的頂端了。一般情況下，就算不專門的轉做管理崗，也會或多或少的帶一些職級低一些的設計師，需要有一些管理的能力。那么最后一個問題也就也就引出來了：

（問題三）如何打造一個優秀的設計團隊？

4.1 對專業的熱愛，你要讓你團隊的成員感受到從上到下都是很專業的。很多優秀的設計團隊不是有很多人，而是有一群非常專業的人。

4.2 愛的氛圍：你要把團隊成員當做家人一樣，讓他/她在這個團隊里感受到愛。

4.3 給予大家更多的空間，不設定死的 KPI 目標，不設定框框架架，可以激發更多的潛力。

4.4 接上一個點，如果沒有 KPI，那該如何量化設計價值？當團隊的專業能力達到足夠的高度，硬性指標的事情就會做的非常得心應手，反而大家都會去做一些沒有嘗試過的事情，激發框架之外的潛力。

4.5 找一個比你還優秀的人，永遠有個人鞭策著你，讓你不斷前進。

4.6 你要做決定，要不然要你做什么，做任何一個關于團隊的決定。

最后總結下來，你要“雌雄同體”，既要有男性的理性和果斷，也要有女性的包容和愛，這樣才能成為一個合格的 leader。

總結

每一個階段的過度都是一個成長，勇于困難、不懼未來，你總會成為你理想中的樣子，加油！

最后，希望本編文章能對看完的你有所幫助，這也是我做分享的初衷，我們下期見。

原文地址：友設青年（公眾號）

作者：Luckgg

轉載請注明：學UI網》我們來聊一聊設計師成長的三個階段

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

1. 色輪分析

顏色是我們眼睛感知不同波長的方式。色輪是將一系列顏色，有次序地利用圓盤的形式展現出來，色輪顏色的構成包括三組顏色：

原色：紅色、黃色、藍色

二次色(間色)：綠色、橙色、紫色(三原色混合而成)

三次色(復色)：黃橙、紅橙、紅紫、藍紫、黃綠、藍紫(原色二次色混合而成)

通過不斷混合相鄰的顏色，產生新的顏色，最終形成一個全域的色輪。

▲ 色輪顯示了3組顏色，原色范圍最小，在圓的的中心處，二次色在中間環。最大的外圓由三次色組成。

2. 色彩搭配

色彩搭配最基本且重要的原則就是顏色間要相互協調，一些常見的顏色搭配包括：

同類色：色輪上90°以內彼此相鄰的顏色，這種顏色搭配的對比度較低。

互補色：色輪上相對的顏色，產生較高的色彩對比度，在搭配上可以一種作為主色，另一種用于強調。

分裂補色：互補色兩側相鄰的顏色。這種顏色搭配既有同類色的低對比度的美感，又具有互補色的沖擊力，形成一種既和諧又突出重點的顏色關系。

三色組：色輪上的三種等距顏色，相隔120度，其中二種顏色互相類似，另一種與它們形成對比關系。

單色搭配：只使用一個色相,通過改變飽和度、明度來得到其他色彩。這種搭配看上去干凈、優雅，但是不容易突出重點。

引入的顏色越多，就越難平衡視覺層次。如果你有豐富的配色經驗，可以從兩種或三種顏色開始，不斷嘗試更復雜的搭配。

3. 色彩含義

雖然隨著全球化的到來，某些顏色可能已經達到了標準含義，例如紅色表示停止，綠色表示開始，但色彩含義會因文化而有所差異，例如想一下錢是什么顏色，紅色(中國)還是綠色(美國)？

如果想在設計中明確解釋色彩的含義，需要做到兩點：

• 顏色可能不會在全球范圍內起作用；
• 設計時考慮少數群體(色盲)，進行用戶測試來確保用戶明確了解顏色示意。 

4. 將色彩理論應用到設計中

調色板是為特定項目、品牌選擇的一系列或一組顏色，每個顏色都是特意添加的，整個調色板的色彩組合展現了產品或界面的視覺美感。

創建調色板

選擇一種顏色搭配并進行顏色迭代

單色方案通常最容易創建和應用，因此如果你沒有太多的配色經驗，可以從這種配色開始。

首先要弄清楚為什么要選擇這些顏色、這些顏色有什么作用、表現出來怎樣的效果等問題，這樣創建調色板才更有效率。

▲ 如果在配色過程中覺得卡住了或者不知道從哪里開始，可以從ColorHunt的調色板中汲取靈感。

將調色板限制為三種顏色

少量的顏色加強了視覺層次和對比度，因為影響用戶考慮和分心的元素更少。所有的顏色都在爭奪注意力，在設計中也是如此。

▲ 少即是多。過多的顏色反而會讓用戶眼花繚亂，找不清重點信息。

遵循品牌的顏色標準

創建調色板時要始終遵循既定的顏色標準，這樣不僅會讓工作更輕松，因為不考慮太多新的的顏色，還會給用戶帶來一致的品牌體驗。

如果沒有品牌色標準，可以看看現有設計和產品中使用的顏色，并嘗試融入到調色板中。

▲ 耐克的網站使用了最基本的單色調色板：黑色、白色和灰色，這種顏色選擇使用戶可以專注于產品。

使用調色板

使用60-30-10規則

這條規則僅表示主色使用60%，輔助色使用30%，強調色使用10%，通常主色和輔助色是相對中性的顏色。

這些比例有助于創造平衡，防止搭配的顏色出現混亂。

▲ 蘋果新聞App很好地使用了60-30-10規則，白色和淺灰色是主色調，藍色是輔助，粉色作為強調色來吸引了用戶的注意力。

應用然后迭代

使用了60-30-10規則后，接下來就要調整顏色來提高美感，并且突出設計中重要的內容。

看看顏色選擇是否有助于創建正確的視覺層次結構、顏色選擇在設計中是否創造了平衡和對比。

保持顏色的一致性

一致性是幫助用戶理解顏色使用的關鍵。如果在一個頁面上使用亮藍色作為提示按鈕，那么在產品的任何地方都應該使用相同的顏色作為提示。

測試調色板

測試設計效果

將調色板應用到設計中后，需要做一些可用性測試，例如顏色在按鈕、鏈接或其他類型組件上的可用性，頁面的易讀性和可訪問性問題等

最后

合適的顏色搭配可以增強品牌認知度，吸引用戶注意力并提高可用性，靜下心來多多實踐，才能充分利用好這些奇妙的顏色。

最后為大家分享一波非常不錯的配色方案，特別適合用在日常設計中～

下載方式：

1）關注公眾號“Clip設計夾”

2）公眾號后臺回復“配色”自動獲取下載鏈接

原文地址Clip設計夾（公眾號）

作者：Clippp

轉載請注明：學UI網》配色看起來總是不舒服？用這個科學的配色方法！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

a

字體 

Samsung Sharp Sans

三星這款字體是一個幾何感很強，接近完美的圓形O和簡約設計感強的小寫字體，特別是字母a設計的脫穎而出。

在首爾的街頭上，物理交通工具上，這款字體都很清晰美觀，和整個城市的時尚結合在了一起。字體不僅僅是一個字體，同時還是一個溝通工具。三星這款字體不僅用在數字廣告，還包括印刷上，這個字體承載了三星對于未來的突破。三星不再是只有產品線，而是成為時尚生活品牌。

在移動端，三星使用的是 Samsung One 字體，它也是一個非襯線字體，相對于傳統的襯線字體，這款字體設計更加具有人性化。

蘋果和谷歌早已推出了自己的字體，三星也推出了自己的通用字體，Samsung One 由三星和 Brody Associate 聯手打造。超過400種語言，以及超過25000個字符，成為一套全球性的字體。從手機到電視，從筆記本電腦到微波爐，所有的三星產品都將用上這套字體。它也是未來三星視覺語言的核心。

Samsung One 字體設計語言有5個關鍵詞：人文主義，易區分，通用性，專業性，清晰可擴展。

▲人文主義：筆畫自然就像手寫一樣變化，字體具有動態角度的正方形曲線，有很大想象空間。

▲字沒有的左右空間都很窄，所以有效空間非常好。

▲通用性：在全球各種語言環境下要足夠通用。

▲專業性：就是每個筆畫的設計都需要經得起考究。▲清晰可擴展：各種場景的拓展性這塊需要能適用。

Helvetica Neue 字體之前有一些設計很受詬病的地方，比如時間的冒號不居中，理想狀態應該是居中，識別性和平衡感更好。

三星整體的版式采用的左圖右文或者右圖左文，這樣的設計能讓用戶更加關注內容，閱讀也比較符合從左到右的習慣。這樣的版式結構在全球官網設計都是類似，和蘋果的上下排版不同。版式字體上也是通過字重來凸顯視覺層級。

蘋果會結合產品的特點，重點體現產品，其次生活場景。三星的產品圖片，色調都是以生活化，貼近生活為主，無論手機還是電器。

原文地址：我們的設計日記（公眾號）

作者：sky

轉載請注明：學UI網》蘋果和三星，哪家設計強？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

宋體的起源和發展

雕版宋體字的形成 

在印刷術發明之前，書要一字一句用手抄寫，費時費力。而唐代發明的雕版印刷術，使書籍由手工抄寫進入印刷復制時代。

現存最早的雕版印刷品是唐代咸通九年的《金剛經》

宋朝體

到了宋代，雕版印刷迎來黃金時代，但此時的字體也并非我們熟知的“宋體”，而是以唐代大家的楷書字體入板，并且不同地區入板的字體也不同。

浙江刊本–《姓解》

四川地區 – 《開寶大藏經》

明朝體

明朝體是中國明代木板印刷中出現的字體，也是現今大眾所認知的“宋體”的原型。雖然明朝體逐漸失去宋朝體所特有的風格，但由于易于凋刻，字形便于走刀，能滿足當時的印量而得以發揚。

《南齊書》 –明朝時期的南京國子監刊本

清代宋體字

在康熙中期以后逐漸形成清代的風格，此時的宋體字更加成熟、精致。乾隆時期，宋體字大體定型，與現代宋體字基本相同。

《學統》清康熙刻本

綜上所述，我們可以知道宋體字不是宋朝的字體，而是漢字字體中的一種風格類別。而在日本以及港臺地區，宋體字也被稱為“明朝體”，“宋體”與“明體”本為一物，是由于文化差異所帶來的名稱上的差異。

現休宋體

如今，為了適應印刷和電子屏顯示的需要，宋體又被進行了一番改造?，F代型宋體的幾何特征更為明顯，筆畫更為利落冷峻，為了可讀性，文字胸線也較大，更加符合現代設計所需要的明快感。

以宋體為基礎發展出許多新字體，各大字庫也開發有各有特點的宋體。包括老宋到新宋，再到仿宋，從用于標題的粗宋、中宋，到用于正文的書宋，成為一個完整的字體系列。筆畫較粗的宋體適合用做標題，醒目大方；筆畫較細的宋體，擁有很高的閱讀性，主要用于正文排版。

根據中宮和體飾等特點，可以大致地將宋體分為傳統型宋體、中間型宋體、現代型宋體：

目前可免費商用的宋體字非常稀缺，

推薦9款免費商用宋體。

宋體的使用場景

傳統、歷史

傳統宋體的筆畫結構帶有手工雕刻的痕跡，幾百年的文化沉淀，加上字體本身的特征，使得宋體用于傳統、歷史題材的設計中，可以體現出古樸的傳統文化感。

文化、藝術

宋體由于繼承了自然書寫的痕跡，又具有精致的裝飾性美感，運用在文化藝術等題材，具有強烈的人文氣息，充滿文藝范。

典雅、高貴

宋體字方正平穩、對稱均衡的字體結構，顯得端莊典雅，舒展大氣。常運用在要體現高端、雍容、典雅、華麗的設計中。

女性、優雅

宋體在工整中充滿人情味，有著很強的韻味感和精致美感，帶著幾分女性的溫柔與優雅氣質。所以很多和女性相關的設計都會使用宋體。

時尚、前衛

現代宋體筆畫呈幾何化結構，相對于傳統宋體的溫情，現代宋體更加的冷峻，細膩中透露出時尚前衛的風格，具有時尚感與精致的印象。

宋體搭配推薦

案例一

使字體搭配協調的一個基本原則就是選擇風格相近的字體。使用同一字族里的字體進行搭配，是最簡單、安全的搭配方法。所謂字族（font family）即一款字體下的多個子字體，如思源宋體字族從細到粗共有七款字體，風格協調統一。

使用中西文組合排版時，西文盡量不要使用中文自帶的字體。宋體常與襯線體相搭配使用，因為兩種這字體無論在筆畫特征，還是氣質上都很相似。如本案例使用的是西文字體“Times New Roman”。

在編排時需要形成視覺層次，通過字體的大小、粗細、顏色等方式來給版面帶來閱讀的層次感。

案例二

搭配不同的字體時，要注意他們之間的包容性，既要有所區別又要統一和諧。書法字筆畫變化豐富且非常具有視覺沖擊力，通常會搭配同樣具有歷史文化屬性的宋體字形。

西文則選擇與宋體對應的襯線體，與書法字形搭配。

根據書法字的結構和筆勢，通過對文字大小、位置的調整，進行編排，讓文字看起來更緊密也更有節奏感。

案例三

在進行時尚類的設計時，可以選擇現代型宋體，西文字體則可以搭配幾何襯線體。本案例使用方正風雅宋和Didot進行搭配，這兩款字體簡約的幾何造型和粗細對比強烈的筆畫，細膩中透露著時尚前衛的風格。

黑體與宋體的混搭是很常用的一種搭配方式，需要注意的是尺度的把握，適當的對比能夠為版面帶來更豐富的視覺印象，但對比過度也會產生凌亂感。

本案例選擇較細黑體進行搭配，字形形成了微妙的對比，較細的黑體還有著高雅、精致的氣質，運用在具有女性時尚特征的設計中相得益彰。西文則選擇和黑體相對應的無襯線體。

編排效果：

如果感覺排版太過于規矩，可以嘗試加入手寫體加強字形對比，打破呆板感，營造更強烈的動感。

在進行設計時，不管是中文與中文還是中英文搭配，都是需要經過仔細分析和不斷練習，才能達到和諧統一、層次清晰而美觀大方的效果。

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

轉載請注明：學UI網》如何排版更高級？帶你重新認識宋體字排版！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

宋體的起源和發展

雕版宋體字的形成 

在印刷術發明之前，書要一字一句用手抄寫，費時費力。而唐代發明的雕版印刷術，使書籍由手工抄寫進入印刷復制時代。

現存最早的雕版印刷品是唐代咸通九年的《金剛經》

宋朝體

到了宋代，雕版印刷迎來黃金時代，但此時的字體也并非我們熟知的“宋體”，而是以唐代大家的楷書字體入板，并且不同地區入板的字體也不同。

浙江刊本–《姓解》

四川地區 – 《開寶大藏經》

明朝體

明朝體是中國明代木板印刷中出現的字體，也是現今大眾所認知的“宋體”的原型。雖然明朝體逐漸失去宋朝體所特有的風格，但由于易于凋刻，字形便于走刀，能滿足當時的印量而得以發揚。

《南齊書》 –明朝時期的南京國子監刊本

清代宋體字

在康熙中期以后逐漸形成清代的風格，此時的宋體字更加成熟、精致。乾隆時期，宋體字大體定型，與現代宋體字基本相同。

《學統》清康熙刻本

綜上所述，我們可以知道宋體字不是宋朝的字體，而是漢字字體中的一種風格類別。而在日本以及港臺地區，宋體字也被稱為“明朝體”，“宋體”與“明體”本為一物，是由于文化差異所帶來的名稱上的差異。

現休宋體

如今，為了適應印刷和電子屏顯示的需要，宋體又被進行了一番改造?，F代型宋體的幾何特征更為明顯，筆畫更為利落冷峻，為了可讀性，文字胸線也較大，更加符合現代設計所需要的明快感。

以宋體為基礎發展出許多新字體，各大字庫也開發有各有特點的宋體。包括老宋到新宋，再到仿宋，從用于標題的粗宋、中宋，到用于正文的書宋，成為一個完整的字體系列。筆畫較粗的宋體適合用做標題，醒目大方；筆畫較細的宋體，擁有很高的閱讀性，主要用于正文排版。

根據中宮和體飾等特點，可以大致地將宋體分為傳統型宋體、中間型宋體、現代型宋體：

目前可免費商用的宋體字非常稀缺，

推薦9款免費商用宋體。

宋體的使用場景

傳統、歷史

傳統宋體的筆畫結構帶有手工雕刻的痕跡，幾百年的文化沉淀，加上字體本身的特征，使得宋體用于傳統、歷史題材的設計中，可以體現出古樸的傳統文化感。

文化、藝術

宋體由于繼承了自然書寫的痕跡，又具有精致的裝飾性美感，運用在文化藝術等題材，具有強烈的人文氣息，充滿文藝范。

典雅、高貴

宋體字方正平穩、對稱均衡的字體結構，顯得端莊典雅，舒展大氣。常運用在要體現高端、雍容、典雅、華麗的設計中。

女性、優雅

宋體在工整中充滿人情味，有著很強的韻味感和精致美感，帶著幾分女性的溫柔與優雅氣質。所以很多和女性相關的設計都會使用宋體。

時尚、前衛

現代宋體筆畫呈幾何化結構，相對于傳統宋體的溫情，現代宋體更加的冷峻，細膩中透露出時尚前衛的風格，具有時尚感與精致的印象。

宋體搭配推薦

案例一

使字體搭配協調的一個基本原則就是選擇風格相近的字體。使用同一字族里的字體進行搭配，是最簡單、安全的搭配方法。所謂字族（font family）即一款字體下的多個子字體，如思源宋體字族從細到粗共有七款字體，風格協調統一。

使用中西文組合排版時，西文盡量不要使用中文自帶的字體。宋體常與襯線體相搭配使用，因為兩種這字體無論在筆畫特征，還是氣質上都很相似。如本案例使用的是西文字體“Times New Roman”。

在編排時需要形成視覺層次，通過字體的大小、粗細、顏色等方式來給版面帶來閱讀的層次感。

案例二

搭配不同的字體時，要注意他們之間的包容性，既要有所區別又要統一和諧。書法字筆畫變化豐富且非常具有視覺沖擊力，通常會搭配同樣具有歷史文化屬性的宋體字形。

西文則選擇與宋體對應的襯線體，與書法字形搭配。

根據書法字的結構和筆勢，通過對文字大小、位置的調整，進行編排，讓文字看起來更緊密也更有節奏感。

案例三

在進行時尚類的設計時，可以選擇現代型宋體，西文字體則可以搭配幾何襯線體。本案例使用方正風雅宋和Didot進行搭配，這兩款字體簡約的幾何造型和粗細對比強烈的筆畫，細膩中透露著時尚前衛的風格。

黑體與宋體的混搭是很常用的一種搭配方式，需要注意的是尺度的把握，適當的對比能夠為版面帶來更豐富的視覺印象，但對比過度也會產生凌亂感。

本案例選擇較細黑體進行搭配，字形形成了微妙的對比，較細的黑體還有著高雅、精致的氣質，運用在具有女性時尚特征的設計中相得益彰。西文則選擇和黑體相對應的無襯線體。

編排效果：

如果感覺排版太過于規矩，可以嘗試加入手寫體加強字形對比，打破呆板感，營造更強烈的動感。

在進行設計時，不管是中文與中文還是中英文搭配，都是需要經過仔細分析和不斷練習，才能達到和諧統一、層次清晰而美觀大方的效果。

原文地址：藝海拾貝Design（公眾號）

作者：鄧海貝

轉載請注明：學UI網》如何排版更高級？帶你重新認識宋體字排版！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務