太原網(wǎng)站建設(shè)中太原網(wǎng)頁(yè)設(shè)計(jì)心得

    太原網(wǎng)站建設(shè) 中太原網(wǎng)頁(yè)設(shè)計(jì)心得:把導(dǎo)航系統(tǒng)做薄

　　和朋友討論時(shí)，我提到過一個(gè)觀點(diǎn)，所有框架層設(shè)計(jì)中，核心的是導(dǎo)航設(shè)計(jì)。近更看到有國(guó)外同行提出“80%的可用性是導(dǎo)航！”因?yàn)榱己玫膶?dǎo)航可以保證用戶找到信息。也就是說(shuō)，提供到達(dá)的可能，遠(yuǎn)比如何到達(dá)的可用重要。

　　我習(xí)慣把導(dǎo)航分為一維、二維、多維來(lái)簡(jiǎn)單理解，一維對(duì)應(yīng)線性結(jié)構(gòu)，二維對(duì)應(yīng)分層結(jié)構(gòu)，多維對(duì)應(yīng)無(wú)序結(jié)構(gòu)。這么說(shuō)可能比較抽象，其實(shí)都已經(jīng)是耳熟能詳?shù)膽?yīng)用，分別舉例闡述設(shè)計(jì)意圖：

　　1.原始于一二三級(jí)的，單對(duì)多樹狀應(yīng)用就是“分層導(dǎo)航”，基本屬于必要元素。

　　2.跟蹤用戶行為，記錄的用戶在網(wǎng)站的活動(dòng)足跡就是“線性導(dǎo)航”，俗稱面包屑。

　　3.管理系統(tǒng)的后臺(tái)，在頁(yè)增加的類似跨分層結(jié)構(gòu)的鏈接就是“無(wú)序?qū)Ш健?，俗稱快捷方式。

　　二維結(jié)構(gòu)復(fù)雜到一定程度，必然造成導(dǎo)航縱深過度，用戶到達(dá)的難度增加。此時(shí)就需要考慮其他方案綜合實(shí)施，具體設(shè)計(jì)可以概括如下：

　　從無(wú)到有的堆積過程，把當(dāng)前所有能夠調(diào)度的資源全部拿出來(lái)。

　　由多到少的序化過程，分解任務(wù)找出主次任務(wù)線索并重組。

　　回憶起Flickr改版，前幾次重要的導(dǎo)航改動(dòng)，都會(huì)更換版本代號(hào)，可見Flickr把導(dǎo)航系統(tǒng)看的相當(dāng)重要。同時(shí)，Beta和Gamma兩個(gè)版本的升級(jí)也對(duì)應(yīng)了我的想法，參考頭部導(dǎo)航片段：

　　Beta的特點(diǎn)是想要什么就能看到什么，從Alpha起就在不斷的加功能，雖然期間也在做任務(wù)分解的調(diào)整。但顯然，量太大怎么調(diào)整也會(huì)感覺復(fù)雜。Gamma的特點(diǎn)是想要什么就有什么，只不過把要不要的權(quán)利還給了用戶。

　　如果從用戶體驗(yàn)的角度來(lái)闡述，Beta已經(jīng)滿足了用戶的認(rèn)知體驗(yàn)，好玩夠用；Gamma了用戶的作體驗(yàn)，耐玩易用。大家仔細(xì)對(duì)比，還能找到 豆瓣改版 與之相似的痕跡。

　　有了運(yùn)營(yíng)數(shù)據(jù)，問題很容易暴露。比如北京的交通，理想的狀況是把北京市劃分成N個(gè)小區(qū)域，各區(qū)域之間使用地鐵/城鐵等高速交通工具，各區(qū)域之內(nèi)則使用公交等低速交通工具，同時(shí)地鐵/城鐵和公交站上下一體化，如此可以盡量避免公交路線的大范圍交叉（扁平結(jié)構(gòu)），主動(dòng)預(yù)防而不是被動(dòng)減壓。

　　我們面臨的事實(shí)，都不能重建，但產(chǎn)品可以重來(lái)，太原網(wǎng)站建設(shè)也是一樣。

　　3、太原網(wǎng)頁(yè)設(shè)計(jì)中CSS的利用

    太原網(wǎng)頁(yè)設(shè)計(jì)中，如何利用CSS框架進(jìn)行高效率的站點(diǎn)開發(fā) Elements

　　隨著公司網(wǎng)站的再度改版，當(dāng)初在頁(yè)面代碼規(guī)劃以及css設(shè)計(jì)方面的問題逐漸都浮現(xiàn)出來(lái)。由于設(shè)計(jì)當(dāng)初考慮得不夠，給站點(diǎn)的改版帶來(lái)很多不必要的麻煩。CSS框架這個(gè)概念在這個(gè)時(shí)候顯得越發(fā)的重要，也是必要！

　　在去年的時(shí)候曾經(jīng)說(shuō)過用Dreamweaver 代碼片斷 提高css開發(fā)效率。其實(shí)已經(jīng)是CSS框架的雛形。而國(guó)外也開始有很多的CSS Frame出現(xiàn)。css框架已經(jīng)是我們必須研究解決的一個(gè)問題。如果更快速、有效、可擴(kuò)展的去書寫站點(diǎn)的CSS代碼。

　　這里為大家介紹一個(gè)CSS框架 - Elements

　　下載地址：http://5key.net/down/css-framework-elements.rar

　　一、什么是Elements

　　Elements是一款純凈的CSS框架，可以幫助設(shè)計(jì)師快速高效率的書寫css文檔。你可以將他理解成一套模板，里面包含了大多數(shù)站點(diǎn)中所需要的那些css類。他很小，只有四個(gè)文件而已。總共不到6KB。

　　二、這四個(gè)文件分別是做什么用？

　　Elements.css 歸納了一些站點(diǎn)css中常用的css類

　　Reset 對(duì)一些常用的html標(biāo)簽進(jìn)行預(yù)設(shè)。例如html, body, div, span, applet, h1, h2, h3, h4, h5, h6....等等。

　　Typography 文字排版常用標(biāo)簽的預(yù)設(shè)。例如body,ul,ol,dl,td,th,caption,pre,p,blockquote,input,textarea等

　　External Links 對(duì)于各種文檔形式的鏈接的預(yù)設(shè)。這個(gè)東西很早已經(jīng)有人單獨(dú)提出過。

　　三、如何使用Elements CSS框架？

　　<link rel="stylesheet" type="text/css" href="/css/elements/elementsImport.css" />

　　大家可能注意到上面的圖片中有5個(gè)css文件，其中的elementsImport.css只是將其他的四個(gè)css文件分別導(dǎo)入進(jìn)來(lái)。

　　@import "reset.css";

　　@import "typography.css";

　　@import "elements.css";

　　@import "externalLinks.css";

    Elements框架也許并不一定適合我們的站點(diǎn)開發(fā)，但是通過它我們可以找到一種好的架構(gòu)方式。如果你經(jīng)常會(huì)和css打交道，不論你是在做企業(yè)站還是門戶站，好好的整理一下你以前的文檔，根據(jù)你的需求制定自己的CSS框架，會(huì)很大程度上的提高你的開發(fā)效率。

    太原網(wǎng)站建設(shè) 中，利用CSS框架進(jìn)行高效率的站點(diǎn)開發(fā) Elements，是很重要的內(nèi)容

航佳網(wǎng)絡(luò)為您提供太原網(wǎng)站建設(shè)網(wǎng)站運(yùn)營(yíng)、網(wǎng)站制作、網(wǎng)站優(yōu)化、網(wǎng)站優(yōu)化推廣知識(shí)，有何疑問就趕緊咨詢我們，銷售電話：13466811318