小處顯逼格:細(xì)節(jié)提升氣質(zhì)
隨著移動端扁平化設(shè)計(jì)推進(jìn),越來越多的設(shè)計(jì)師不滿足于僅僅是色塊、圖標(biāo)和系統(tǒng)字體的枯燥組合,而把更多的心思投入到精益求精的視覺設(shè)計(jì)中。從平面設(shè)計(jì)引申過來的技巧在這時(shí)起到了畫龍點(diǎn)睛的作用:一些細(xì)節(jié)上的處理,為移動產(chǎn)品的界面大大地提升了品牌逼格。
例如以設(shè)計(jì)精美著稱的Yahoo的兩款明星App產(chǎn)品Yahoo Weather!和Yahoo Digest。除了在產(chǎn)品設(shè)計(jì)上的極致和突出表現(xiàn)外,模糊和斜切的手法,給整個產(chǎn)品的品牌氣質(zhì)提升到了一個新的高度。 Yahoo Weather! 不論是在布局、字體和色彩的運(yùn)用上都顯得精致細(xì)膩,滑動時(shí)高斯模糊的處理更是流暢平滑。Yahoo Digest 的斜切突出一個“破”,在不影響照片內(nèi)容的前提下,既能在視覺上顯得與眾不同,又在排版上巧妙地為色彩標(biāo)簽留了一角之地。比起一刀平,更顯靈動而不失平衡感。
國外的優(yōu)秀案例我們已經(jīng)看過很多,然而中文Apps在視覺設(shè)計(jì)上,往往與西文Apps無法相提并論。由于各種原因—例如字體的硬傷等,即使依樣畫葫蘆也比原作遜色不少,這樣的無奈給中文Apps設(shè)計(jì)師們徒增不少煩惱。但江山代有人才出,且讓我們也關(guān)注一下身邊,總結(jié)下近年一些新秀中文Apps如何通過細(xì)節(jié)設(shè)計(jì),提升產(chǎn)品逼格。
選用符合產(chǎn)品氣質(zhì)的字體
字體是設(shè)計(jì)師的重要武器之一,恰當(dāng)?shù)淖煮w運(yùn)用,可以使產(chǎn)品的定位和內(nèi)容的情感有加倍的表達(dá)。關(guān)于字體選擇和字體與產(chǎn)品氣質(zhì)可以參考另外兩篇文章,在此就不多說了。(【英文字體選擇 】 / 【 字體與產(chǎn)品氣質(zhì) 】)然則讓許多設(shè)計(jì)師困擾的一件事情是,不管是哪個平臺,移動系統(tǒng)自帶的中!文!字!體!實(shí)在是太少了,而且并沒有什么特色。內(nèi)嵌字體,成為了一些追求完美的App設(shè)計(jì)師的一個解決方案。
作為一個「交流故事,溝通想法」的的寫作平臺App,簡書為了優(yōu)化閱讀體驗(yàn),選擇了思源黑體作為內(nèi)嵌字體,使用戶發(fā)布的不管是簡體中文、繁體中文、還是日文韓文,都能有比較理想的表現(xiàn)。食色的產(chǎn)品概念是和「生活家」們一起,發(fā)現(xiàn)與分享城市中的美食,所以選擇了細(xì)膩精致的方正蘭亭纖黑作為主要的界面字體。用戶第一次使用,就能感受它與其他產(chǎn)品在氣質(zhì)上的不同。
除了內(nèi)嵌簡潔親和的非襯線體之外,諸如像Lohas樂活這樣小清新和強(qiáng)調(diào)自然生活感的產(chǎn)品,則會選用了田氏宋體舊字形或者方正蘭亭刊宋之類的,既能體現(xiàn)古韻,又相當(dāng)簡練質(zhì)感的襯線字體來表達(dá)產(chǎn)品定位和氣質(zhì)。
巧用平面設(shè)計(jì)的排版技巧
俗話說,越是家常的菜式越是考驗(yàn)大廚的功力,譬如番茄炒蛋。越是簡單的元素越是考驗(yàn)設(shè)計(jì)師,譬如白底黑字,或是黑底白字。而黑白配的美,我們可以從大師原研哉的作品中深切地體會到。白面之上,黑字是字也是裝飾,是點(diǎn)也是線。通過調(diào)整體積和間隔,錯落地形成畫面,構(gòu)造韻律。
IDEAT理想家App,繼承了法國IDEAT雜志的理念,以展示設(shè)計(jì)、藝術(shù)和風(fēng)尚的「當(dāng)代生活」內(nèi)容為主。App界面上除了內(nèi)容圖片之外,幾乎沒有黑白以外的其他色彩元素。通過襯以黑底的高亮白字,既是內(nèi)容又是裝飾,貫穿在整個App設(shè)計(jì)元素當(dāng)中;調(diào)節(jié)這些文字與其他內(nèi)容之間的間距,又在排版上起到作為點(diǎn),作為線,甚至作為面的不同功用。
當(dāng)然,如果不是內(nèi)容為主的App,沒有太多的排版需求的話,不妨可以像iFashion,或者又是飯本出品的精選限量美食App—ENJOY—這樣,通過直接了當(dāng)?shù)暮诰€分割,也是不失干脆利落。
水印式裝飾為圖片加分
水印相機(jī)的成功告訴我們,用戶也很喜歡用水印來提升自己圖片的逼格,而像在Over這樣專注于照片裝飾的App里,文字水印更是能賣出個好價(jià)錢。
運(yùn)用在產(chǎn)品界面上,水印式的題圖也會給人眼前一亮的驚喜?!竁OW!」在一款高質(zhì)量畫報(bào)的分享App—Big里,Big報(bào)的每一個題圖都經(jīng)過有針對性的水印式文字排版,力求讓用戶看到更大的世界,發(fā)現(xiàn)更多有「逼格」的內(nèi)容。排版上雖然只有文字和小量裝飾,字體和色彩的整體感都比較強(qiáng),統(tǒng)一和諧顯得十分大氣。
更吸引眼球的海報(bào)式的圖文分享
除了產(chǎn)品本身,分享方式是讓更多的不認(rèn)識的用戶了解產(chǎn)品的一個途徑。如果只是一段文字配個圖是不是覺得已經(jīng)有點(diǎn)過時(shí)?海報(bào)風(fēng)格的圖片分享,是在信息爆炸時(shí)代抓住路人眼球的一個好方法,自然也需要更多的設(shè)計(jì)技巧。知道每日故宮App的人,敢情十有八九都不會是因?yàn)樗拿只蛘呷魏螐V告,而是因?yàn)樗赖姆窒砗?bào)。素雅而有質(zhì)感的底圖,配合古色古香的字體,讓人驚艷的不是它反映故宮的歷史感,而是透出來的一股洗練的現(xiàn)代氣息。每日故宮傳達(dá)給用戶的不是一個「當(dāng)年故宮」,而是「今日故宮」。
此外,對于用戶自己生產(chǎn)內(nèi)容的App來說,把用戶的圖片和文字內(nèi)容合成在一個排版好的模版里面,再分享出去,也是一個能展現(xiàn)設(shè)計(jì)水平的方式。天天P圖的海報(bào)拼圖,就是一個功能化后的海報(bào)式分享。用戶將自己拍攝的照片,添加到設(shè)計(jì)好的海報(bào)模版中,可以修改相應(yīng)的主題和文案,程序還能自動識別照片時(shí)間、拍攝地點(diǎn),只要簡單的操作就能組合出一張屬于自己的海報(bào)。通過海報(bào)拼圖分享出去的照片,是不僅是通過設(shè)計(jì)師設(shè)計(jì)的模版來提升用戶照片逼格的成果,也是用戶氣質(zhì)與產(chǎn)品氣質(zhì)交織后的成果。
跟其他相似的海報(bào)式分享起來,專注于好友間美食推薦與分享的App夜夜,還加入了一個小心思:通過百度翻譯API,將用戶輸入的文字,轉(zhuǎn)換成繁體中文、日文、韓文以及文言文,并配用內(nèi)嵌的字體—如文悅古體仿宋—展示,分享出來的圖片又別有一番風(fēng)味。
動起來的界面更有震撼力
似乎傳統(tǒng)設(shè)計(jì)(好吧,雖然我并不喜歡這種稱呼方式)近年來風(fēng)頭被界面設(shè)計(jì),尤其是移動設(shè)計(jì)大大地蓋過,但如文章開頭所說,設(shè)計(jì)潮流也是不斷的螺旋式發(fā)展變化中。對于設(shè)計(jì)師來說,為什么而設(shè)計(jì)才是最重要的,工具和方法皆是需要貫通的。除了緊跟時(shí)代前沿的科技和設(shè)計(jì)趨勢之外,回顧經(jīng)典和審視生活,修煉細(xì)節(jié),也是提煉設(shè)計(jì)概念的重要方法之一。 當(dāng)然,除了平面設(shè)計(jì)的元素之外,精心策劃的視頻式啟動頁(并不是動畫!)也為產(chǎn)品逼格增色不少,看到ENJOY啟動頁,以及全民K歌的啟動頁的時(shí)候,你是否也有被感動到呢?(點(diǎn)擊播放)
綜上所述
逼格怎么體現(xiàn)?就是化繁為簡,以小見大。要做出效果,除了有技巧,還要有「心」。用心從細(xì)節(jié)上營造產(chǎn)品氣質(zhì),給用戶帶來愉悅感,為品牌獲得認(rèn)同感,形成一股獨(dú)有的產(chǎn)品氣場,又有誰能說就不是一種逼格呢?秉承這樣的一種想法,我們的產(chǎn)品天天P圖自誕生日起,每一個版本都在努力地朝著營造自己的逼格的方向蛻變,未來也會貫徹精益求精的本心,帶給用戶更多的驚喜。
如果你也在做一款或者致力于做一款有逼格的App,歡迎來跟我們交流哦~
本文地址:http://m.likemindfilms.com/tutorial/wd2835.html