Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
移动终端导航模式
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
cssrain
July 14, 2014
Technology
77
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
移动终端导航模式
cssrain
July 14, 2014
More Decks by cssrain
See All by cssrain
UED工作流程分享和交流
cssrain
1
540
解读HTML
cssrain
0
210
解读HTML5
cssrain
2
230
基础CSS(1)
cssrain
0
220
基础CSS(2)
cssrain
0
160
高效的CSS
cssrain
0
210
高级CSS—继承
cssrain
0
190
PhoneGap分享和交流
cssrain
0
160
PhoneGap实践
cssrain
0
110
Other Decks in Technology
See All in Technology
夫婦で子育てするための育児標準化
codmoninc
PRO
0
210
アウトプット初心者、半年間のふりかえり
4o1sobblue
0
200
AIは「聞けば答える」から「任せると自分で進める」へ - JACTIMペナン地域部会・ペナン三水会講演
knishioka
0
110
初対面のメンバーがチームを組み、Claude Codeでゼロからサービスをリリース
mkdev10
1
130
Getting Started with Google Antigravity
glaforge
0
250
AI駆動開発の時代になったのでトヨタ生産方式から見直す
terurou
7
5.9k
実践! SRE × AI - ABEMA における AIOps -
tetsuya28
8
3k
Deep Data Security 機能解説
oracle4engineer
PRO
2
800
AIカンパニーへの転換を支えた、エンジニアの仕事の再定義
kworkdev
PRO
2
670
V8のArray.prototype.flatを最大約20倍速くするまでと、巨大OSSへの大規模コミットの道のり
riyaamemiya
0
280
メルペイ 会計システム概要と歴史
mewuto
1
220
12 個 Tool と、 4,096 Token
hlum
0
150
Featured
See All Featured
Reality Check: Gamification 10 Years Later
codingconduct
0
2.3k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
63
46k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
18k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
35k
Google's AI Overviews - The New Search
badams
0
1.6k
Claude Code のすすめ
schroneko
67
230k
What does AI have to do with Human Rights?
axbom
PRO
1
2.4k
Leo the Paperboy
mayatellez
10
2.4k
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
68
59k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
tmiket
1
330
Why Our Code Smells
bkeepers
PRO
340
58k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.6k
Transcript
移动终端导航模式分享
Why 说他重要? 导航是互联网网站最重要的组成部分之一,它涉及到产品的信息架构、 页面布局和用户交互行为等诸多方面。一个网站用户体验的优劣往往和导 航的优劣有密切的联系。 指挥员 员
网页导航按外在形式的分:
移动终端上能用的:
按外在形式分类导航 1、分类链接导航 2、Tab标签导航 3、相关导航
分类链接导航 常见的是在首页设置分类 链接导航,将网站的主要 模块入口放置在主页顶部。 如果分类太多可以加入 “更多”入口,在更多页 面将所有分类全部展现。
相关导航--百度知道和BBC新闻 相关导航一般出现在正文页, 推荐不当前页面相关内容, 向用户提供类似内容,提升 用户粘性。
Tab标签导航-- Myspace 三个主导航下面各有3-4 个二级导航,展现了网站 的主要功能
按布局分类导航菜单 1、底部导航菜单 2、列表式菜单 3、矩阵、网格式菜单 4、顶部菜单
底部导航菜单 这种菜单模式是最常见的,主要做功能区分。导航放在屏幕底部, 每个导航顷还可向上扩展,承载更多功能。点击最下方的图标, 即可拉出导航菜单,伟大的设计是隐形的,丌占据屏幕空间,且提 供更多的信息承载
底部导航菜单 我们现在用的比较多的 就是底部导航菜单
列表式菜单 这种方式在移动应用中也被广泛使用。这种导航设计解决方案主要 是将链接逐条排列,让用户按照习惯,从顶部到底部导航。
列表式菜单
矩阵、网格式菜单 网格式导航能占据整个屏幕,将界面的重点放在导航上,让导航更清晰明显。 当导航顷过多的时候,这种方法非常实用,然后通过等距的网格线整齐分割 导航顷。
矩阵、网格式菜单 非常引人注目,一屏6个导航顷,扁平化图 标显得非常出众。 草图风格的导航设计,强调功能性。背景 采用了轻色调。因此,丌用做明显的分割 线,辨识度也很高。
顶部菜单 顶部菜单丌符合人机工程学——手会挡住屏幕。虽然更符合人阅读习惯,用 户会最先发现导航,但移动端毕竟丌是桌面端——用户要用手去操作。
顶部菜单 导航菜单可隐藏。导航菜单和整 体界面对照鲜明且丌突兀,得益于 明亮的色彩和纯实的图标。
顶部菜单 一二级导航均位于顶部,招之则来, 挥之则去,避免干扰用户。
感谢聆听!