網頁設計

關於網頁設計的技術或相關資訊分享

十種常見的網頁設計前台應用(下)

在上一集,我們將十種常見的網頁設計時會用到的前台應用技術,做了些初步的說明。

並且針對前五點有一些詳盡的描述,每一點的文末也提供了國外的參考範例。

現在我們將在這篇文章中對後續的五點做說明。

希望在看完這兩篇文章後,能對網頁設計的應用技術稍微有點概念。

 

6、按鈕的按下狀態

許多網頁設計時用到的應用程式能夠擁有自定義的按鈕樣式。

這些程式都是用自定義的圖片作為他們背景或輸入按鈕。

不過在一些情況下預設成輸入按鈕可能會有些不適合,因為有可能造成文字連結看起來太小(對比於圖片)。

所以這對於網頁設計時的挑戰在於,當你把你的連結弄得看上去像按鈕時,

它們的操作也應該和按鈕一樣 —— 這包括當瀏覽者點擊它們時會有被「按動」的效果。

 

這不是單純網頁設計上的視覺調整而已,而是提供即時的互動給瀏覽者,

將使整個網頁應用程式感覺與瀏覽者更有互動性,並且帶來更接近於桌面軟體的的使用者體驗。

 

你可以通過CSS為按鈕增加按下的效果。

 

網頁設計

 

Highrise的按鈕實際上是在你點擊的時候顯示一個按下的效果,給用戶一個非常舒適的互動感覺。

 

7、在會員登入的頁面提供註冊的連結

在現在的網頁設計中,網站具有會員功能是非常常見的一種應用。

可是一些沒有註冊成網站會員的用戶將不可避免地停在你的會員登入頁面上。

他們想要使用你網站上的進階服務,但是卻不能立刻找到註冊頁面,這樣往往就可能讓你喪失了所謂的機會。

這情況可能會出現在他們已經試過訪問一個只提供給註冊用戶的特定頁面時。

因此我們在網頁設計時針對會員模組的UI友善性,也是一個著重要考量的點。

 

網頁設計

Goplan的會員登入的頁面上有個漂亮的彩色按鈕指向註冊頁面。

 

在會員登入的頁面上放上註冊的連接會讓一切友善很多。

如果瀏覽者沒有會員帳號,他們不應該再透過其他頁面去尋找註冊頁面,這樣會降低瀏覽者的耐心。

目前是有研究證實:在註冊頁面,有18%的網站有會員登入表單或者連接到登入頁面的連接。

當然這樣的數字相信會原來越多的,而且是不會有下降的可能。

 

8、上下文的相關導覽

在做網頁設計時,你需要思考一下,什麼是用戶期望看到的,

以及在每個你給與的頁面中有什麼是用戶可能需要的,或者很重要的。

但是你不需要在每個地方顯示同樣的導覽元件,因為在用戶可能不是在每個環境中都需要它們,

並且可能使網頁設計的版面變得很死板。

 

上下文相關導覽的最佳範例之一是最近在微軟office2007中的界面,在它的界面中預設的工具列被帶狀的圖形用戶界面元素代替。

每個標籤上有不同圖形用戶界面元素代表相關的特定操作,無論是圖形編輯,校對或者簡單文書處理。

網頁設計時的應用程序也可以受益於這種相關導覽的圖形用戶界面元素,

因為這些元素透過只顯示瀏覽者需要的內容來幫助簡化頁面,使網頁保持乾淨清楚,而並非顯示所有的內容。

 

網頁設計

Lighthouse提供一個熟悉的標籤導航選單,但是它在標籤正下方有次級選單。這個層級只顯示當前項目相關活動的部分。

 

9、更加重視主要功能

不是所有網頁設計時用到的元素擁有相同的重要性。

例如,在螢幕上新增一個新項目,你可以有兩個按鈕:「建立」和「取消」。

這個「建立」的連結更重要一些,因為是用戶大部分時間會去用的操作。

只有少數才會去取消。所以如果這些圖形用戶界面元素通通擺在一起,

沒有辦法很明確看出哪一個是你想要給予較多的重視。

 

網頁設計

這個Lighhouse的「建立任務」按鈕。你可以看到「取消」連結在旁邊以純文字格式。而新增的按鈕不僅具有更重要的操作而且會有較大的點擊區域並且容易去點擊。

 

為了讓用戶的重點轉向「建立」連結,我們可以簡單地利用不同的CSS樣式或者網頁設計時用到的元素。

一些網頁設計時應用程式的表單輸入按鈕用來作為建立動作,並且把取消操作作為一個文字連接。

這樣不僅給與建立按鈕更多的點擊區域,而且也幫助那些在搜尋內容的瀏覽者獲得更好的焦點目光。

 

10、影音嵌入

當圖片和文字作為一種網頁設計時很常見的方式去和你的用戶溝通,

並且教育你的用戶有關網站的特點時,如果你有資源去投入,影音甚至可以成為更好的選擇。

影音在最近幾年的網路應用上已被越來越受歡迎,其中一部分原因是因為網路速度越來越快。

對於網頁設計來說,影音通常作為展示產品特點的示範影片被用於購物型網站或產品展示的網站中。

但是這不是使用影音的唯一方法。

 

網頁設計

GoodBarry特點是在網頁頭部有示範影片去展示產品,它也通過利用示範影片去教育用戶如何開始使用他們家的產品。

 

在現在的網頁設計中,一些網站也會在網站本身使用影音嵌入,教導瀏覽者如果使用某些網站上的特定功能。

影音是一種非常好的方式去快速展示你產品是被怎麼使用的,

因為它更容易描述超過一頁文字的內容,也清楚得多,因為觀眾可以清楚地看到該怎麼辦。