< >
「智慧型手機與電腦不同,顯示面積較窄,因此必須善用有限的空間,發揮最大的效果。如果只是純粹將資訊條列出來,無法傳達內容的魅力。尤其智慧型手機的特性是,以在外使用或只有少許時間瀏覽的情況居多。如果一眼看過,覺得網頁不吸引人,就會增加馬上跳出的機率。與電腦上顯示為前提的網站相比,可以確定的是,最初看到網頁時的印象強烈左右接下來的動作。」(作者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 標題索引
立即套用上線的魅力網頁 - 專業設計師製作的網站設計版型範例集 HTML5+CSS3 智慧型手機專用網站設計
購買紙本書