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