7.29 移动端界面的杂乱细节..

发表于 更新于 分类于

最近赋闲在家顺手整理了下，只留些简单的tips备忘。

包括某些不靠谱未敲定的 iOS 7 的元素..

手势

新增的手势包括：

  • 全局手势：从下边缘划入后开启 Control Center, 所以要小心对待；* 常用手势：从左边缘划入后返回到上一屏；

Control Center 的手势真是麻烦，我看我姐我老头我xxx在快速浏览内容的时候由于手势太快导致各种误触发。所以，在内容超多需要快速浏览的界面，建议保留tab栏或是工具栏来做恰当的缓冲（针对隐藏控件的情况）。

返回手势其实之前有不少的解决方案，像是留空，底层的工具栏加上“返回”，最早见于淘宝和各个门户网站的新闻客户端： [caption id=”attachment_5058” align=”aligncenter” width=”150”][from "搜狐新闻"，虽然控件做的难看，但是空间充分利用]1 from “搜狐新闻”，虽然控件做的难看，但是空间充分利用[/caption] 这有篇相关的文章，值得花时间好好看看。Solving the Back Button

控件

状态栏(status bar)

原先的状态栏有 dark 和 light 两种，但是水果家现在可以设置为半透明了。

那意味着.. 登录时候提供的那张_作弊_截图得额外包含状态栏了，做好换的准备 lol。

tip: * 只在阅读、游戏、视频等_沉浸式_的体验下设置消失才可。

滚动条

显示在右边（纵向），靠相对的长度和位置来确定内容的浏览状态。 [caption id=”attachment_5050” align=”aligncenter” width=”150”][from "Tweetbot"]3 from “Tweetbot”[/caption]

只在滑动时显示，但是有时候需要一定的视觉暗示来作引导，不然用户会对着屏幕不知所措。好的示范比如这样： [caption id=”attachment_5048” align=”aligncenter” width=”150”][from “字节社” ]4 from “字节社” [/caption]

不好的就先不放了…

操作列表

look: [caption id=”attachment_5052” align=”aligncenter” width=”150”][from "Mail"]5 from “Mail”[/caption]tip：

  • 通过点击 Cancel 或者 屏幕其他区域退出；* iPhone 需要 Cancel, iPad不需要，原因参见上一条…

导航栏(Navigation Bar)

iOS 7中成这样子了，button没有边框（省去了按钮背景那张图片），用”<+文字”来做导航指示。 [caption id=”attachment_5055” align=”aligncenter” width=”150”][from "Music"]6 from “Music”[/caption] 可以看到导航栏变成半透明了，所以加个按钮会超级违和。不过没有按钮的大小限制之后，文字标签明显的大了两个字号（冇的iOS6 的机器了，就不图片对比了..）

半透明的效果可以看到内容暗示，确实是前后协调一致了不少。导航栏的下边缘以前是用的投影，现在开始直接使用1px的线了（hairline 发迹线..)

Tab栏

…挖坑之后填