跳到主要內容

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

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

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



結構設計

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



互動設計

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

視覺設計

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

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

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

留言

這個網誌中的熱門文章

[教學] Vue js快速上手 (一) Hello World!

對於前端框架目前有許多的選擇,比方說React、Angular,以及還有今天要介紹的Vue.js!Vue.js有人說它像React,也有人說它像Angular,Vue.js主要是View跟Model的部分,但是效能、速度以及學習門檻都比React或Angular低,所以上手簡單,對於javascript苦手,或是一直遲遲無法學會React或Angular的同學們來說,簡直是一道曙光!

Vue.js的優點呢,主要就是專注在web技術上,支援html template、pug (jade)、coffeescript,甚至可與sass、less等加強版CSS做整合,而擴充性質的plugin也是頗多的,所以對於專注web技術研發的朋友呢,這就真的值得學一下了,畢竟不像React、Angular專注跨平台、跨載具,導致要學的東西就變很多,或是有很多新的架構概念要學習,當然Vue.js也是有缺點的,那就是太專注於web上了,其他平台就沒辦法好好使用了,不過反過來說,如果你主要是開發web,那你來說就沒什麼差了,而且Vue.js可以說是簡單版的Angular,當你學會Vue.js之後要轉到Angular反而可以讓你學習快速,神奇吧!趕快來看一下怎麼用Vue.js吧!

仔細看官網文件你會發現有一堆安裝方式要看,感覺好像非常複雜,其實一點也不複雜,就跟你載入jquery一樣:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
只要把上面這一行放在html檔案裡就可以了,有沒有很簡單?當然你要下載下來放在網站目錄裡也是一個不錯的選擇!

按照寫程式慣例,我們就來示範一個Hello World吧!

第一步,非常簡單,建立空白的html頁面。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>

    </body>
</html>
第二步,引入V…

[居家]DIY 自製除濕桶

因為房間太過於潮濕,又因為我家是回字型,我的房間就剛好是裡面那個口的位置,而且四面牆有一面都是廁所,廁所濕氣很容易透過,導致我房間連接廁所的那面牆開始發霉,房間霉味不斷,住起來感覺很差,除濕機每天都可以抽兩桶水,容量是3.6公升,所以兩桶就超過七公升了,但就算每天抽,地上的地磚也因為吸水開始變色,很容易就可以用肉眼辦別出來,房間裡面放的克潮靈除濕桶少說也有四桶,通常只要放一天就可以看到裡面有水了,而因為買了補充包回來很久,但是還剩很多,於是我就心血來潮的自己做起除濕桶來了。
外面除濕桶可重複使用的價格大概70元,大賣場應該可以買到50幾元,不能重複使用的通常都包四個一組要90元,大賣場大概70幾元,除濕劑補充包三入目前大概是60元,也就是一包20元,而一般除濕桶的結構,大致上都有除濕桶蓋子、鎖水紙、除濕劑、隔板與除濕桶本身,如下圖:

除濕桶的蓋子,如果你平常買不能重複使用的那種,大概就會有種疑問就是鎖水紙已經黏死了為什麼還要蓋子?而且蓋子感覺上並不緊,怎麼還需要蓋子?當然在你還沒破壞除濕桶之前蓋子基本上除了美觀以外我實在想不到還有什麼功能,不過如果你想重複使用這種標著不能重複使用的除濕桶,那你就很需要蓋子了!至於如何使不能重複使用的除濕桶可以再利用,我將在文末再慢慢說明,本段的重點在於了解除濕桶的結構,既然知道了結構那當然就要開始準備材料囉!

本次我所使用的材料其實還蠻簡單的,首先是空藥罐一個,橡皮筋小的兩條,硬一點的吸管一支,厚紙板一張以及包禮物有時候會看到類似紗窗那種塑膠網15平方公分大一張。第一步把厚紙板剪成圓形讓他可以放在藥罐中,接著把吸管從剪好的圓形紙板中心穿過去,這樣就可以固定住吸管了,但是為了讓水可以留過去,我在紙板上剪了兩個180度角的扇形,然後把吸管插進去,接下來把類似紗窗的塑膠網剪成四塊穿在吸管上,讓塑膠網在紙板上頭,這樣就可以避免除濕劑掉落到儲水區了,接下來最困難的大概就是鎖水紙了,我們先看看我成功的除濕桶長相,我再來慢慢說鎖水紙的取代方式:

這是我用來製造除濕桶的中藥藥罐 這是我做好的除濕桶長相(下方儲水區真的有水喔)
好啦!說到鎖水紙,這是花費我最多天實驗的地方了,第一天我用普通衛生紙蓋在瓶口,然後用橡皮筋綁住,但是隔天一看,衛生紙早已濕透而且還會滴水,所以鎖水紙不能用衛生紙取代,於是第二天我換上了棉質薄襪子,因為我剛好多一隻,而且棉會吸水,為了讓除…

[教學] Vue js快速上手 (二) 第一支Real-Time即時更新

上篇我們教了Hello World的寫法,是不是非常簡單好懂,Vue.js其實還有許多不同的寫法是在輔助各種開發情況下,可以快速維護,減少前端人員來來回回找code的時間,而快速維護也變得是這一兩年來最重要的網站發展重點,不管是MVC、MVP或MVVM等等開發模式,其實主要的本質我覺得都在畫清職責、方便維護、提升效能,而這些寫法在後續的教學裡,如果有機會或者有好的例子,我會會盡量一一舉例讓大家可以了解。學習所有的寫法有助於您判斷、規劃一個好的開發架構,讓你日後維護或是開發類似的功能時可以事半功倍。本篇當然延續上篇,用“Hello World!”來做範例,不過會做一些修改與調整好來做展示。

首先在這裡我先提出一種與上篇不一樣的寫法,也是最簡單的變形,那就是將參數設定另外寫,也就是當你參數預設值非常複雜時,為了讓您可以發便維護,會建議你採用這種寫法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            {{ message }}
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
var data = {
                message:'Hello World!'
            }
            new Vue({
                el:'#app',
data:data
            });
        </script>
    </body>
</html>
接下來,我要在這裡介紹一個新的html擴充屬性,叫V-model,如果直…