美文网首页
我的交互日记—交互范例

我的交互日记—交互范例

作者: 李英俊LJ | 来源:发表于2017-03-20 00:41 被阅读0次

    (产品经理)你展示你的逻辑和流程;(交互设计)我思考我的场景和目标。

    尽可能的考虑场景与目标,在为目标设定优先级,定好信息结构。

    所见即所得,直接控制,无需确认

    先学走在学跑,先模仿在创新。学习和模仿成熟的范例(ios系统)是交互设计学习的快捷途径。

    做交互设计,尤其是ios端的交互设计,如果没有读过一遍 iOS Human Interface Guidelines,真的是要打脸了。以下内容不是官网内容的翻译,是个人的一些记录。

    官网的内容其实已经足够生动,列出了重要的guidelines,然后详细解释,加一些原生app的截图。但是读过一遍(全是英文啊,抑制撞豆腐的冲动硬读)还是会很快就忘掉。辣么多组建,还有一些很相似,如何让guideline读了不白读? 要掌握以下几点:长什么样;什么时候用,什么时候不用;有什么变体;其他细节。

    ios转场动画(页面扭转动画):深入(从左-->右,从右-->左),插入(从下往上),并行(如淘宝主要tab页面切换。

    唤起键盘的机制:凡是输入框获取焦点时(光标闪现),需唤起键盘;输入框失去焦点,隐藏键盘。

    status bars 状态栏

    what:状态栏是什么?

    组成:状态栏展示了了设备信息(时间,电量)和周围环境(信号,Wi-Fi,4g);

    底色:默认是透明的,可以自定义颜色;

    位置:始终在屏幕的上边缘

    how:怎么用呢?我就写一写自己注意到的几点吧(可是我都不想写1,2,3,4点,看都看不下去,这样说话有什么乐趣)

    1.不要自定义状态栏的内容,人们已经习惯了系统的状态栏。但是可以diy状态栏的颜色,默认是透明的,一个简单的配色小tips:浅色页面深色状态栏,深色页面浅色状态栏,可以是一个渐变的模糊自定义图片,不要跟页面内容抢戏,又不能让状态栏内容看不清楚。

    2.来自程序员的配色tips:使用导航控制器(navigation controller)来展示内容。导航控制器自动展示状态栏背景,同时能确保内容视图不会出现在状态栏后面,参看Navigation Controllers

    3.在展示媒体时,可以暂时隐藏,单机页面重新唤出状态栏。但是隐藏状态栏是全局的,不是页面级别的隐藏。要考虑在其他页面能看到状态栏,否则只能退出app才能知道系统时间。

    导航栏/标题栏

    what :标题栏是什么?

    组成:标题栏是页面标配,

    媒体app中没有标题栏,也要展示出当前页面状态

    标题栏上面的操作点,基本上是针对当前页面的操作。

    标题栏变体:

    1.可以包含的操作可以有:2~3个tab切换(电话-明显),多个option切换(ibook-隐藏)

    2.可以随着页面状态的改变,改变标题上的文字;文字的语境也有讲究

    一下栏目是偏工具类型,都是按需出现:

    search bars 搜索栏

    在标题栏下面;有两种状态:1是初始状态,2是激活状态。

    tools bars 工具栏

    相关文章

      网友评论

          本文标题:我的交互日记—交互范例

          本文链接:https://www.haomeiwen.com/subject/bhzpnttx.html