閱讀本文大約占用您 5 分鐘時(shí)間

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、坡頭網(wǎng)站維護(hù)、網(wǎng)站推廣。

做改版設(shè)計(jì)大體思路很簡(jiǎn)單，只需要做好兩件事：發(fā)現(xiàn)問(wèn)題與解決問(wèn)題。

上一期我們做了改版設(shè)計(jì)的第一步──發(fā)現(xiàn)問(wèn)題，今天我們來(lái)做第二步──解決問(wèn)題!

經(jīng)過(guò)分析，我發(fā)現(xiàn)一個(gè)很有趣的事情，就是上期提出的問(wèn)題與問(wèn)題之間還有很多其他維度的共性，于是我再次分類，得到以下三種類型：

1、規(guī)范統(tǒng)一類問(wèn)題

例如：文字、顏色、控件、圖標(biāo)有太多的不統(tǒng)一、不規(guī)范。

2、設(shè)計(jì)風(fēng)格類問(wèn)題

例如：圖標(biāo)、卡片風(fēng)格陳舊。

3、信息層級(jí)類問(wèn)題

例如：信息布局層級(jí)、卡片文字層級(jí)。

我們來(lái)分別講解，并給出相應(yīng)的解決思路。

1.規(guī)范統(tǒng)一類問(wèn)題

圖標(biāo)線條粗細(xì)不一致，文字各種大小，顏色各種亂用，其實(shí)這些都是規(guī)范沒(méi)有制定好的原因，也就是我所講的規(guī)范類問(wèn)題。

如何解決呢?

我們需要先定好一個(gè)前期規(guī)范，然后隨著場(chǎng)景的增加，再不斷調(diào)整規(guī)范，但是千萬(wàn)不能在沒(méi)有任何指導(dǎo)原則、目標(biāo)的情況下就開(kāi)始天馬行空的設(shè)計(jì)，那樣最后一定會(huì)亂作一團(tuán)，尤其是在團(tuán)隊(duì)合作的情況下。

舉幾個(gè)例子(上期的問(wèn)題)：

1.1.文字各種大小、顏色，如下圖：

我們需要拉通所有場(chǎng)景，來(lái)進(jìn)行分類，最后給出一個(gè)前期規(guī)范：

比如定義一級(jí)標(biāo)題的文字為24pt，二級(jí)標(biāo)題的文字為18pt，正文為14pt，輔助性文字為12pt。

文字的顏色，重要型文字使用#333333，普通型文字使用#666666，輔助型文字使用#999999。

對(duì)于文字的加粗問(wèn)題，整個(gè)頁(yè)面，要么主標(biāo)題都加粗，要么都不加粗，如果有些加粗有些又不加粗，別人也許就會(huì)覺(jué)得我們做的不夠嚴(yán)謹(jǐn)(當(dāng)然特殊場(chǎng)景除外)!

1.2.圖標(biāo)線條粗細(xì)不一致

這是一個(gè)非常不應(yīng)該發(fā)生的錯(cuò)誤，在具體設(shè)計(jì)執(zhí)行前，需要將描邊粗細(xì)的規(guī)范提前制定好，例如統(tǒng)一為2px。

如下圖：

1.3.顏色亂用

顏色也需要我們輸出前期的基礎(chǔ)規(guī)范，考慮好他們的使用場(chǎng)景，以免在設(shè)計(jì)的時(shí)候胡亂用色，使最后產(chǎn)出的頁(yè)面雜亂無(wú)章。

比如主色、輔助色、灰度色等等。

以前有寫(xiě)過(guò)一篇關(guān)于規(guī)范的模板，有需要的可以去看看，這里就不具體展示了。

網(wǎng)址如下：核桃App界面設(shè)計(jì)及設(shè)計(jì)規(guī)范

1.4.控件樣式不統(tǒng)一

明明是一個(gè)控件，卻要用兩種樣式。

我們需要擇優(yōu)做好一個(gè)，然后放進(jìn)控件庫(kù)中，等到需要的時(shí)候直接調(diào)取。

通過(guò)上面幾個(gè)例子，大家會(huì)發(fā)現(xiàn)，如果前期規(guī)范沒(méi)有做好鋪墊，后面的設(shè)計(jì)就會(huì)很難把控，尤其是當(dāng)頁(yè)面越來(lái)越多的時(shí)候。

2.設(shè)計(jì)風(fēng)格類問(wèn)題

這一類問(wèn)題都發(fā)生在具體設(shè)計(jì)的時(shí)候，

如何解決呢?

我的解決思路如下(其實(shí)這個(gè)思路適用于大部分問(wèn)題)：

(1)分析自己產(chǎn)品的問(wèn)題(上一期已經(jīng)分析過(guò))

(2)看看競(jìng)品都是怎么做的

(3)結(jié)合自己產(chǎn)品的屬性、業(yè)務(wù)需求等因素進(jìn)行優(yōu)化

舉例開(kāi)始

2.1 卡片樣式不夠精致

先看看我們的卡片：

上一期我們已經(jīng)分析出這個(gè)排行榜卡片的問(wèn)題：前三名的序號(hào)過(guò)于搶眼，且樣式不美觀。

接下來(lái)我們需要做的就是看看競(jìng)品都是怎么處理的，因?yàn)榭锤?jìng)品是我們做設(shè)計(jì)必須要經(jīng)歷的一步，千萬(wàn)不要憑空想，會(huì)浪費(fèi)很多時(shí)間。

我找了幾個(gè)競(jìng)品網(wǎng)站的排行榜卡片設(shè)計(jì)，部分截圖如下：

我們會(huì)發(fā)現(xiàn)競(jìng)品的卡片前三名序號(hào)顏色都是統(tǒng)一的(當(dāng)然有些網(wǎng)站也不是這樣的)，雖然網(wǎng)易新聞官網(wǎng)的卡片用了紅色，但是為了避免過(guò)于刺眼，它沒(méi)有用色塊的形式，而是僅僅使數(shù)字加大變紅。

新聞名稱：如何系統(tǒng)的進(jìn)行改版設(shè)計(jì)（下）
網(wǎng)站鏈接：http://weahome.cn/article/cgsdos.html