當(dāng)前位置：首頁 > 觀瀾網(wǎng)站制作觀瀾網(wǎng)站制作

公司網(wǎng)站要改版？怎么開始？

日期：2019-02-28 人氣：1342720

導(dǎo)讀：公司改版分類，得到以下三種類型： 1、規(guī)范統(tǒng)一類問題例如：文字、顏色、控件、圖標(biāo)有太多的不統(tǒng)一、不規(guī)范。 2、設(shè)計風(fēng)格類問題例如：圖標(biāo)、卡片風(fēng)格陳舊。 3、信息層級類問題例如：信息布局層級、卡片文字層級。我們來分別講解，并給出相應(yīng)的解決思路。 1.規(guī)范統(tǒng)一類問題圖標(biāo)線條粗細(xì)不一致，文字各

公司改版分類，得到以下三種類型：

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

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

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

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

3、信息層級類問題

例如：信息布局層級、卡片文字層級。

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

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

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

如何解決呢？

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

1.1.文字各種大小、顏色

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

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

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

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

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

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

1.3.顏色亂用

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

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

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

明明是一個控件，卻要用兩種樣式。

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

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

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

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

如何解決呢？

我的解決思路如下（其實這個思路適用于大部分問題）：

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

（2）看看競品都是怎么做的

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

2.1 卡片樣式不夠精致

先看看我們的卡片：

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

接下來我們需要做的就是看看競品都是怎么處理的，因為看競品是我們做設(shè)計必須要經(jīng)歷的一步，千萬不要憑空想，會浪費很多時間。

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

我們可以結(jié)合競品的優(yōu)點來進(jìn)行我們的卡片設(shè)計

不過這只是自己主觀針對視覺問題來做的優(yōu)化，我們解決了顏色花哨搶眼及標(biāo)簽樣式繁瑣的問題，但實際工作中你還需要結(jié)合需求方的要求去進(jìn)行調(diào)整，在這個過程中，溝通方式比較關(guān)鍵，恰當(dāng)?shù)臏贤ǹ梢宰屇愫托枨蠓匠蔀楣餐鉀Q問題的戰(zhàn)友，而不恰當(dāng)?shù)臏贤ǚ绞揭苍S會讓你們成為互相排斥的敵人，所以很多時候心態(tài)和處事方法更加重要。

2.2 圖標(biāo)顏色花哨、風(fēng)格陳舊

你也可以按照上面的步驟來進(jìn)行優(yōu)化，只不過說起來容易，真的想做得好還是需要經(jīng)驗的沉淀、審美的提高，只有不斷地練習(xí)，才能做的得心應(yīng)手。

由于工作內(nèi)容不能拿出來分享，所以改版的圖標(biāo)都是臨時在網(wǎng)上下載直接用的，大家可不能這樣做哦！

如果是剛?cè)胄械呐笥�，建議可以先從模仿，借鑒開始，因為如果沒有經(jīng)歷過大量的臨摹做基礎(chǔ)，直接就想創(chuàng)新，是很難做到的。

但也不能照搬抄襲，這個度一定要把控好。

3.信息層級類問題

這一類問題為什么要單獨拿出來說呢？

因為層級區(qū)分不明顯是導(dǎo)致頁面沒有主次、混亂的最重要原因，我們在做設(shè)計的時候，一定要隨時提醒自己，哪個是最主要的，哪些是次要的，當(dāng)什么都重要的時候，也許做出來的效果就是什么都不重要了。

1.1布局層級問題

（1）隱藏個人信息，將其收在導(dǎo)航欄頭像里面，鼠標(biāo)經(jīng)過時展示即可

（2）弱化圖標(biāo)（例如：使用線性圖標(biāo)或降低圖標(biāo)顏色的飽和度等

2.2 文字層級