很多設(shè)計(jì)師都對(duì)信息可視化、設(shè)計(jì)信息圖非常感興趣，在平時(shí)的作品中合理地加入一些可視化的元素，能瞬間提升設(shè)計(jì)質(zhì)感和強(qiáng)化主題，這里我想給大家扯扯信息圖設(shè)計(jì)的一些事，歡迎大家拍磚！

—————————————————————- 信息圖概要 —————————————————————-

什么是信息圖？

提及信息圖，不可避免要先講下時(shí)下熱門(mén)的議題：信息可視化(Information Visualization)。大家從字面上以及平時(shí)工作學(xué)習(xí)中應(yīng)該或多或少有了解，可以將它大致理解為：將復(fù)雜的信息通過(guò)圖形樣式清晰明了的傳達(dá)給讀者。信息可視化是一個(gè)跨學(xué)科的領(lǐng)域，其詳細(xì)深入的定義這里不做研討，本文主要針對(duì)其圖形化的產(chǎn)物信息圖進(jìn)行介紹。

可視化并不是什么全新的概念，生活中很多信息可視化例子：公共指示、統(tǒng)計(jì)圖、星級(jí)評(píng)分、五線(xiàn)譜…

企業(yè)VI的特點(diǎn)是需要通過(guò)各式各樣的介質(zhì)傳播出去，不僅是顯示屏，還有名片、包裝袋、光碟、書(shū)籍等等。對(duì)設(shè)計(jì)師來(lái)說(shuō)，這意味著你的設(shè)計(jì)必須足夠簡(jiǎn)單而又有亮點(diǎn)，易于辨認(rèn)。

Unionservice Design

The color wheel is a tool for understanding color and color relationships.

色環(huán)是一種幫助我們理解色彩和色彩關(guān)系的工具。

The most common color wheel is the twelve (12) hue wheel. A color wheel could have as few as six hues or as many as 24, 48, 96 or more.

最常見(jiàn)的色環(huán)是 12 色環(huán)。通常一個(gè)色環(huán)包含至少 6 種、多到 24、48、96 或更多種顏色。

• Yellow
• Yellow-Green
• Green
• Blue-Green
• Blue
• Blue-Violet
• Violet
• Red-Violet
• Red
• Red-Orange
• Orange
• Yellow-Orange
• 黃色
• 黃綠色
• 綠色
• 藍(lán)綠色
• 藍(lán)色
• 藍(lán)紫色
• 紫色
• 紫紅色
• 紅色
• 紅橙色
• 橙色
• 黃橙色

一、用戶(hù)如何觀察

1.周邊視覺(jué)反應(yīng)速度高于中央視覺(jué)

若想引導(dǎo)用戶(hù)集中注意屏幕某處，就不要在周邊放置動(dòng)畫(huà)或閃爍的元素

作者：王鐸（MICU設(shè)計(jì)）

好長(zhǎng)時(shí)間沒(méi)發(fā)帖，凈想過(guò)年了，過(guò)年哈，倒騰工作總結(jié)和年貨是大事。

這幾天有人問(wèn)我說(shuō)：“最近看了好多教程，都老高大上了，但是老弟我做不到呀，想學(xué)點(diǎn)直接能拿來(lái)用的，這個(gè)要求過(guò)分嗎……”

這個(gè)，好吧，那就直接說(shuō)說(shuō)能用的知識(shí)：字體字號(hào)。

也許你會(huì)說(shuō)：字體字號(hào)？也太Low了吧，這個(gè)誰(shuí)不知道重要呀。

對(duì)于這個(gè)問(wèn)題，我想說(shuō)：會(huì)和熟練，是兩回事。一個(gè)App，不同部分的字體字號(hào)你能準(zhǔn)確地說(shuō)出來(lái)嗎？

很多剛做APP界面的設(shè)計(jì)師，經(jīng)常會(huì)因?yàn)樽痔?hào)，字體顏色，間距而困擾。
拿到設(shè)計(jì)需求后，開(kāi)始進(jìn)行設(shè)計(jì)，不知道從何去調(diào)整界面的字號(hào)和行間距等。容易碰到的問(wèn)題是頁(yè)面和頁(yè)面的字號(hào)調(diào)著調(diào)著就大小或顏色不統(tǒng)一了。并且容易導(dǎo)致設(shè)計(jì)稿反復(fù)得修改。設(shè)計(jì)出來(lái)的效果圖文字左右間距層次不齊，導(dǎo)致與預(yù)期不符等。
這小節(jié)我將和大家理一理界面中常用的字體，字號(hào)，字體顏色及間距對(duì)齊的一些小經(jīng)驗(yàn)。希望能對(duì)大家有些幫助。

藍(lán)藍(lán)覺(jué)得在界面設(shè)計(jì)中，優(yōu)秀的表格設(shè)計(jì)技巧是非?；A(chǔ)，也非常重要的。所以從網(wǎng)上搜集轉(zhuǎn)載了此主題的一些文章，來(lái)學(xué)習(xí)～～這是第四篇！實(shí)際價(jià)格表的設(shè)計(jì)案例。感謝原作者！

如果我們?cè)谠L問(wèn)某些產(chǎn)品銷(xiāo)售類(lèi)網(wǎng)站的時(shí)候，看到產(chǎn)品的價(jià)目展示用戶(hù)體驗(yàn)，很大程度上會(huì)影響我們的購(gòu)買(mǎi)需求，所以說(shuō)我們?cè)谧约?、客?hù)的網(wǎng)站價(jià)目表格展示的時(shí)候，用上特有、簡(jiǎn)單、體驗(yàn)完美的HTML CSS樣式表格能夠提高用戶(hù)體驗(yàn)和產(chǎn)品的購(gòu)買(mǎi)轉(zhuǎn)化率。在這篇文章中，老左整理來(lái)自海外16款用戶(hù)體驗(yàn)優(yōu)秀的HTML CSS價(jià)格表格模板，并且附帶演示和下載，根據(jù)我們自己的實(shí)際需要添加整合到網(wǎng)站中應(yīng)用。

老左之前也有分享過(guò)2篇關(guān)于HTML樣式表格的資源：

8款設(shè)計(jì)師常用漂亮的HTML CSS表格樣式

6款漂亮HTML CSS樣式用戶(hù)留言表單

第一、帶圖片價(jià)格表模板

藍(lán)藍(lán)一直在思考這個(gè)問(wèn)題，如何讓設(shè)計(jì)效果可量化，看到這篇文章，轉(zhuǎn)載到博客中推薦給大家。以后會(huì)搜集這方面的相關(guān)文章，觀閱各家之言。

藍(lán)藍(lán)一直在思考這個(gè)問(wèn)題，如何讓設(shè)計(jì)效果可量化，看到這篇文章，轉(zhuǎn)載到博客中推薦給大家。以后會(huì)搜集這方面的相關(guān)文章，觀閱各家之言。

記得在項(xiàng)目不斷迭代優(yōu)化過(guò)程中，設(shè)計(jì)師們也總說(shuō)我們價(jià)值不被認(rèn)可。當(dāng)時(shí)需求方與老板也常問(wèn)我你們?cè)O(shè)計(jì)究竟能否可量化如何可量化？當(dāng)然先不說(shuō)其它因果原由與價(jià)值其它體現(xiàn)。本身這個(gè)問(wèn)題也是我長(zhǎng)久一來(lái)一直思考剛好借此將它解決。當(dāng)時(shí)也找團(tuán)隊(duì)討論聽(tīng)到大家紛紛提到設(shè)計(jì)太抽象與設(shè)計(jì)很難通過(guò)數(shù)據(jù)量化等…其實(shí)在這個(gè)探討過(guò)程也是發(fā)現(xiàn)問(wèn)題所在過(guò)程，把大家疑慮問(wèn)題點(diǎn)歸納然后逐個(gè)分析并且思考解決后再歸納梳出。然后在實(shí)戰(zhàn)過(guò)程中再不斷調(diào)整與持續(xù)再歸納思考。

簡(jiǎn)單如下：

首先，我們做項(xiàng)目的交互設(shè)計(jì)可量化是需要一個(gè)基本評(píng)估標(biāo)準(zhǔn)：

個(gè)人認(rèn)為根據(jù)不同項(xiàng)目側(cè)重會(huì)有所不同，這個(gè)需要設(shè)計(jì)師根據(jù)項(xiàng)目需求和產(chǎn)品目標(biāo)等來(lái)判斷。任何緯度與標(biāo)準(zhǔn)都是參考，隨著個(gè)人和行業(yè)發(fā)展與變化一定都是時(shí)時(shí)變通。所以沒(méi)有固定標(biāo)準(zhǔn)走天下或者說(shuō)標(biāo)準(zhǔn)也是時(shí)時(shí)更新中。

1.項(xiàng)目功能設(shè)計(jì)。

-點(diǎn)擊率、轉(zhuǎn)化率、點(diǎn)擊流、活躍度、留存率、成功率等

2.體驗(yàn)可用性。

識(shí)別性-點(diǎn)擊率

性-時(shí)間效率

有效性-功能使用成功率、操作信息傳達(dá)有效性