好康情報

《快速查， 馬上用！ CSS3+jQuery 手機網站 UI 範例實作》



43 種 UI 元件應有盡有, 程式碼 + 關鍵語法解說, 想不會都不行！



近來針對智慧型手機製作的網站大幅增加, 設計一個手機版網站, 早已不是加分, 而是一定要有的標準配備。



網站的設計從 PC 轉換到智慧型手機, 最需要考量的是小尺寸下, 該怎樣設計好用的 【UI (使用者介面)】。本書基於這樣的需求, 收錄了手機網站最常見到的 43 種經典 UI 元件。當您平時逛其他網站, 或使用 App 時, 遇到「這樣的 UI 設計好棒, 不曉得該怎麼實作出來？」時, 本書精心設計了圖像式目錄供您速查, 只要參考所附的程式碼, 掌握各種 UI 的關鍵撰寫語法就可以獲得解答。這是想設計手機網站或 Web App 的您, 一定要擁有的 UI 實作寶典！



教您一手掌握熱門網站 / Web App 的 UI 設計手法！

●Facebook 手機版上的側滑聊天面板

●LINE 一左一右的聊天對話泡泡

●Youtube 影片播放前顯示的「讀取中」動畫

●Google 的關鍵字圖片搜尋功能

●Gmail 寄信後會顯示的「信件已寄出」提示

●PChome 的 1-2-3 購物結帳流程

●Twitter 發文時會提示可輸入的剩餘字數

●Safari 上側滑項目後顯示「刪除」、「星號」功能

●iPhone 控制中心的背景柔化效果



本書特色



●提供圖像式目錄查詢功能, 也可或依中英文名稱, 快速找到想實作的 UI 功能。



●每個 UI 都有附上實作程式範例, 並解說關鍵語法。本書收錄的 UI 如下：



【網站導覽列】

導覽列 (Navigation Bar)／頁籤列 (Tab Bar)／列表選單 (List Menu)／收合式選單 (Accordion Menu)／跳板選單 (Spring Board)／下拉式選單 (Pulldown Menu)／滑動選單 (Slide Menu)／圓形瀏覽列 (Circle Menu)



【輔助瀏覽 UI】

分段控制 (Segmented Control)／麵包屑列表 (Breadcrumb List)／分頁 (Pagination)／拖拉 UI (Drag and Drop UI)／社群分享按鈕 (Share Button)



【列表】

表格列表 (Grid List)／側滑列表 (Swipe List)／無限捲軸 (Infinite Scroll List)／時間軸 (Timeline)



【網頁小工具】

頁籤面板 (Tab Panel)／旋轉面板 (Carousel Panel)／卡片 UI (Card UI)／浮出視窗 (Modal Window)／半透明效果 (Translucent)／圖片搜尋 (Image Search)／相片 (Image Gallery)／彈出影片視窗 (Popup Video)／地圖 (Map)／橫向捲動內容 (Horizontal Scroll)



【通知功能】

工具提示 (Tooltip)／導引標示 (Coach Marks)／圖示徽章 (Badge Icon)／快顯通知 (Toast)



【網頁視覺化元件】

「讀取中」動畫 (Infinite Progress)／進度列 (Progress Bar)／步驟瀏覽列 (Step Navigation)／圖形 (Graph)



【表單】

基本表單 (Form)／登入表單楊梅 火鍋吃到飽 (Login Form)／搜尋框 (Search Box)／開關按鈕 (Toggle Button)／客製化按鈕 (Custom Button)／客製化上傳按鈕 (Custom Upload Button)／客製化選擇選單 (Custom Select Menu)／文字計數輸入框 (Textarea Counter)