首頁

完美排版的10個基本功

藍(lán)藍(lán)設(shè)計的小編

 

1、多花些時間

挑選合適的字體需要花費(fèi)大量時間。但是不要一遍又一遍地讓自己陷入對同一類型的字體挑選中。因?yàn)槿藗兺?xí)慣于從自己熟悉的字體或者偏愛的字體開始。多花些時間去發(fā)現(xiàn)探索新的類型,這樣你才能慢慢地發(fā)現(xiàn)自己對一種字體的細(xì)微差別的敏銳度,真正地讓字體自己告訴你合適不合適。

 

2、不要使用過多的字體

如果你的一個頁面里有十種不同的字體,那么你的排版一定會很難看??刂谱约菏褂迷缴俚淖煮w,將會讓你的頁面脫穎而出。同時你也可以在字體的大小、重量和其它方面創(chuàng)造更多的對比變化。

Polaris UI Kit:精美的 UI 組件包和矢量圖標(biāo)(AI, PNG, PSD, SVG)

藍(lán)藍(lán)設(shè)計的小編

Smashing Magazine 發(fā)布了一個包含非常有用的 UI 組件和 48 個精美的矢量圖標(biāo)的素材包。界面組件包 Polaris UI Kit  里面包括編輯框,復(fù)選框,單選按鈕,頁面導(dǎo)航,菜單,按鈕等等,可以免費(fèi)用于任何項目。圖標(biāo)集合 Linecons 里面包含的 48 個可伸縮矢量圖標(biāo)都是 outline 風(fēng)格,提供了 AI, PNG, PSD, SVG 等多種格式。

.奧地利薩爾茨堡巧克力創(chuàng)意包裝設(shè)計

藍(lán)藍(lán)設(shè)計的小編

巧克力對于大家來說根本就不陌生,它作為一個產(chǎn)品,改變其狀態(tài),讓它享受從固體到熔化的過程。新的巧克力包裝采用重建的模式和角的形狀的靈感。折疊他們以不同的方式和紋理,因此,一個新的現(xiàn)代化的做法,維也納工坊的風(fēng)格。它的形狀是打破慣例的普通巧克力棒,但它仍然可以方便堆放在貨架上。

移動設(shè)備的轉(zhuǎn)場設(shè)計

藍(lán)藍(lán)設(shè)計的小編

移動設(shè)備的轉(zhuǎn)場設(shè)計

 

講到移動設(shè)備的轉(zhuǎn)場設(shè)計,我們先來看看移動設(shè)備。 移動設(shè)備有三個主要的特點(diǎn):

1. 屏幕小,相對于普通的PC來看移動設(shè)備的屏幕相對要小很多。

 

2. 使用環(huán)境多變,由于移動設(shè)備便攜的特點(diǎn)我們會在各種環(huán)境中使用。

3. 由于屏幕小一次展示的內(nèi)容少加上各種不穩(wěn)定操作環(huán)境,軟件上有簡單易學(xué)易于操作的特性

回到正題來看轉(zhuǎn)場 說到“轉(zhuǎn)場”一般都會想到電影和PPT里面的轉(zhuǎn)場,

下面來看轉(zhuǎn)場在這兩個領(lǐng)域的定位和作用

網(wǎng)頁設(shè)計中建立良好的視覺層級,好文!

藍(lán)藍(lán)設(shè)計的小編

 

隨著互聯(lián)網(wǎng)信息爆炸式增長,用戶瀏覽單個網(wǎng)頁時,并不像我們想象的如閱讀文章般從左到右、從上倒下逐一查看,為什么?

一、 視覺層級為什么重要

左側(cè)是設(shè)計師期望用戶的瀏覽方式,右側(cè)為用戶實(shí)際的瀏覽方式—摘自《Don’t make me think》

用戶來到一個網(wǎng)站有他自己特定的目標(biāo),如閱讀新聞、購物、查看新消息,然而信息量太大,逐一查看需要大量時間,這就要求網(wǎng)站能抓住主流用戶特征,將重點(diǎn)推送給他,用戶找到自己的目標(biāo)或感興趣的點(diǎn),才有可能繼續(xù)瀏覽或產(chǎn)生下一步動作,否則就會離開。

用戶時間有限加上互聯(lián)網(wǎng)信息量巨大,這兩項原因正是考驗(yàn)視覺設(shè)計師要建立良好的視覺層級呈現(xiàn)給用戶,幫助用戶快速找到目標(biāo)的功力。

總結(jié)一下,建立有效的視覺層級主要從以下四個方面著手:

1、簡約: 有選擇的展現(xiàn)信息,讓用戶在有限的信息中發(fā)現(xiàn)重點(diǎn)

2、組織: 預(yù)先對信息進(jìn)行科學(xué)的分類,整理好優(yōu)先級,可以得到更好的傳播效果

3、呈現(xiàn): 多種表現(xiàn)方法結(jié)合,呈現(xiàn)最好的視覺層級效果,這個點(diǎn)細(xì)化后有很多可挖,這里總結(jié)了幾個點(diǎn),歡迎繼續(xù)哈

4、引導(dǎo): 遵循用戶習(xí)慣,同時給予適當(dāng)?shù)囊龑?dǎo)推薦

怎樣的設(shè)計能給人留下深刻印象?

藍(lán)藍(lán)設(shè)計的小編

 怎樣的設(shè)計能給人留下深刻印象?

  名人效應(yīng) (借助名人或明星效應(yīng),產(chǎn)生不言而喻的說服力)

  每人內(nèi)心都有自己仰慕或效仿的對象,而且有一種想盡可能地向他靠近的心理欲求,從而獲得心理上的滿足。在選擇人物形象時必須要與產(chǎn)品的品格相吻合、使用戶快速理解產(chǎn)品傳遞的特點(diǎn)和價值,比如我們以往的設(shè)計作品中經(jīng)常會使用到馬云的形象,他在互聯(lián)網(wǎng)具有極高的話語權(quán),選擇用他的形象來推廣產(chǎn)品能產(chǎn)生不可言喻的說服力,當(dāng)然你不能濫用。

  時勢結(jié)合 (緊隨潮流,激發(fā)思想和感情上的共鳴)

  結(jié)合當(dāng)前社會事件如釣魚島、奧運(yùn)會、中秋節(jié)、中國好聲音等等,或當(dāng)下流行的語言詞匯如屌絲、高富帥、白富美等等,緊隨潮流的事物反應(yīng)當(dāng)下的社會形態(tài),潛移默化的感染到用戶的思想或感情,產(chǎn)生震撼和共鳴。下面的例子就是結(jié)合現(xiàn)在最流行最熱門的節(jié)目“中國好聲音”。

看看國外知名設(shè)計師的草稿和成品對比

藍(lán)藍(lán)設(shè)計的小編

大多數(shù)的設(shè)計師都習(xí)慣在紙上開始自己的工作,假如你也是設(shè)計師,想必手上也有一兩本筆記本,上面隨手記了一些漂亮的草稿吧。不管你的草稿有多草(糙),都是值得自豪的,為什么不亮出來給別人看看呢?

  別的設(shè)計師的草稿都是什么樣子的呢?

  Buzz Usborne, Campaign Monitor (活動監(jiān)測)

  先來看看 Buzz 的設(shè)計草稿

 

  草稿里的對角線和最終成品的對角錢相呼應(yīng),Buzz 的草稿并不強(qiáng)調(diào)細(xì)節(jié),而是注意線條和指引的清晰程度。

  Buzz 的成品

四兩撥千斤的網(wǎng)頁設(shè)計產(chǎn)品經(jīng)理工作小工具分享!

藍(lán)藍(lán)設(shè)計的小編

本篇的主題是分享一些四兩撥千斤的小工具。 沒有下面的軟件的同學(xué),一定會喜歡!已經(jīng)有的同學(xué),就可以飄走了!~

注意,所有小工具都是綠色的!綠色意味著你不用安裝,體積極小,拷貝一份即可使用。
為什么要推薦?這么多年來,這些工具一直陪伴我的工作,并且已經(jīng)私下里推薦給很多同學(xué),用過的人都叫好。

NO.1 截圖利器之FSCapture
  • 推薦理由: 綠色、輕量+強(qiáng)大截圖功能,裝機(jī)必備之利器
  • 應(yīng)用場景: 截圖??!做幫助文檔啊!插圖啊!太多了!比如下圖就是用此用具截圖并編輯的:

用戶體驗(yàn)設(shè)計答疑對話(半吊子和純外行)

藍(lán)藍(lán)設(shè)計的小編

[總結(jié)]:在用戶的視角來看,我們也希望他看到的都是最簡單最愉悅的一面。作為客戶培訓(xùn)師,你不需要知道產(chǎn)品數(shù)據(jù)在我們后臺是存儲在什么服務(wù)器的。用戶搜索產(chǎn)品時,也更加不需要了解一個檢索詞是經(jīng)過了多少詞解析判斷計算,跑了幾臺服務(wù)器,最終把結(jié)果呈現(xiàn)給他的。但是作為工作人員,我們得了解需要怎么做,才能夠把最簡單最愉悅的結(jié)果呈現(xiàn)出來。(Heidi注:如圖5所示)

P1030876

圖5:簡明網(wǎng)站產(chǎn)品建設(shè)流程圖

這個圖呈現(xiàn)的流程,依賴于多個部門的通力合作。從戰(zhàn)略層高瞻遠(yuǎn)矚的判斷、從產(chǎn)品經(jīng)理對于市場的分析以及功能、內(nèi)容的規(guī)劃、描述,到用戶體驗(yàn)團(tuán)隊,開發(fā)和測試團(tuán)隊的全力配合,而網(wǎng)站產(chǎn)生后,還要依賴于SEO、市場營銷、銷售和客服的工作。

成功的網(wǎng)站,一定是多個部門一起圍繞相同目標(biāo)運(yùn)作的結(jié)果,但是其中一個環(huán)節(jié)失敗,則可能會造成全盤皆輸。

本文雖然篇幅已經(jīng)很長,但是涉及到具體的流程、方法,都只能簡單帶過,希望大家要記住這是對話的場景,不要以偏概全哦。
你對他提出的問題,想如何回答呢?如果你有問題,質(zhì)疑,鼓勵……歡迎交流。

日歷

鏈接

個人資料

存檔