|
|
「智慧型手機與電腦不同，顯示面積較窄，因此必須善用有限的空間，發揮最大的效果。
如果只是純粹將資訊條列出來，無法傳達內容的魅力。
尤其智慧型手機的特性是，以在外使用或只有少許時間瀏覽的情況居多。
如果一眼看過，覺得網頁不吸引人，就會增加馬上跳出的機率。
與電腦上顯示為前提的網站相比，可以確定的是，最初看到網頁時的印象強烈左右接下來的動作。」（作者Maegaki）
即使是早學會設計網頁的你，面對智慧型手機網頁也會有一時不知從何開始的感覺吧！
因為手機網頁面積較為狡窄，必須在有限的空間裡傳達主要訊息，發揮最大的效益。
此設備的閱讀特性是讀者只能利用零碎的時間瀏覽網頁，
所以一個有魅力夠吸睛的網頁就極為重要了，
如果不能在第一眼吸引讀者的目光，也就留不住客戶了。
製作智慧型手機網站時，大部分談論的都是HTML5或CSS3等技巧方面的內容，卻忽略了在智慧型手機上顯示網頁時，也必須注意到呈現的印象以及設計。
本書是從「網頁設計」的角度為開端，仔細思考如何製作智慧型手機版網站。
告訴您怎樣才能運用有限的空間，設計出適合的導覽列或圖示選單，同時也介紹了各式各樣的運用變化。書中收集了許多極具吸引力的豐富表現，展現網頁的創意。
首先學習如何以 Photoshop 及 Illustrator 製作設計預覽╱繪製元件，再進一步利用 HTML/CSS 編輯網頁程式碼，藉由種類豐富的範例，詳盡說明手機版網站的設計技巧。
本書針對智慧型手機專用網站的特性及UI設計，做了簡單的整理歸納，範例分成「網頁版面」、「元件設計」、「元件變化」等部分，從了解手機UI開始到設計版型、元件、標籤、選單到進一步的應用變化，皆有完整的說明。
只要下一點功夫，再加上一點創意，就能讓智慧型手機用網頁變得有魅力。
如果你想製作智慧型手機網站，或者是希望能獲得視覺創意點子，這本書絕對能幫得上忙。
Chapter 1 智慧型手機版網站的特性
1 智慧型手機版網站的製作流程
2 作業系統與瀏覽器
3 顯示限制
Chapter 2 智慧型手機專用的UI設計
1 不固定寬度的彈性版面
2 元件設計以觸控操作為基本原則
Chapter 3 實際製作網站
1 製作流程
2 實際製作檔案
3 CSS3可以完成的設計及裝飾
Chapter 4 網頁版型
標題＋清單選單
1 化妝品品牌的網站首頁
2 咖啡店的網站首頁
3 飯店的網站首頁
4 使用了逼真紋理的咖啡店網站首頁
標題＋標籤選單
5 企劃公司的網站首頁
6 二手衣商店的網站首頁
標題＋圖示選單
7 IT企業的網站首頁
9 提供女性資訊的網站首頁
8 美容診所的網站首頁
標題＋大尺寸背景
10 和風料理店的網站首頁
11 建築設計事務所的網站首頁
下層網頁
12 介紹智慧型手機App網站的下層網頁
13 甜點店網站的下層網頁
14 表演會場網站的下層網頁
Chapter 5 設計元件
標籤選單
1 添加素描風線條的手繪標籤選單
2 以圖示為主的App風格標籤選單
圖示選單
3 設計強調影像顏色的圖示選單
4 猶如從玻璃彈珠中浮現圖形的圖示選單
5 彷彿用水彩筆觸上色的圖示選單
6 使用手繪風插圖圖示的連結選單
清單選單
7 iPhone App 風格的簡約清單選單
8 增加說明文字的清單選單
折疊選單
9 以開關方式顯示內容的簡潔折疊選單
10 使用圓形圖示的折疊選單
Chapter 6 元件的應用變化
1 影像展示設計
2 標題
索引
