「智慧型手機與電腦不同,顯示面積較窄,因此必須善用有限的空間,發揮最大的效果。
如果只是純粹將資訊條列出來,無法傳達內容的魅力。
尤其智慧型手機的特性是,以在外使用或只有少許時間瀏覽的情況居多。
如果一眼看過,覺得網頁不吸引人,就會增加馬上跳出的機率。
與電腦上顯示為前提的網站相比,可以確定的是,最初看到網頁時的印象強烈左右接下來的動作。」(作者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 標題
索引
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 提供女性資訊的網站...
購物須知
退換貨說明:
會員均享有10天的商品猶豫期(含例假日)。若您欲辦理退換貨,請於取得該商品10日內寄回。
辦理退換貨時,請保持商品全新狀態與完整包裝(商品本身、贈品、贈票、附件、內外包裝、保證書、隨貨文件等)一併寄回。若退回商品無法回復原狀者,可能影響退換貨權利之行使或須負擔部分費用。
訂購本商品前請務必詳閱退換貨原則。