現(xiàn)當(dāng)代最著名的無襯線體Helvetica，想必大家都已經(jīng)耳熟能詳了吧？作為現(xiàn)代無襯線體的佼佼者，Helvetica的故事已經(jīng)出了幾本書，足以拍成電影了。遠(yuǎn)的不說，iOS 7默認(rèn)的英文字體，便是基于Helvetica所開發(fā)的Neue Helvetica，雖然早在1983年就已問世，但是在今天的UI界面上依然顯得如此有性格，不是嘛？當(dāng)然，對(duì)于慣于使用英文字體的設(shè)計(jì)師而言，Helvetica多少有點(diǎn)膩味。但是，Helvetica的世界真的就這么單調(diào)么？不，當(dāng)然不是，作為最基本的字體，想象力與創(chuàng)意加持其上之后，Helvetica 的張力足以令你側(cè)目。

網(wǎng)頁設(shè)計(jì)領(lǐng)域的業(yè)界良心Awwwards除了每天推薦好網(wǎng)站，定期做評(píng)比之外，還會(huì)在博客里面推薦各種網(wǎng)頁設(shè)計(jì)的技巧和總結(jié)，今天的這篇文章最初是源于一個(gè)探索性的項(xiàng)目，項(xiàng)目結(jié)果炫酷然而乍一看并沒有什么卵用，不過，如果將這個(gè)項(xiàng)目同最近選出的20個(gè)配色優(yōu)秀的網(wǎng)站相互印證，足以看出時(shí)下配色的大趨勢(shì)。當(dāng)然，好人做到底，作者干脆把時(shí)下流行的基于Material Design 的配色工具連同常用而經(jīng)典的配色工具一同推薦給你，這也構(gòu)成了今天文章的三大部分。OK，正文開始~

編者按：絕對(duì)值得收藏！響應(yīng)式網(wǎng)站是大勢(shì)所趨，今天這組模板，可以非常方便地展示你的網(wǎng)站作品，全都附有筆記本、臺(tái)式機(jī)、平板和手機(jī)的模板，建議馬克下，以后一定會(huì)用到的 >>>

完善的公司會(huì)把項(xiàng)目相關(guān)人員聚集起來，產(chǎn)品經(jīng)理會(huì)把產(chǎn)品詳細(xì)的用原型展示出來，包括產(chǎn)品定位，市場(chǎng)需求，主打賣點(diǎn)，產(chǎn)品性質(zhì)以及各模塊具體功能，邏輯跳轉(zhuǎn)演示一下；之后會(huì)評(píng)估項(xiàng)目用時(shí)，各部門協(xié)調(diào)，項(xiàng)目啟動(dòng)。

話不多說，接到原型，那我們應(yīng)該做什么準(zhǔn)備工作呢？

如果你是一個(gè)APP狂熱分子，你會(huì)花大量的時(shí)間在各種APP的嘗鮮中，你會(huì)明顯感受到一些APP在采用著某種風(fēng)格鮮明的設(shè)計(jì)語言，來標(biāo)榜自己的獨(dú)特之處，行成自己的設(shè)計(jì)風(fēng)格，甚至引領(lǐng)設(shè)計(jì)風(fēng)向。去年我們關(guān)注到隨著Metro設(shè)計(jì)風(fēng)格的影響和iOS7的發(fā)布，APP明顯都開始嘗試扁平化的設(shè)計(jì)語言了，除此之外，還有哪些顯性化的設(shè)計(jì)語言嶄露頭角呢？

黑白灰的經(jīng)典配色是永恒不變的教父級(jí)色彩，也是含蓄內(nèi)秀的典范。今天@飛屋睿UIdesign挑選了13個(gè)優(yōu)雅的黑白灰配色網(wǎng)站，同學(xué)們也可以拿來作為網(wǎng)頁設(shè)計(jì)時(shí)色系風(fēng)格的參考 >>>

@飛屋睿UIdesign ：在經(jīng)典配色中，可能每個(gè)人都不會(huì)否認(rèn)黑白灰的永恒魅力。雖然人們總是想“outstanding”，眼球搶奪，注意吸引……但想要把用戶永遠(yuǎn)留住，除了第一印象，更多需要日后方方面面的細(xì)節(jié)。況且在我們的身邊已經(jīng)太多色彩大爆炸了，我們顏色識(shí)別系統(tǒng)也許到了某一峰值，總也想要有停下運(yùn)轉(zhuǎn)的時(shí)刻。這時(shí)，黑白灰的配色就從一大堆顏色中尤為突出，甚至能讓人心恢復(fù)平靜，這也是這兩年開始盛行極簡(jiǎn)風(fēng)格的原因。

編者按：福爾摩斯說猜是不好的習(xí)慣，視覺設(shè)計(jì)的同學(xué)們平時(shí)習(xí)慣了讓感性帶動(dòng)設(shè)計(jì)，可能還沒看過今天這類設(shè)計(jì)文。這篇由@百度MUX 集結(jié)整個(gè)團(tuán)隊(duì)，歷時(shí)3個(gè)季度總結(jié)的2015年趨勢(shì)預(yù)測(cè)，行文科學(xué)嚴(yán)謹(jǐn)，有理有序，對(duì)加深對(duì)界面設(shè)計(jì)的理解非常有幫助 >>>

【今年人氣最高的資源+教程，同學(xué)你不看一眼么？】 >>> 《年度頒獎(jiǎng)盛典！2014年的設(shè)計(jì)資源大盤點(diǎn)》

視覺設(shè)計(jì)是一門隨著時(shí)代發(fā)展與社會(huì)變遷，隨著人類認(rèn)知提升與生活環(huán)境變化，而不斷進(jìn)化的專業(yè)學(xué)科，無論是從小眾喜好走上大眾審美，還是從零星的創(chuàng)意苗頭轉(zhuǎn)為流行趨勢(shì)，它都代表了一個(gè)時(shí)期人們審美取向與內(nèi)心述求。與此同時(shí)伴隨著城市生活節(jié)奏加快、人們生活方式日新月異，如今的優(yōu)秀設(shè)計(jì)不僅要具備產(chǎn)品使用的功能性，更要符合未來人群的生活方式和潛在審美需求。而作為設(shè)計(jì)師需要具備敏銳的洞察力與捕捉趨勢(shì)的能力，充分消化和理解潮流設(shè)計(jì)元素，不斷汲取其中的精華養(yǎng)分，歷練實(shí)踐轉(zhuǎn)化與效果表達(dá)的掌控力，才能具備更加開闊的視野、獨(dú)到的品味和充滿靈性的設(shè)計(jì)感覺。

用戶體驗(yàn)設(shè)計(jì)的精髓，在于恰到好處的設(shè)計(jì)出最合適的用戶場(chǎng)景體驗(yàn)，而這種體驗(yàn)是不知不覺給予用戶同時(shí)能讓用戶在觸點(diǎn)的那個(gè)瞬間怦然心動(dòng)，那如何讓用戶心動(dòng)呢？阿里同學(xué)專門組建了一個(gè)團(tuán)隊(duì)來研究這方面，現(xiàn)在初步方法有了，來學(xué) >>>

古人云：“動(dòng)人心者，莫先乎情。”，同樣的我們從約翰.奈斯比特的語言中窺見：”無論何處都需要高補(bǔ)償?shù)那楦校鐣?huì)中高技術(shù)的越多，我們就越渴望高情感的環(huán)境，用設(shè)計(jì)軟性的一面來平衡技術(shù)硬的一面。設(shè)計(jì)作為人的創(chuàng)造性活動(dòng)，不是摒除激情或者情感，而是要?jiǎng)?chuàng)造一種中性的、能容納和激起使用者情感的東西，這種東西是一種境界。”

在這篇教程中，我們將看看如何使用一個(gè)免費(fèi)的Web應(yīng)用程序IcoMoon將矢量圖轉(zhuǎn)換成Web字體。然后在看看如何使用生成的字體通過css應(yīng)用到Web頁面中。

使用字體圖標(biāo)的優(yōu)勢(shì)

字體圖標(biāo)除了圖像清晰度之外，比位圖還有哪些優(yōu)勢(shì)呢。

適用性：一個(gè)圖標(biāo)字體比一系列的圖像（特別是在Retina屏中使用雙倍大小的圖像）要小。一旦圖標(biāo)字體加載了，你的圖標(biāo)就會(huì)馬上渲染出來，不需要下載一個(gè)圖像。

可擴(kuò)展性：圖標(biāo)字體可以用過font-size屬性設(shè)置其任何大小。這使您能夠隨時(shí)輸出不同大小的圖標(biāo)，然而，使用位圖，你必須得為每個(gè)不同大小的圖像輸出一個(gè)不同文件。

多數(shù)時(shí)候，我們?cè)?a href="http://m.hengshangtqd.cn/web.html" target="_blank">網(wǎng)頁中看到的地圖，都是用百度/谷歌地圖來顯示公司、機(jī)構(gòu)或者店鋪的地理位置。然而，地圖在網(wǎng)頁中的使用真的就只能這么單調(diào)么？

加入一點(diǎn)想象力，添加一些技術(shù)支持，你會(huì)發(fā)現(xiàn)地圖可以讓整個(gè)網(wǎng)頁的逼格拔高不止一個(gè)層次！

將原始的、額外加入的地圖元素轉(zhuǎn)化成極具吸引力和視覺沖擊力的組成部分，需要進(jìn)行相當(dāng)程度的調(diào)整，加入和互動(dòng)元素：微妙的動(dòng)效、基于多媒體的工具、動(dòng)態(tài)指針、扁平化的風(fēng)格、Lowpoly風(fēng)的插畫、現(xiàn)代風(fēng)的線條圖標(biāo)，甚至是略顯古怪的草圖也能讓地圖煥發(fā)出生命力。