這次玩皮兔將為大家?guī)?lái)首次網(wǎng)頁(yè)設(shè)計(jì)類文章的翻譯~！
授權(quán)截圖：
在創(chuàng)意產(chǎn)業(yè)中，我們很容易就能從趨勢(shì)中獲利，畢竟關(guān)注熱點(diǎn)并不需要?jiǎng)?chuàng)意或是創(chuàng)新——除非你是為了不斷地改變趨勢(shì)。但創(chuàng)意是一種對(duì)話。
自從我們第一次學(xué)會(huì)用木炭在洞穴壁上的赭石記錄世界的片段以來(lái)，這種對(duì)話就一直在進(jìn)行。我們還學(xué)會(huì)了把僅僅是用棍子刻在粘土上的抽象符號(hào)，變成了承載著充分含義的載體——語(yǔ)言。
趨勢(shì)僅僅只是龐雜而混亂的多方談話中的主音，無(wú)論是否應(yīng)用趨勢(shì)，我們的創(chuàng)造都與這些趨勢(shì)并存。
趨勢(shì)為我們提供了大背景，畢竟如果沒有規(guī)范，又何從定義創(chuàng)新？如果沒有去年的熱點(diǎn)潮流，又從哪里尋找規(guī)范？
所以和去年一樣，我和webflow優(yōu)秀的設(shè)計(jì)團(tuán)隊(duì)一起，預(yù)測(cè)了2018年的設(shè)計(jì)趨勢(shì)。以下來(lái)自Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff，以及我。
1.破碎的網(wǎng)格布局
設(shè)計(jì)師總是無(wú)盡地去追求更具創(chuàng)意、更引人入勝的布局，但在這個(gè)過程中網(wǎng)格布局一直廣受運(yùn)用，網(wǎng)格布局能帶來(lái)和諧和規(guī)范的感覺，但網(wǎng)格本身就存在約束。
有時(shí)候我們自己都想逃離網(wǎng)格的規(guī)范性，對(duì)吧！
但這并不意味著破碎的網(wǎng)格布局完全忽略了網(wǎng)格的概念，相反，破碎格局允許圖像和文本元素更自由地出現(xiàn)，而在更規(guī)范的布局中，元素的排布往往需要按部就班。在這里，圖像和文字的位置開始重疊和匯合，位圖和字體的并置往往都會(huì)出現(xiàn)美麗的意外。
有時(shí)候很難說(shuō)這些效果是故意的，還是只是一個(gè)美麗的錯(cuò)誤…
2.將插圖放在中心位置
我在數(shù)字產(chǎn)品營(yíng)銷領(lǐng)域所看到的一個(gè)比較有趣的挑戰(zhàn)就是選擇合適的圖像。我看到過整個(gè)設(shè)計(jì)團(tuán)隊(duì)針對(duì)這一議題進(jìn)行討論，并且通常結(jié)束于兩點(diǎn)之一：
1.產(chǎn)品UI（用戶界面）截圖及動(dòng)圖
2.設(shè)計(jì)過的或是生活化的攝影
前者強(qiáng)調(diào)產(chǎn)品本身的體驗(yàn)、特征及功能，而后者則試圖強(qiáng)調(diào)產(chǎn)品的人性層面：它對(duì)生活的影響。
進(jìn)入2018年后，我們可以看到并將繼續(xù)看到，在產(chǎn)品的設(shè)計(jì)和營(yíng)銷方面，插畫師的工作越來(lái)越受重視。
我對(duì)這件事不知所以的著迷，甚至于我都不能確定它到底是什么。也許這和我們?cè)跁r(shí)尚界所看到周期性相同，畢竟插畫在整個(gè)60年代后期一直占據(jù)著廣告界的主導(dǎo)地位。
或者，Dropbox的設(shè)計(jì)團(tuán)隊(duì)可以通過解釋他們的新插畫風(fēng)格來(lái)解決問題：
我們用鉛筆構(gòu)建草圖，然后用豐富多彩、抽象的形狀來(lái)填充，將創(chuàng)意變?yōu)楝F(xiàn)實(shí)。我們的風(fēng)格的靈感來(lái)源于你第一次有想法的瞬間，這種風(fēng)格也在提醒我們，除非你有所行動(dòng)，否則畫布上只有空白。
我想，這就是說(shuō)，他們必須重新設(shè)計(jì)一些東西，對(duì)吧？
在Shopify的Polaris網(wǎng)站中可以看到，插圖可以將很多抽象的概念具體化于生活中。僅僅只是一張畫作，Shopify就闡述了Polaris的概念—就像北極星一樣，為團(tuán)隊(duì)中的每一位成員指明方向。
最后，值得注意的是，插圖也可以巧妙地解決攝影帶來(lái)的一些具有代表性的問題。
我們?yōu)榇蟊娞峁?shù)字產(chǎn)品，但當(dāng)我們將一張真人攝影作品放在網(wǎng)站上的顯著位置時(shí)，圖片中的真人主角就定義了你的用戶，但這樣就遺漏了其他沒有被定義的用戶。
相比之下，Shopify Polaris的插畫主角形象僅僅只是個(gè)人類，并不能確定諸如種族、性別、國(guó)際等屬性，這使得我們更容易地將自己代入這樣的場(chǎng)景中，就像我們自己就是一個(gè)獨(dú)立地思考者，思考這北極星所照亮的創(chuàng)造的可能性。
3.野蠻主義達(dá)到主流地位
2017年初，我們發(fā)表了一篇文章，談及野蠻主義的興起，并試圖回答出現(xiàn)新興風(fēng)格的原因：
野蠻主義……正在開啟一個(gè)設(shè)計(jì)師想做什么就可以做的空間，這甚至超出了應(yīng)該做什么的范疇。野蠻主義的作品往往避開了所有的最佳建議和最好實(shí)踐列表上的東西，以支持震撼的外觀和效果，有時(shí)甚至帶有一些攻擊性。
所以你可以想象，當(dāng)這兩個(gè)電子商務(wù)網(wǎng)站都坐上這股粗獷潮流的列車時(shí)，我們有多驚訝。
Balenciaga
Gucci
4.更多有機(jī)和傾斜的形狀
大自然厭惡直線。——William Kent
近幾年來(lái)，無(wú)論是網(wǎng)頁(yè)端還是移動(dòng)端的設(shè)計(jì)都是由卡片式的用戶界面占據(jù)主導(dǎo)地位。直到現(xiàn)在，這些卡片幾乎都是銳邊、直角的，可以看出其最基礎(chǔ)的幾何形狀，使得大家去關(guān)注網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)材料。
這在2017年有了很大的改變，現(xiàn)在，從谷歌到推特再到臉書，幾乎每一個(gè)應(yīng)用的卡片都應(yīng)用了圓角，比如輸入框、頭像框等。
如果這些框都是圓角的，他們就會(huì)是橢圓形的。
但這并不是有機(jī)形狀的主要組成元素?，F(xiàn)在的背景設(shè)計(jì)往往有很多顏色各異的變形斑點(diǎn)，略夸張的對(duì)角線，即使是我們平時(shí)所用的破折號(hào)也會(huì)被卡通化。
但在無(wú)盡的探索中，設(shè)計(jì)師總不能僅僅只是運(yùn)用靈活的曲線，很多人都會(huì)把卡片旋轉(zhuǎn)一些角度，運(yùn)用角度來(lái)進(jìn)行設(shè)計(jì)，就像Stripe的主頁(yè)一樣。
但這并不意味著直角將會(huì)在設(shè)計(jì)中消失。在下圖中，我們可以看到直線和直角的運(yùn)用，不過是把它們與更多的曲線、球形有機(jī)地結(jié)合在了一起。
在許多網(wǎng)站，我們都能看到閃爍或是振動(dòng)的顏色。雖然這些顏色的組合能夠讓人留下深刻的印象—包括在眼睛中留下殘影—不過值得注意的是，在可訪問性的層面上，顏色組合的使用可能會(huì)出現(xiàn)一些問題。
通常我們都將可訪問性作為為殘障人士所做的用戶友好行為，但不要忘記，即使是不存在色覺障礙的人也可能會(huì)遇到令人眼花繚亂的色彩組合。
不開玩笑，當(dāng)這些形狀滾動(dòng)起來(lái)，你就會(huì)看到你的屏幕上全是這些東西了。
根據(jù)LinkedIn的無(wú)障礙工程經(jīng)理Jennison Asuncion的說(shuō)法，可訪問性可以定義為：
設(shè)計(jì)和開發(fā)包括殘疾人在內(nèi)的每個(gè)人都可以獨(dú)立使用和互動(dòng)的用戶界面。
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
