智慧型手機版網站的製作流程 -...
TRANSCRIPT
008
智慧型手機版網站的基本知識
CHAPTER 1 智慧型手機版網站的特性
智慧型手機版網站的製作流程
即使限定為智慧型手機版的網站，「製作網站」的主要作業流程與電腦版網站大致相
同。同樣必須以：規劃內容，建構網站架構，配合內容及目標客群設計外觀，標注網
頁，這樣的流程來處理。
但是在企劃內容及討論設計的階段，必須考量到符合智慧型手機的特性，這點非常
重要。
CHAPTER 1-1
手機版網站與電腦版之間最大的差別就是，螢幕尺寸的大小。智慧型手機的顯示面積有
限，卻具備可以任意切換水平、垂直顯示，這種電腦沒有的特性。另外，安裝的作業系
統及瀏覽器也有限制，必須配合該環境進行標注才行。
操作方面也一樣，基本上不用滑鼠及鍵盤，而是以手指控制，這也是與電腦最大不同之
處。因此，手機版的連結區域必須提供手指可以觸控的尺寸。電腦版網站當滑鼠重疊於
一定的區域內，就會顯示成強調狀態，按下之後，即可前往連結的網頁。可是手機版
網站無法設定這種已經為人熟知的「Roll Over」功能，必須以更簡單明瞭的設計方式來
呈現。
在實際進入網站設計之前，讓我們先來瞭解，智慧型手機的畫面顯示及作業系統等事
項吧！
與電腦版網站的差異
009
CH
AP
TER
1
智慧型手機版網站的製作流程
企劃內容
● 在智慧型手機的畫面裡，可以毫無壓力，瀏覽一頁網頁內容的分量。
● 階層架構不要太多層。
建構網頁╱製作網站地圖● 建構網頁時，必須考量手機可以切換垂直、水平顯示的特性。
● 連結按鈕及文字等元件尺寸與電腦版網站不同，必須維持操作性、可讀性。
製作設計模型
● 以最適合智慧型手機裝置的格式匯出 影像。
● 基本上以 HTML5＋ CSS3標注網頁。配合內容，適當搭配 JavaScript等語法。
匯出影像╱標注網頁
● 利用實機或模擬裝置確認顯示結果。確認╱調整顯示結果
公開上線
● 想像最後標注時的檔案架構，設計出各個畫面的格式。設計網頁
010
智慧型手機版網站的基本知識
CHAPTER 1 智慧型手機版網站的特性
作業系統與瀏覽器
2012年 8月，智慧型手機採用的作業系統大致分成 2種：iPhone使用的 iOS以及
Android系統。除此之外，還有安裝了 BlackBerry、Windows Phone 7等作業系統
的智慧型手機，不過市占率較低。除非設定的目標客群比較特殊，否則一般不會對這
些作業系統的顯示結果進行嚴密的驗證。
iPhone3、iPhone3GS、iPhone4、iPhone4S、iPhone5採用的作業系統都是 iOS。
「Mobile Safari」是標準瀏覽器，已經預先安裝在手機裡。雖然您也可以使用由第三方製
作的瀏覽器「Opera Mini」等，不過「Mobile Safari」依舊擁有壓倒性的市占率，在確認
iPhone上的顯示或動作時，仍以「Mobile Safari」當作標準比較合適。
iOS與使用的瀏覽器
Android與使用的瀏覽器Docomo販售的智慧型手機幾乎都是以 Android作業系統的機種為主。手機裡已經安裝了
稱為「Browser」的應用程式，當作標準的瀏覽器。因為類似電腦的瀏覽器「Chrome」，
所以又稱為「Chrome Lite」。Android手機市場採取了公開各種第三方瀏覽器的作法。因
此與 iOS相比，標準瀏覽器的市占率相對較低。
另外，安裝 Android作業系統的智慧型手機，包含各種螢幕尺寸的機種。如果要以全機種
為對象，確認顯示狀態，將是一大挑戰。除了基於特別的製作條件，一般都會製作成能
支援螢幕尺寸變化，設計結構具有彈性的網站，並以代表性的機種，進行顯示確認、驗
證的步驟。
CHAPTER 1-2
智慧型手機專用的 UI設計
CHAPTER 2
不固定寬度的彈性版面1
元件設計以觸控操作為基本原則2
2
016
智慧型手機版網站的基本知識
CHAPTER 2 智慧型手機專用的UI設計
不固定寬度的彈性版面
利用液態版面建構網頁時，內容區域的
寬度要設定為百分比，不要使用固定數
值。以比例指定寬度，不僅能配合垂直、
水平方向的改變，確保最適當的內容區
域，還可以按照各個機種的螢幕尺寸變
化，彈性應變。
電腦版網站大部分是固定網頁寬度來編排版面，不過智慧型手機會因為機種或顯示方向
的關係，使得螢幕寬度改變，不適合設定為固定寬度。除了特別情況，建議您採用能配
合螢幕尺寸調整寬度的方式，也就是以「液態版面（Liquid Layout）」的手法來設計網
頁。這種方法可以徹底發揮比電腦畫面還窄的智慧型手機顯示區域，讓使用者能輕鬆瀏
覽頁面。
設計液態版面時的網頁寬度設定
製作智慧型手機版網站時，必須掌握以下 2項重點，再著手設計 UI。第一點是，因
應市售各種機種及水平、垂直方向產生的螢幕顯示變化，設計出可以充分發揮效果
的畫面。
CHAPTER 2-1
當螢幕的寬度出現變化，內容的顯示寬度也能隨之
改變，這種網頁結構就稱作液態版面。
垂直顯示
水平顯示
017
CH
AP
TER
2
不固定寬度的彈性版面
另外，還有一種作法是，進一步運用液態版面的概念，以「主動回應設計」編排設計結
構的方法。
這是配合瀏覽環境，切換 CSS語法或影像來源，把一個 HTML檔案當作基本來源，按照
各種螢幕尺寸，以最適當的排版方式顯示網頁，建構網站的手法。
除了電腦及智慧型手機之外，還有平板電腦等裝置也可以利用單一來源，靈活因應，因
此這種檔案架構開始受到各界關注。由於準備支援多種裝置的檔案，需要以 JavaScript
語法進行控制，勢必耗費許多工時。是否採用主動回應設計建構網站，必須從網站的目
標客群開始分析必要性，以及後續的營運方法等，進行全面性的檢討。
主動回應設計
基本上，準備一種HTML檔案，配合顯示環境，切換CSS或影像，讓版面依照各種螢幕的尺寸，使網頁結構產生變化，建構彈性設計。
電腦智慧型手機
智慧型手機版網站設計範例
038 CHAPTER 4 網頁版型
化妝品品牌的網站首頁
將花壇照片當作紋理，製作網頁上半部分的背景。編輯網頁程式碼時，以 CSS語法指定標題區域
的框線。
設計背景及標題
配合螢幕垂直顯示的尺寸，在
Photoshop開啟設計版型用的文
件。前景色設定為「#fbf8eb」
1，在文件的背景圖層填滿相同
顏色。先另外準備當作標題背景
的影像檔案。最好挑選重複顯示
時，接縫不會過於明顯，不規則
的細密圖案 2。
1
S T E P
01
CHAPTER 4-1 標題＋清單選單
在標題的背景裡，置入帶有紋理的照片影像，製作成網站的首頁。主選單以清單形式
構成簡潔的頁面。
顯示為 Portrait模式
顯示為 Landscape模式
CH
AP
TER
4
039化妝品品牌的網站首頁
將背景影像貼在排版用文件的頁首（Header）部分，再調整尺寸 1。在貼上影像的圖層
裡，建立「圖層遮色片」，畫出由下往上，從黑到深灰的漸層遮色片 2 3。讓照片影像
從頁首往畫面下方逐漸變透明，形成與背景色融合的狀態。
在頁首部分放上網站的標題，重
疊在背景影像上。中間貼上 Logo
標誌，套用彷彿從背景浮現出
來的「外光暈」圖層樣式。在
「圖層樣式」對話視窗裡，設定
「混合模式：正常、不透明：
75%、雜訊：0%、光暈顏色：
#FFFFFF（白）、展開：16%、尺
寸：16像素」，其他項目直接套
用預設值 1。另外，再增加圓角
矩形的框線。這樣就完成標題頁
首部分的影像了 2 3。
2
3
P O I N T
本書的範例是根據 iPhone 4S的解析
度製作文件，因此在「圖層樣式」
對話視窗裡，「尺寸」數值設定為偶
數。若要使用 CSS呈現相同效果，
可以設定為 2分之 1的數值。
智慧型手機版網站設計範例
040 CHAPTER 4 網頁版型
主選單採用條列狀的清單格式，以垂直方向排列。事實上，漸層或陰影的部分是使用 CSS語法指
定，不過在用色及陰影分配等方面，先在 Photoshop文件裡，確定設計結構。
設計清單選單
增加最新消息的區域。背景指定為
「#FFFFFF（白）」的圓角矩形，
包含區域標題、日期、新聞重點。
使用「圓角矩形工具」繪製「圓角半徑：16px」的圓角矩形。在「漸層覆蓋」圖層樣
式裡，設定「樣式：線性、角度：90°」，套用圖層樣式。漸層顏色設定為「#b29338~
#e8e0be」。
另外，再套用「陰影」圖層樣式。在「圖層樣式」對話視窗裡，設定「混合模式：色彩
增值、不透明：50%、角度：120°、間距：4像素、尺寸：6像素」。關閉對話視窗之
後，即可確認在圓角矩形上套用了漸層及陰影效果。
1
2
3
S T E P
02
智慧型手機版網站設計範例
236 CHAPTER 6 元件的應用變化
影像展示設計
CHAPTER 6-1 元件的應用變化
顯示面積有限的智慧型手機版網站，也經常使用以觸控或點選的方式，切換多張影像
的作法。不過實際動作必須與 JavaScript一起併用，以下將介紹幾個設計範例，
提供給您當作參考。各個範例都是以 Photoshop製作設計模型為前提，利用「圖層
樣式」等功能表現外觀效果。實際架構網站時，可以使用 CSS語法呈現。
TYPE01
TYPE03
TYPE05
TYPE02
TYPE04
237
CH
AP
TER
6
影像展示設計
以「橢圓工具」繪製作為顯示影像順序的正圓形。套用「內陰影」圖層樣式，呈現立體
感。在「圖層」對話視窗裡，設定「混合模式：色彩增值、陰影顏色：#000000、不透
明：75%、角度：120°、間距：4像素、填塞：0%、尺寸：4像素」。
在正圓形 1的上層，以「自訂形狀工具」繪製「箭頭 7」圖示，當作切換影像的箭頭按
鈕 2 3。
1
2
這個設計範例是配合切換的影像張數，放置相同數量的小圓形，讓瀏覽者能輕易瞭解
目前顯示的影像是第幾張，並且一目瞭然看清楚整張影像。切換影像的按鈕放置在左
右兩側，以點選方式，切換前後的影像。
TYPE01
1
2
3
智慧型手機版網站設計範例
238 CHAPTER 6 元件的應用變化
上個步驟的箭頭形狀與 1 的正圓形相同，一樣套用「內陰影」圖層樣式。在「圖層
樣式」對話視窗裡，設定「混合模式：色彩增值、陰影顏色：#939393、不透明：
100%、角度：120°、間距：2像素、填塞：0%、尺寸：2像素」。
下層的正圓形套用「外光暈」及
「漸層覆蓋」等 2種圖層樣式，
完成稍微膨脹的外觀。在「圖層
樣式」對話視窗裡，設定「外光
暈」為「混合模式：濾色、不
透明：75%、雜訊：0%、光暈
顏 色：#ededed、 展 開：0%、
尺寸：8像素」。「漸層覆蓋」設
定為「混合模式：正常、不透
明：100%、樣式：線性、角度：
90°」，設定「#929292∼ #ffffff」
的漸層效果。
3
4
239影像展示設計
CH
AP
TER
6
使用「橢圓工具」繪製正圓形，再以「多邊形工具」繪製三角形，將兩者重疊在一起，
製作出放在兩端的箭頭按鈕。
利用「筆畫」圖層樣式，在照片邊緣增加框線。開啟「圖層樣式」對話視窗，設定「尺
寸：4像素、位置：內部、混合模式：正常、不透明：100%、顏色：#afc391」。兩邊
的箭頭按鈕及筆畫統一使用相同色系，如此一來，即使照片裡含有多種顏色，整個網頁
仍能給人一致性的感覺。
1
2
一次顯示 2種影像，以左右按鈕切換影像顯示，完成設計結構。為了讓瀏覽者能輕易
瞭解，可以利用切換方式顯示影像，刻意將按鈕設計成較大的尺寸。
TYPE02