今天我們要講的主題

圖形與裝飾

01.增加裝飾

粉色的信紙，抒寫著我對你的思念

用唱片機(jī)包裹著愛情，播放著不會有人聽到的音樂，暗示著我們原來早已分開多年，而唱片機(jī)將簡陋的版面包裝成看似文藝感的設(shè)計(jì)。

02.增加圖形

純色的藍(lán)底配上皮衣?lián)u滾，有點(diǎn)枯燥，貌似點(diǎn)燃不了我的激情。

不妨加入圖形試試看，一個圓，不夠。畫個山還是不夠。

干脆再加點(diǎn)不規(guī)則的圖形吧，仿佛是愛慕的觀眾將她層層包圍，配上裝飾與文字，活躍和青春的氣氛就有了。

 03.綜合示例

一張照片，我心意已久，切成圖形化讓她住進(jìn)我的心房。

在心房外加點(diǎn)文字寄托我對你的想念

上下的色塊與圖形化的裝飾仿佛在告訴你，這就是我小鹿亂撞的樣子，加入文字切入喜歡的主題，讓這份喜悅保留下去。

圖形和裝飾就像夜店的音樂和燈光，假如失去這些，確定還能蹦的下去嗎？

04.案例實(shí)操

純色的紅底配上剛發(fā)完工資正在SHOPPING的女人，她可能不知道今天的開心是需要剩下的29天時間來填補(bǔ)的。

但缺少的節(jié)日氛圍和單一的畫面，讓她失去了購物所帶來的喜悅，有的只有孤獨(dú)和尷尬的笑容。

試著利用圖形與裝飾的方式，繪制圣誕樹圖形表達(dá)節(jié)日特征。

人物放置到圖形中間，給圖形的內(nèi)部增加場景或者層次光源。

將人物穿插到圖形上從內(nèi)而外的層次性，試著增加一些帶有透視角度的元素和有質(zhì)感光澤的文字。

簡單但實(shí)用的設(shè)計(jì)更符合傳達(dá)最基本的商業(yè)化設(shè)計(jì)，當(dāng)然你也可以給綠色的圖形加點(diǎn)光，畢竟綠色加點(diǎn)光，日子才不慌。

再來對比下該案例的效果，簡單的示例希望能啟發(fā)對設(shè)計(jì)中圖形與裝飾的運(yùn)用方法。

這就是今天帶來排版那點(diǎn)事！

原文地址：修先森撩設(shè)計(jì)（公眾號）

作者：修先森

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》利用圖形與裝飾，能讓設(shè)計(jì)化腐朽為神奇

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

福特創(chuàng)始人亨利·福特本人也十分喜愛小動物，將公益融入企業(yè)發(fā)展，踐行企業(yè)社會責(zé)任，這正是一個偉大品牌的開始。

CEGC在中國已經(jīng)有20年的歷史，1983年首次在英國成立，2000年進(jìn)入中國，而福特汽車進(jìn)駐中國是在1995年，因此CEGC幾乎是和福特品牌一路同行至今，有著久遠(yuǎn)的歷史足跡。

全新標(biāo)識CEGC分別代表了四個形象象征：

C：陸地 — 雪豹 — 勇敢的精神
E：天空 — 斑頭雁 — 自由而博大的胸懷
G：水 — 江豚 — 生命的起源
C：萬物的尺度 — 人 — 深邃的愛

新的品牌形象，從定位、結(jié)構(gòu)，以及LOGO的色彩進(jìn)行了全新的設(shè)計(jì)，從不同空間構(gòu)建品牌價值觀念。

福特公益多年來為改善地球環(huán)境做出努力，保護(hù)生態(tài)平衡，CEGC的內(nèi)涵則是代表了區(qū)域性的生態(tài)、生物多樣化繁榮發(fā)展。

做任何一個公益項(xiàng)目，不是隨著一次評選活動結(jié)束而結(jié)束，環(huán)保項(xiàng)目應(yīng)當(dāng)是可持續(xù)的走下去，走得更遠(yuǎn)。這次的品牌升級將助力福特汽車環(huán)保獎朝著更嶄新的階段邁進(jìn)。

CEGC的設(shè)計(jì)理念，最終可以表達(dá)為，信息傳達(dá)與藝術(shù)的完美統(tǒng)一。

讓品牌有最清晰的識別力，代表生物多樣性。

CEGC不僅是視覺上的感受，希望以此也能帶來行動上的力量，讓設(shè)計(jì)的意義變的最大化，最終為品牌帶來最優(yōu)的價值。

新的定位：

支持系統(tǒng)性變革、支持優(yōu)秀民間環(huán)保力量可持續(xù)發(fā)展、保護(hù)生態(tài)資源與物種多樣性，在新的升級中，重練品牌的核心價值。

為公益品牌服務(wù)，賀冰凇團(tuán)隊(duì)一直是踐行于實(shí)際幫助的，通過設(shè)計(jì)和藝術(shù)給這個世界帶來更好的一面，希望借此，吸納更多的力量，為環(huán)境保護(hù)發(fā)揮更大的作用。

©注：設(shè)計(jì)中使用的人物圖片皆來自CEGC官方公益項(xiàng)目資料，均有署名，僅供學(xué)術(shù)交流和作品呈現(xiàn)，不作任何商業(yè)用途。

原文地址：站酷

作者：賀冰凇

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》「福特汽車環(huán)保獎」升級LOGO，賀冰凇作品！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

01.圖標(biāo)是什么 

要做好圖標(biāo)，首先我們要知道圖標(biāo)是什么？在一般認(rèn)知里，圖標(biāo)可以定義為一種圖形化的符號或標(biāo)識，用于幫助我們理解某些復(fù)雜功能或操作，尤其在數(shù)字化領(lǐng)域里，可視化的圖形符號，更利于高效的展示信息和引導(dǎo)人機(jī)操作交互。也有人稱之為icon或eikan。

a

▍1.圖標(biāo)的發(fā)展史

圖標(biāo)的歷史可以上溯到人類文明發(fā)源伊始，最早的象形文字，巖洞壁畫等都可以算作圖標(biāo)的一種，為我們后代研究人類文明產(chǎn)生了珍貴的歷史意義。但今天我們研究的圖標(biāo)主要以計(jì)算機(jī)系統(tǒng)發(fā)明為分界線，看看這短短幾十年間，圖標(biāo)是如何演化的。

● 80年代的初期圖標(biāo)還是黑白單色

● 90年代慢慢多了些色彩，形狀也更豐富

● 到2000年后，隨著顯示技術(shù)的發(fā)展，圖標(biāo)也越來越形象

● 圖為iOS1-8圖標(biāo)變化

從最早的Xerox Sta系統(tǒng)到最新的Mac os10，再到現(xiàn)在人手一臺的移動智能機(jī)，每個階段都擁有其獨(dú)特的圖標(biāo)風(fēng)格，2010年已經(jīng)到了智能移動時代，拿最知名的iOS系統(tǒng)每個階段升級，圖標(biāo)的變化來看，也歷經(jīng)了初期的擬物-扁平-微質(zhì)感的好幾個階段。

圖標(biāo)作為UI必不可少的部分，能夠使界面更加精致，今天也分享給大家一些大公司的設(shè)計(jì)規(guī)范，其中包括很多系統(tǒng)的圖標(biāo)規(guī)范和定義，幫助大家更好地參考和學(xué)習(xí)。

w

02.  圖標(biāo)的分類 

圖標(biāo)因其良好的辨識性和無障礙溝通特性，在各種場景下被廣泛應(yīng)用，同樣，因使用場景的不同，圖標(biāo)所代表的意義也不一樣。

▍1.應(yīng)用圖標(biāo)

● iOS14桌面應(yīng)用圖標(biāo)

a

應(yīng)用圖標(biāo)指的是我們設(shè)備界面上的應(yīng)用入口，通常具有較強(qiáng)的品牌特性，可能與logo一致或與其核心功能一致， 如instagram 就是一個簡化的相機(jī)正視圖，亞馬遜則是一個購物車形象，國內(nèi)也有不少產(chǎn)品直接使用了能夠代表產(chǎn)品的文字，需要注意的是，界面圖標(biāo)必須遵循對應(yīng)系統(tǒng)下的尺寸規(guī)范。

● 華為EMUI 10應(yīng)用圖標(biāo)

d

▍2.功能圖標(biāo)

與應(yīng)用圖標(biāo)不同的是，它主要作為界面中的功能入口，一般為簡潔易辨識的符號，根據(jù)不同產(chǎn)品調(diào)性，圖標(biāo)風(fēng)格也可以多種多樣，并且不強(qiáng)制必須為標(biāo)準(zhǔn)形狀，異形圖標(biāo)能讓界面更為生動，整體風(fēng)格的發(fā)揮也有了更多空間。

d

▍3.輔助圖標(biāo)

輔助性圖標(biāo)通常存在于有較多長文字時，搭配作為輔助說明，在UI中，可能還具備一定情感化的作用，在提升用戶接收信息效率的同時安撫用戶情緒；所以整體可能需要具備更多細(xì)節(jié)，作為畫面補(bǔ)充的一部分。

● 如：缺省圖標(biāo)

s

▍4.與logo的區(qū)別

雖然這兩者特性極為相似，都是圖形化的符號，但logo是為整體品牌服務(wù)的，具備其獨(dú)一無二的專利特性，甚至可以是IP形象或文字；兩者的關(guān)系可以理解為父子。

● 圖中的圖標(biāo)就很好繼承了logo的特征和風(fēng)格

● 但有的也只是普通的界面輔助，風(fēng)格和樣式并不一致

a

03. 圖標(biāo)的繪制 

能夠繪制出高質(zhì)量的圖標(biāo)是每個UI設(shè)計(jì)師必備的能力，本次我們以功能圖標(biāo)為例，為大家展示具體的幾個繪制步驟和要點(diǎn)，希望幫大家在細(xì)節(jié)上避開影響圖 標(biāo)精致度的一些小細(xì)節(jié)。

d

▍第一步：建立圖標(biāo)網(wǎng)格

功能圖標(biāo)因形態(tài)結(jié)構(gòu)各異，難免存在尺寸不一的情況，必須考慮其整體視覺的協(xié)調(diào)一致，最好的辦法就是建立圖標(biāo)網(wǎng)格，也可以稱為圖標(biāo)盒子，當(dāng)圖標(biāo)形態(tài)分別為長、方、圓時，有一個合理的比例限制。

● 將常見圖標(biāo)形態(tài)約束在圖標(biāo)盒子內(nèi)

當(dāng)然，網(wǎng)格不是絕對的，要學(xué)會靈活運(yùn)用，當(dāng)與個別圖標(biāo)形態(tài)無法完美匹配時，也不必拘泥，一切以達(dá)到視覺和諧為首要。我通常會在圖標(biāo)網(wǎng)格外圍預(yù)留一個安全區(qū)域，可以規(guī)避切圖出現(xiàn)不完整的情況。

a

▍第二步：具象功能

有了網(wǎng)格，第二步則需要我們根據(jù)功能，找到與之對應(yīng)的實(shí)物形象；如筆記本是記錄，電話是通話，時鐘代表時間，日歷代表日期等等。

這些功能相對比較容易找到現(xiàn)實(shí)中的實(shí)物，如果是比較抽象的功能呢？就需要我們發(fā)散思維，找與之相近含義的事物。如隱私功能，隱私是沒有實(shí)物的，但是我們可以通過“隱私”這個詞延伸：不公開的、隱藏的、鎖起來的、被保護(hù)的，繼續(xù)根據(jù)這些詞延展：就可能是密碼、盾、鎖、遮眼等等。

時刻記住一點(diǎn)：用大眾都能理解的物體形象去表達(dá)。如果用戶看到某個圖標(biāo)過于復(fù)雜，需要反復(fù)思考它代表的含義，也無法預(yù)測點(diǎn)擊后的結(jié)果，那這個圖標(biāo)就失去了提效的作用。

d

▍第三步：簡化結(jié)構(gòu)

有了功能的具體形象，下一步就是思考如何讓圖標(biāo)變得更簡潔易辨識。

● 畢加索《公?！?/span>

畢加索創(chuàng)作《公?！窌r，從初稿到最終成品歷經(jīng)了11個版本，最后只用寥寥幾條線來勾勒，但我們依然能一眼認(rèn)出牛的形態(tài)。繪制圖標(biāo)也一樣，需要我們思考如何省略無用細(xì)節(jié)，化繁為簡，提取他們的主要特征。

f

▍第四步：善用布爾運(yùn)算

有了簡化的圖標(biāo)形象，我們接下去應(yīng)該思考如何讓圖標(biāo)變得更為規(guī)范耐看。

● 如桃心圖標(biāo)，就是兩個簡單圓角矩形組合而成

● 桃心圖標(biāo)，也可以做的更圓潤

● 不同組合下的布爾運(yùn)算，圖標(biāo)形態(tài)特征也會不一樣

這一步的訣竅就是盡可能使用基礎(chǔ)圖形去組合拼貼，這樣做出來的圖標(biāo)，尤其在適配不同尺寸大小切圖時不易拉伸變形。

f

▍第五步：處理細(xì)節(jié)

統(tǒng)一性

● 風(fēng)格：線性、面性統(tǒng)一

● 斷點(diǎn)細(xì)節(jié)一致：平角、圓角

● 圖標(biāo)氣質(zhì)一致：是圓潤還是尖銳硬朗

隨著功能界面的不斷復(fù)雜化，大家早已不滿足于同一產(chǎn)品或同個界面中單一的使用面性或線性圖標(biāo)，而是搭配使用便于層級劃分，故而這里只考慮在同一層級下圖標(biāo)的統(tǒng)一性。

視覺平衡

如圖，三角形置于中間位置時，視覺重量會偏向左邊，在這個基礎(chǔ)上，我們就需要做出適當(dāng)調(diào)整，以達(dá)到視覺重量平衡。

一致的視角

當(dāng)你想讓自己的圖標(biāo)變得更加出彩而采用了區(qū)別于正視圖的結(jié)構(gòu)，那也一定要確保至少在同等層級下，這些圖標(biāo)視角是一致的。

a

▍第六步：做出差異化

融入品牌DNA

● 韓國購物App 11 street，就很好的融合了品牌logo的箭頭符號

功能圖標(biāo)因簡潔通俗，比較容易出現(xiàn)市場同質(zhì)化嚴(yán)重的現(xiàn)象，故而很多App選擇在圖標(biāo)中融入品牌基因，不僅做出差異性，還能提升品牌調(diào)性。

跟隨趨勢創(chuàng)新

通過對圖標(biāo)風(fēng)格質(zhì)感的創(chuàng)新表達(dá)，讓人眼前一亮。這種方式更多需要你了解當(dāng)下的流行趨勢和技法，根據(jù)產(chǎn)品的風(fēng)格調(diào)性，對圖標(biāo)進(jìn)行量身打造。

圖標(biāo)微動效

隨著5G時代來臨，微動效也早就出現(xiàn)在了大眾視野，基于圖標(biāo)的微動效表達(dá)，能讓用戶更快注意到某個功能并去點(diǎn)擊它，如果你的動效還恰好有趣美觀，更能讓用戶感到愉悅。比較常見的loading和tab切換都讓我們有了很充足的發(fā)揮空間。

d

▍第七步：完善圖標(biāo)庫

通常一個產(chǎn)品的功能圖標(biāo)會多達(dá)幾十甚至幾百個，如何保證這些圖標(biāo)的統(tǒng)一性需要提前去規(guī)劃。繪制的最后一步，就是在完成一部分圖標(biāo)后，及時排列比對，確保整體視覺效果的統(tǒng)一；有條件的可以生成圖標(biāo)庫，便于后續(xù)的團(tuán)隊(duì)協(xié)作。

● Apple發(fā)布的SF Symbols中圖標(biāo)，就劃分了9種寬度和3個比例尺寸

有了圖標(biāo)庫后，協(xié)作設(shè)計(jì)師做到共用功能時可以直接調(diào)用；極大提高自己和團(tuán)隊(duì)的效率，并保持整體規(guī)范的一致。

a

04.最后 

圖標(biāo)繪制看似簡單，要做好卻并不容易；UI處處充滿細(xì)節(jié)，想要自己的界面更加精致，就不要忽略每一個可以提升的點(diǎn)。希望今天的這篇文章能夠幫到你。

最后給大家分享一些大公司的設(shè)計(jì)規(guī)范，其中包括很多系統(tǒng)的圖標(biāo)規(guī)范和定義，幫助大家更好地參考和學(xué)習(xí)，需要的話可以點(diǎn)個“在看”，添加叮當(dāng)貓回復(fù)“圖標(biāo)”領(lǐng)取，已有叮當(dāng)貓的無需重復(fù)添加。

s

作者：sky

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》研究了上百套圖標(biāo)，總監(jiān)卻告訴我圖標(biāo)要這樣畫！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

展開和收起屬于比較細(xì)節(jié)的問題，按照慣性思維，內(nèi)容多了我就折疊一部分，用戶需要看更多內(nèi)容就點(diǎn)擊「展開」，內(nèi)容展開之后，相應(yīng)的還應(yīng)該支持內(nèi)容的「收起」。

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

如果只是單純給出一個流程，顯然缺乏對產(chǎn)品邏輯和用戶體驗(yàn)上的思考?？赡芎芏嘣O(shè)計(jì)師之前沒怎么注意過這個地方的交互邏輯，或者深入思考需要注意的問題，這次借著答疑的機(jī)會咱們一起來深入探討下。

1、拋開展開和收起

雖然提出的問題是分析展開和收起的運(yùn)用場景，但是我覺得不應(yīng)該一上來就陷入到具體的細(xì)節(jié)里。

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

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

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

2、先場景后行為

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

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

這里的收起需要注意兩點(diǎn)：

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

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

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

3、展開然后收起

展開和收起屬于一組行為，看到展開我們必然會聯(lián)想到收起。展開是為了看到完整的內(nèi)容，收起則是內(nèi)容看完的標(biāo)志，點(diǎn)擊收起可以繼續(xù)下一個內(nèi)容。

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

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

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

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

4、展開后不收起

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

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

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

 

最后

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

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

 

原文地址：Clip設(shè)計(jì)夾（公眾號）

作者：Clippp

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》展開全文后需要支持收起嗎？從運(yùn)用場景分析交互邏輯

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

a

01.  蘋果iTunes主設(shè)計(jì)師Ryan Farina 

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

Twitter上的賬號也主要分享生活為主，很少去分享設(shè)計(jì)相關(guān)。個人作品博客也目前主要分享攝影作品為主。

Ryan Farina的作品集非常簡單，標(biāo)準(zhǔn)的蘋果風(fēng)，直接首頁封面放了幾個效果圖作為背景。

和很多設(shè)計(jì)師不一樣，項(xiàng)目介紹就是一個簡簡單單兩句話說清楚項(xiàng)目背景，如上圖就是介紹蘋果Testflight這款軟件是針對蘋果開發(fā)者發(fā)布測試的一款產(chǎn)品。

這是他之前負(fù)責(zé)Facebook個人頁面的作品設(shè)計(jì)，也是采用簡約的排版和布局。

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

在職期間主導(dǎo)的iTunes產(chǎn)品設(shè)計(jì)，這些作品集雖然有點(diǎn)老，但是設(shè)計(jì)師作品集的包裝上還是有很多值得我們學(xué)習(xí)的，沒有太多花里胡哨的東西，主要是在板式上凸顯設(shè)計(jì)功底。

所以從這個設(shè)計(jì)作品包裝中，我們其實(shí)可以學(xué)習(xí)到，今天一個作品集并不是一定要放很多套路化推導(dǎo)，好的作品你不需要說話，隨便看看設(shè)計(jì)細(xì)節(jié)都能被認(rèn)可。

a

02.  蘋果元老設(shè)計(jì)師Craig Dehner 

Craig Dehner是和Jony lve一個團(tuán)隊(duì)設(shè)計(jì)師，他們一起打造了蘋果iOS設(shè)計(jì)系統(tǒng)，現(xiàn)在在蘋果應(yīng)該11年了，他是在2009年以實(shí)習(xí)生身份加入蘋果的。你現(xiàn)在用的蘋果系統(tǒng)就是他參與的，并且是核心設(shè)計(jì)師。是Cincinnati大學(xué)畢業(yè)的。

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

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

他也參與了airbnb的設(shè)計(jì)，合作過很多知名項(xiàng)目，不知道是官方合作還是個人項(xiàng)目合作。

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

整個作品集的包裝遵循了蘋果一貫的簡約風(fēng)格，細(xì)節(jié)和動畫也處理的非常逼真。

同時他作品集還有l(wèi)yft打車應(yīng)用，這個應(yīng)用相當(dāng)于美國的滴滴。他主要和他們負(fù)責(zé)UI設(shè)計(jì)和動畫設(shè)計(jì)，以及最早的概念海報(bào)。

打車頁面設(shè)計(jì)，整個打車處理的動效非常逼真和真實(shí)，流程也非常順暢。

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

以及在iPad端的一些體驗(yàn)設(shè)計(jì)，一如既往的蘋果風(fēng)格和高級感。

他也是iOS9的主設(shè)計(jì)師，這里想分享一點(diǎn)，用模型機(jī)的技巧。很多設(shè)計(jì)師用樣機(jī)，但是完全看不到界面任何細(xì)節(jié)，樣機(jī)選擇一定要高質(zhì)量高清，能看清楚設(shè)計(jì)細(xì)節(jié)。

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

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

整體設(shè)計(jì)區(qū)別于其他的比特幣錢包，運(yùn)用黑色的設(shè)計(jì)，非常酷，同時頁面很多地方都體現(xiàn)出了安全感，讓用戶放心。

早期的蘋果TV引導(dǎo)頁面，以及蘋果系統(tǒng)登錄激活的頁面都是這位設(shè)計(jì)師做的，真的是蘋果元老級別的設(shè)計(jì)師。

整個的電視界面設(shè)計(jì)，一如既往簡約風(fēng)格。在AR空間里面做設(shè)計(jì)，體驗(yàn)上有手機(jī)上有很大的差別，但是設(shè)計(jì)師駕馭的非常的好，也很有創(chuàng)新。

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

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

s

03.  蘋果實(shí)習(xí)生Julia Liang 

蘋果設(shè)計(jì)團(tuán)隊(duì)人不多，每年也會招募一些非常優(yōu)秀有潛力的實(shí)習(xí)生，Julia Liang是美國UC Berkeley大學(xué)的一名女生，目前在蘋果實(shí)習(xí)，可能現(xiàn)在轉(zhuǎn)正了，我們一起來看看什么樣的水平能夠進(jìn)蘋果實(shí)習(xí)。

這是這位設(shè)計(jì)師大學(xué)期間設(shè)計(jì)的海報(bào)設(shè)計(jì)，是一個印刷海報(bào)，雖然很簡單，但是里面細(xì)節(jié)很豐富。

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

大學(xué)也經(jīng)常接一些私活項(xiàng)目，貌似還給中國一個律師網(wǎng)做過LOGO設(shè)計(jì)。

這是他平時的一些LOGO設(shè)計(jì)，紅十字會的一些公益設(shè)計(jì)。

在校期間的一些學(xué)校?；仗剿?，可以看出設(shè)計(jì)師雖然設(shè)計(jì)作品沒有那么商業(yè)，或者很強(qiáng)技法，但是在設(shè)計(jì)創(chuàng)意表達(dá)上還是有很多天賦。

另外一個APP設(shè)計(jì)，從作品集中看出應(yīng)該是全程參與其中，并且做了很多調(diào)研的工作。

是一位UX思維非常強(qiáng)的，作品集有大量設(shè)計(jì)分析和思考的過程。

一些落地方案的設(shè)計(jì)，在他這套作品集里面我看到了很多和我們國內(nèi)作品集不一樣的地方，設(shè)計(jì)師在發(fā)現(xiàn)問題解決問題思路上很閉環(huán)，并沒有很虛的套模塊。

a

04.  最后 

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

原文地址：我們的設(shè)計(jì)日記（公眾號）

作者：sky

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》國外 百萬美金作品集。長啥樣？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

1、SimilarWeb – 網(wǎng)站流量來源和排名

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

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

最關(guān)鍵的來了，最下面可以查看與該網(wǎng)站相似的網(wǎng)站，這條對設(shè)計(jì)師非常有幫助，很多設(shè)計(jì)師做網(wǎng)頁設(shè)計(jì)的時候不會找競品，這功能簡直是福音啊：

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

 

2、Nimbus 截幕 & 屏幕錄像機(jī)

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

 

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

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

你甚至可以直接搜索顏色，然后會出來很多設(shè)計(jì)作品。還可以搜索關(guān)鍵詞，比如你搜索dasboard

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

 

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

作者：terechen

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》關(guān)于設(shè)計(jì)的小插件，我只保留了這3個

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

 

#2.信封透明封面小冊

 

#3.高級感簡約iphone樣機(jī)

 

#4.3D手持樣機(jī)

 

#5.工卡名牌樣機(jī)

#6.iphone12樣機(jī)模型

#7.高級感紙張紋理樣機(jī)，可以使用在海報(bào)包裝上

#8.折疊小冊子模型

#9.簡約紙袋模型

#10.高級感褶皺樣機(jī)

#11.情緒版展示樣機(jī)

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

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》我翻遍全網(wǎng)，這11種高級感樣機(jī)建議下載

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

1. 場景化用詞

針對特定的場景，使用文案進(jìn)行情感的烘托、渲染或是放大，通常可以帶來意想不到的效果。

案例 1

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

案例 2

釘釘?shù)淖烂姘?，在用戶退出后重新登錄時，在產(chǎn)品的右半側(cè)會分不同時段展現(xiàn)不同的歡迎用語，下圖是早上和中午的歡迎頁。

案例 3

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

案例 4

很多產(chǎn)品對于某些功能的空狀態(tài)設(shè)計(jì)，都融入了個性化的語言描述，至少會讓頁面更有情趣：

2. 更精準(zhǔn)的描述信息

有些文案對于信息起到精準(zhǔn)的描述和呈現(xiàn)，雖不是必須要呈現(xiàn)的內(nèi)容，卻可以將文案作為加分項(xiàng)，而創(chuàng)造更優(yōu)的體驗(yàn)。

案例 1

支付寶頁面的“理財(cái)熱點(diǎn)”和“抗擊疫情”的數(shù)據(jù)，都顯示了實(shí)時更新的時間數(shù)據(jù)，讓信息給用戶的感覺變得更加可信和準(zhǔn)確。

案例 2

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

案例 3

美團(tuán)外賣在開通會員的卡片上很醒目的標(biāo)示出卡通會員后，可以為用戶節(jié)省的預(yù)估成本，以及限時的驚喜紅包提示，降低會員成本在用戶心里的預(yù)估價。

案例 4

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

3. 字體和排版設(shè)計(jì)

對于文案本身的字體選擇和排版設(shè)計(jì)，如果可以和文案的內(nèi)容或功能有效的結(jié)合，也可以對用戶體驗(yàn)起到提升作用。

案例 1

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

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

案例 2

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

案例 3

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

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

作者：元堯

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》案例錦囊｜如何巧用「文案設(shè)計(jì)」優(yōu)化用戶體驗(yàn)？

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)