43種UI元件應有盡有,程式碼+關鍵語法解說,想不會都不行!
近來針對智慧型手機製作的網站大幅增加,設計一個手機版網站,早已不是加分,而是一定要有的標準配備。
網站的設計從PC轉換到智慧型手機,最需要考量的是小尺寸下,該怎樣設計好用的【UI使用者介面】。
本書基於這樣的需求,收錄了手機網站最常見到的43種經典UI元件。當您平時逛其他網站,或使用App時,遇到「這樣的UI設計好棒,不曉得該怎麼實作出來?」時,本書精心設計了圖像式目錄供您速查,只要參考所附的程式碼,掌握各種UI的關鍵撰寫語法就可以獲得解答。
這是想設計手機網站或WebApp的您,一定要擁有的UI實作寶典!
教您一手掌握熱門網站WebApp的UI設計手法!
●Facebook手機版上的側滑聊天面板
●LINE一左一右的聊天對話泡泡
●Youtube影片播放前顯示的「讀取中」動畫
●Google的關鍵字圖片搜尋功能
●Gmail寄信後會顯示的「信件已寄出」提示
●PChome的1-2-3購物結帳流程
●Twitter發文時會提示可輸入的剩餘字數
●Safari上側滑項目後顯示「刪除」、「星號」功能
●iPhone控制中心的背景柔化效果
本書特色:
●提供圖像式目錄查詢功能,也可或依中英文名稱,快速找到想實作的UI功能。
●每個UI都有附上實作程式範例,並解說關鍵語法。本書收錄的UI如下:
【網站導覽列】
導覽列NavigationBar/頁籤列TabBar/列表選單ListMenu/收合式選單AccordionMenu/跳板選單SpringBoard/下拉式選單PulldownMenu/滑動選單SlideMenu/圓形瀏覽列CircleMenu
【輔助瀏覽UI】
分段控制SegmentedControl/麵包屑列表BreadcrumbList/分頁Pagination/拖拉UIDragandDropUI/社群分享按鈕ShareButton
【列表】
表格列表GridList/側滑列表SwipeList/無限捲軸InfiniteScrollList/時間軸Timeline
【網頁小工具】
頁籤面板TabPanel/旋轉面板CarouselPanel/卡片UICardUI/浮出視窗ModalWindow/半透明效果Translucent/圖片搜尋ImageSearch/相片ImageGallery/彈出影片視窗PopupVideo/地圖Map/橫向捲動內容HorizontalScroll
【通知功能】
工具提示Tooltip/導引標示CoachMarks/圖示徽章BadgeIcon/快顯通知Toast
【網頁視覺化元件】
「讀取中」動畫InfiniteProgress/進度列ProgressBar/步驟瀏覽列StepNavigation/圖形Graph
【表單】
基本表單Form/登入表單LoginForm/搜尋框SearchBox/開關按鈕ToggleButton/客製化按鈕CustomButton/客製化上傳按鈕CustomUploadButton/客製化選擇選單CustomSelectMenu/文字計數輸入框TextareaCounter
|