2008 年 6 月 24 日

[思考]網頁設計的介面設計

本篇目錄

繼上一篇資訊架構、優使性與親和力 ,這一篇為延續主題的探討! 上次講到網頁設計可以大致分成:網站架構.優使性.親和力這三大部分,我先從優使性這一塊來說好了,畢竟一個網站是不是會讓使用者操作的順手,絕大部分都來自於這一塊

優使性,一個與介面設計有很大關係的名詞,個人認為這兩個詞最大的不同點在於角度的不同,介面設計是設計師層面看到的東西,而優使性則是從使用者角度看到的東西,而本篇我想談的就是設計師層面的東西,所以我要談是介面設計,介面設計又可以分為三部分:結構設計.互動設計.視覺設計

結構設計

與網站架構相輔相成,一般都會以為是一樣的東西,但是網站架構是由網站架構圖去做分析所得到的草稿,而這裡的結構設計所指的就是最終的架構,並不是草稿,通常這一個步驟都會因為設計時間過短而合併,甚至有些設計師就直接拿著草圖做設計,對於整體網站的架構並沒有仔細的審視,導是常常設計到中途或末端需要從頭再修改架構,或者直接給客戶一堆理由而躲避這個架構問題,制定出整體的架構圖,並且審視一切,以免發生到中末期架構不堪的問題,就像翻一本書,目錄總是占有重要的地位,不管是時常在最前面或者被夾在中間甚至移到了最後面,他都依然站有一席之地,因為他很重要!

互動設計

互動設計必須先搞清楚互動的對象,隨著對向的不同可能會有不同的設計方式,例如:賣書的網站就適合用flash翻頁效果讓線上試讀更真實,在細一點就是滑鼠移到右上角頁面會捲起來向左翻,而滑鼠移到右下角也是一樣捲起來向左翻,雖然中間過程不太一樣,但是結果是相同的,都為了讓使用者更方便的達到心目中想要的結果而做的互動!

視覺設計

視覺設計通常帶給別人的是第一眼的感受,身歷其境的氣氛,運用不同的色彩來表達出意涵,讓版面看起來分明,可以使使用者快速找到什麼是主要的內容,分辨主角與配角都在這個部分,這個部分通常都很主觀意識,每個人都會有不同的想法,當然做出來的結果也會差很多!
各種視聽元素,例如:文字.背景.按鈕.圖案.影像.表格.顏色.背景音樂.音效.捲軸.導覽列.動畫.影片等,充斥在這個領域中,對於版型的設計與配置是否有達到主題鮮明,不讓配角變主角,內容的一致性是否完整,以及整體所強調的概念都是在這一範圍裡很重要的大方向!

過去的網路,從1991年純文字開始(DOS時代.BBS時代),到1993年開始有影像與聲音,至今,網路已佈滿了各式各樣不同的數位媒體,讓網際網路的繽紛,使得出現了許多網路重度使用者,甚至還有新聞報導學生熬夜打線上遊戲而暴斃,在這個知識爆發的年代,從web 1.0 開始慢慢轉變成 web 2.0 時,你現在所用的網頁,是環保的嗎?還是散佈了不少你覺得無意義的文章呢?

::延伸閱讀::
[CSS]Div+css命名規則-增強SEO
[思考]資訊架構、優使性與親和力

文章分類:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關推薦文章

希望您會喜歡
2010 年 10 月 29 日
[UI]這才叫分享照片!!好圖就該po上minus

秉持著有圖有真相與科技的進步,拍照已經變成日常生活常做的動作,回想幾年前拍照還需要準備相機準備USB線與記憶卡 […]

Read More
2008 年 6 月 2 日
[CSS]10種CSS語法產生器

對於網頁設計師來說CSS應該不是陌生的東西,CSS的威力有多強?想必大部分的設計師都很瞭解,但是卻又有更多人望 […]

Read More
2009 年 6 月 3 日
[活動]2009 EPA 環保頻道

負責內容:設計+動畫程式 2009 EPA 環保頻道 負責內容:首頁flash頁面裁切製作、flash+xml […]

Read More
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram