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)