鮮活的案例！向BeTheme學(xué)習(xí)設(shè)計(jì)制作炫酷的作品展示頁(yè)

作為一名UI/UX設(shè)計(jì)師，你一定想擁有一個(gè)足夠優(yōu)秀的作品展示頁(yè)來(lái)呈現(xiàn)你所有的作品。你的潛在客戶需要看到的不止是你能做到什么，還需要看到你是如何做設(shè)計(jì)，并且怎樣讓這些設(shè)計(jì)脫穎而出的。

雖然設(shè)計(jì)師宣傳自己的方式許許多多，但是一個(gè)能隨時(shí)訪問(wèn)的設(shè)計(jì)作品展示頁(yè)面始終是最直觀、效果最好的呈現(xiàn)方式。感覺(jué)上設(shè)計(jì)一個(gè)頁(yè)面似乎并不復(fù)雜，但是事實(shí)上并非如此。

隨著越來(lái)越多的設(shè)計(jì)師開(kāi)始將自己的作品集放到網(wǎng)站上，這類網(wǎng)站就開(kāi)始將不同的設(shè)計(jì)技巧、技術(shù)融入其中。今天我們?cè)賮?lái)審視作品展示頁(yè)的設(shè)計(jì)和開(kāi)發(fā)的時(shí)候，會(huì)發(fā)現(xiàn)已經(jīng)有許多技巧和技術(shù)可供我們參考和學(xué)習(xí)了。而今天，我們將從BeTheme 的設(shè)計(jì)中汲取經(jīng)驗(yàn)。

客觀上來(lái)講，要?jiǎng)?chuàng)建一個(gè)作品展示頁(yè)，需要考慮到三個(gè)主要角色：

·確保你的作品展示頁(yè)能夠展示出你的設(shè)計(jì)技巧
·讓客戶信任你，看到你的設(shè)計(jì)能夠迎合他們的需求
·展現(xiàn)你作為這一優(yōu)秀業(yè)務(wù)的提供者的優(yōu)勢(shì)

打造優(yōu)秀作品展示頁(yè)的必要步驟

選擇對(duì)的設(shè)計(jì)工具與素材當(dāng)然是一件重要的事情，不過(guò)有些必要的步驟應(yīng)當(dāng)始終牢記：

·審慎對(duì)待網(wǎng)站的標(biāo)題、文案和LOGO，它們直接影響著用戶打開(kāi)網(wǎng)站后的第一印象
·打造穩(wěn)固的作品集群，15~20個(gè)設(shè)計(jì)作品會(huì)帶來(lái)不錯(cuò)的效果
·將平庸的設(shè)計(jì)作品過(guò)濾掉
·合理的組織分類能更好的幫助用戶了解你的作品
·將你獲獎(jiǎng)的作品、得到的認(rèn)可都展示出來(lái)
·讓布局保持簡(jiǎn)約直觀
·針對(duì)關(guān)于我們頁(yè)面和行為召喚按鈕等進(jìn)行個(gè)性化設(shè)計(jì)

作品展示頁(yè)設(shè)計(jì)案例

作品展示頁(yè)應(yīng)當(dāng)精準(zhǔn)地反映產(chǎn)品和服務(wù)本身，同時(shí)應(yīng)該保持足夠的清爽和直觀，將令訪客分心的元素盡量去除。

著名的預(yù)構(gòu)建主題網(wǎng)站 Be Theme 就是清爽直觀這一特色的完美呈現(xiàn)。網(wǎng)站頁(yè)頭最明顯的位置留給了這一設(shè)計(jì)機(jī)構(gòu)的獨(dú)特價(jià)值主張（UVP），圖片的選取比較走心，菜單的設(shè)計(jì)巧妙，作品展示和服務(wù)區(qū)域完美的組織到了一起，體驗(yàn)也相當(dāng)不錯(cuò)。

Be Portfolio

無(wú)論你是網(wǎng)頁(yè)設(shè)計(jì)師、攝影師還是創(chuàng)意文案，又或者是營(yíng)銷人員，你的作品展示頁(yè)應(yīng)當(dāng)傳達(dá)出如下信息：

·展示整個(gè)設(shè)計(jì)歷程，而非單純的結(jié)果
·突出設(shè)計(jì)中的關(guān)鍵元素（假設(shè)你只有1分鐘來(lái)展示，那么你想表達(dá)哪些部分？）

Be Freelancer

整個(gè)頁(yè)面的設(shè)計(jì)無(wú)疑是在突出作品展示的部分，所以這個(gè)部分的設(shè)計(jì)應(yīng)當(dāng)非常小心，因?yàn)橛脩舨粫?huì)被其他的元素干擾，這個(gè)時(shí)候作品的任何一點(diǎn)瑕疵都會(huì)唉審視下被放大。

Be Parallax

這個(gè)作品展示頁(yè)明顯比前者更現(xiàn)代也更加流暢舒適。大量的留白讓視覺(jué)焦點(diǎn)集中，精致的作品展示則讓用戶留下了非常不錯(cuò)的第一印象。這樣的設(shè)計(jì)看起來(lái)簡(jiǎn)單了點(diǎn)，但是視差滾動(dòng)的使用讓頁(yè)面更加動(dòng)態(tài)，更容易講述歷程，比起單純的文本+圖片更具有表現(xiàn)力。

Be Web Design

如果你的團(tuán)隊(duì)專精于網(wǎng)頁(yè)設(shè)計(jì)，那么這個(gè)預(yù)構(gòu)建WP主題可以很好的迎合你的需求，它以更加創(chuàng)新的手法，構(gòu)建出充滿信任感的頁(yè)面風(fēng)格，布局穩(wěn)固，它給人的感覺(jué)也符合一個(gè)設(shè)計(jì)機(jī)構(gòu)應(yīng)有的印象。

Be App2

Be APP2 是一個(gè)能同移動(dòng)端應(yīng)用聯(lián)動(dòng)的主題。優(yōu)雅而簡(jiǎn)約的移動(dòng)端作品展示頁(yè)的體驗(yàn)是怎樣的？它就是答案。

Be Lifestyle

如果你的作品展示更偏向生活方式的話，Be Lifestyle 的展現(xiàn)形式會(huì)更適合于你的網(wǎng)站。經(jīng)歷、地點(diǎn)、人物等信息和內(nèi)容緊密結(jié)合到一起，信息的組織和展示是這個(gè)預(yù)構(gòu)建主題的特色。

BeMusic

音頻類的作品展示肯定和其他類型的略有不同，氛圍的營(yíng)造，不同媒體類型的展示形式，以及更加富有活力的色彩搭配，我們可以從BeMusic 這個(gè)頁(yè)面的設(shè)計(jì)中學(xué)習(xí)到。

Be Theme

實(shí)際上，今天所展示的幾個(gè)例子是設(shè)計(jì)機(jī)構(gòu) Be Theme 所提供的200多個(gè)預(yù)構(gòu)建網(wǎng)站主題中的一部分，他們的網(wǎng)站主題涵蓋了多個(gè)不同的領(lǐng)域，并且基本都是以作品展示為主。這些預(yù)構(gòu)建主題都是完全可定制的，所以，有足夠多的可能性從中選取符合你需求，或者說(shuō)足以定制成你想要的作品展示網(wǎng)站的樣子。

Be Carpenter

Be Charity

Be Sushi

Be Kebab

Be Perfume

Be Tea

Be Retouch

Be Mining

Be Print

Be Casino

Be HR

Be Holding

?

Be Accountant

結(jié)語(yǔ)

Be Theme 可能是目前最大的預(yù)構(gòu)建主題網(wǎng)站，它所提供的功能和模塊夠多，用戶群也同樣龐大。其中包含的模塊也相當(dāng)實(shí)用，比如 Muffin Builder 3 he Shortcode Generator 都讓網(wǎng)站的使用者無(wú)需代碼就可以方便快捷地編輯、調(diào)整整個(gè)網(wǎng)站的功能、風(fēng)格和細(xì)節(jié)。

即使你不打算使用這些預(yù)構(gòu)建主題，Be Theme 所提供的這些設(shè)計(jì)案例也足夠你學(xué)習(xí)和借鑒了。

【技多不壓身的設(shè)計(jì)師才有高薪資！】

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開(kāi)發(fā)：《天貓高手來(lái)教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開(kāi)發(fā)？》
5. 摳圖技巧：《從菜鳥(niǎo)到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識(shí)學(xué)起來(lái)！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門(mén)！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

原文地址：designmodo
原文作者：Adrian
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com