一、需求背景
N3主要是一個(gè)文檔瀏覽的工具型網(wǎng)站，原來(lái)的網(wǎng)站已經(jīng)功能齊全灾前，但是可能在導(dǎo)航上面有些小交互讓使用者不太舒服。比如點(diǎn)擊二級(jí)導(dǎo)航孟辑，頁(yè)面不能定位對(duì)應(yīng)的模塊哎甲，而且不能根據(jù)瀏覽者的瀏覽到哪個(gè)地方，就在導(dǎo)航上面指示饲嗽。
還有一個(gè)問(wèn)題是左側(cè)導(dǎo)航密密麻麻炭玫，把所有的二級(jí)導(dǎo)航都鋪開(kāi)，這會(huì)不會(huì)給用戶帶來(lái)干擾貌虾，想找一個(gè)菜單項(xiàng)都很困難吞加。
所以對(duì)于這樣一個(gè)網(wǎng)站，其實(shí)主要就是一下的優(yōu)化：
1.左側(cè)導(dǎo)航
2.文檔內(nèi)容格式
3.plus尽狠，一個(gè)好看一點(diǎn)的首頁(yè)衔憨。
二、導(dǎo)航--實(shí)用便捷
因?yàn)闀r(shí)間比較緊張袄膏，所以就不打算改變?cè)瓉?lái)的布局践图，依然是頂部導(dǎo)航+左側(cè)導(dǎo)航的形式。對(duì)于左側(cè)導(dǎo)航哩陕，首先把原來(lái)導(dǎo)航的信息整合起來(lái)平项，根據(jù)需要，哪些要的悍及，哪些不要的闽瓢，進(jìn)行梳理歸類。為了減少導(dǎo)航菜單心赶，所以把首頁(yè)這個(gè)菜單去掉扣讼，因?yàn)橛脩艋旧暇邆淞诉@樣的認(rèn)知，直接點(diǎn)擊頂部的logo就回到首頁(yè)缨叫。然后接下來(lái)是那些密密麻麻的二級(jí)菜單椭符。起初想了兩個(gè)方案荔燎，一個(gè)是默認(rèn)全部收起來(lái)，點(diǎn)擊到一個(gè)大分類下面销钝，比如“基礎(chǔ)樣式”有咨，才展開(kāi)這個(gè)類目下面的二級(jí)菜單；另外一個(gè)做法是蒸健，全部收起座享，那些密密麻麻的二級(jí)菜單，點(diǎn)擊之后似忧，在右邊再生成一欄菜單渣叛。這樣做的出發(fā)點(diǎn)是為了讓層級(jí)更加清晰，讓用戶只關(guān)注當(dāng)前的盯捌，不被其他目前不關(guān)心的信息干擾淳衙。
但是這兩個(gè)方案都被拋棄了。因?yàn)樾枨蠓教岢霾荒茈[藏菜單饺著，因?yàn)橛脩粜枰玫綖g覽器的搜索功能ctrl+F箫攀，這樣用戶想找某個(gè)組件的話，直接用瀏覽器的搜索瓶籽，基本都可以在導(dǎo)航欄上面找到匠童，快速達(dá)到用戶想要去的頁(yè)面。所以既然這樣塑顺，也只能把全部菜單鋪開(kāi)。原來(lái)是兩列俏险，那為了讓導(dǎo)航欄看起來(lái)更短一點(diǎn)严拒，嘗試用三列的，但是又太擠了竖独，用一列的話裤唠，整個(gè)導(dǎo)航又會(huì)很長(zhǎng)很長(zhǎng)，最后還是決定用回原來(lái)的兩列莹痢。
三种蘸、文檔內(nèi)容--舒服的閱讀體驗(yàn)
關(guān)于文檔內(nèi)容，最主要的是瀏覽的體驗(yàn)竞膳。首先把整個(gè)站點(diǎn)的文檔內(nèi)容航瞭，會(huì)出現(xiàn)的類別整理，歸類坦辟，還好類別不是很多刊侯，基本上把這些會(huì)出現(xiàn)的類型，定義好字體大小锉走、顏色滨彻、間距以及樣式藕届，那整個(gè)站點(diǎn)的文本內(nèi)容就可以統(tǒng)一用這個(gè)規(guī)范，保持一個(gè)良好的閱讀體驗(yàn)了亭饵。
期間參考了同類的其他競(jìng)品休偶，其中看到一個(gè)文本內(nèi)容看起來(lái)十分舒服和整齊的，雖然是英文網(wǎng)站辜羊，但是間距和字體顏色踏兜，可以作為參考：http://purecss.io。期間查閱網(wǎng)上相關(guān)的設(shè)計(jì)師總結(jié)出來(lái)的經(jīng)驗(yàn)只冻，http://www.uisdc.com/page-read其中這一片給出了很好的總結(jié)庇麦，結(jié)合上面兩者，就產(chǎn)出了現(xiàn)在的網(wǎng)站設(shè)計(jì)圖喜德。
四山橄、首頁(yè)--簡(jiǎn)潔輕松
首頁(yè)的設(shè)計(jì)比較簡(jiǎn)單，個(gè)人很喜歡最后一句話“Enjoy Coding:)"
五舍悯、總結(jié)
感謝棒棒的前端開(kāi)發(fā)工程師航棱，把設(shè)計(jì)稿接近100%地實(shí)現(xiàn)。
（因?yàn)檫@是公司內(nèi)部的網(wǎng)站萌衬，所以插圖得處理完再補(bǔ)上Ｒ肌）
