产品交互设计UI/交互设计规范

IOS和Andriod组件

2017-04-14  本文已影响139人  无尽红茶

(本文内容及图片均从其他文章中摘取及整理)

1、Dynamic  Type        动态字体,用户可以自定义字体大小(IOS)

      Sizing Cells      列表视图字段较长可字段换行(IOS)

2、Pickers   IOS波轮选择器

      安卓 Dialog/dropdown

      分为:Date Picker/Time Picker

      选项不宜过多,合理排序,设置默认选项

3、Dialog  对话框 IOS里面的对话框是一种警示,告知信息一般在页面中使用文案提示

                       Andriod对话框更多是一种告知信息

4、Snackbar     

Andriod轻量级反馈  文本描述+1~0个按钮,非模态

Snackbar

5、ActionSheets 

用于二次确认或菜单选择;有取消选项,点击空白处也可退出;菜单项不宜太多,居中且不带图标。

另外有变形的网格式,ICON+标题,最好不能超过两行

ActionSheet

6、BottomSheets   Andriod组件

    类似于IOS的ActionSheets,但是没有取消选项,且有上下滚动的效果

常规BottomSheets

7、Popover    IOS弹出气泡 

     模态    当操作本身只是页面中的局部功能或快速入口时则Popover的形式更适合

Popover

8、Segment Controls  (分段控件/分段选择器/分段选择控件)

       是iOS原生控件之一,用于切换不同的视图或者表单中的单选

       最好采用文字或图片中一种作为选项,可作为表单组件

      与tab的区别:tab是安卓的规范组件,不止可以通过点击进行切换,也可以通过向左右滑动屏幕切换页面。

      Segment Controls实质是一种数据的筛选,同下拉菜单类似,且最多限制为5个,而tab可以扩展更多个。

Segment Controls

9、Stepper   步进器

选择合适的默认值可以减少用户的点击;设置数值的上限和下限,到达限值时禁止点

   Stepper

10、Switch      开关/滑动开关/切换开关

        Lable+开关状态+说明

        两个互斥的选项,选择其中一个后会立马执行选型(区别于表单里面的RadioButton(单选按钮),需要提交表单后执行)

          文案只需要说明控制的内容,否则会引起用户误解

         如果是重要的操作,最好加上二次的确认

         如果Switch所执行的操作需要与服务器交互,就必须考虑加载状态了(乐观派UI中会先显示操作成功的效果再请求服务器)。

QQ音乐Switch

11、Toast  安卓   非模态

         HUD    IOS

          可以用多态按钮(可以展现当前操作状态的按钮)、snackbar、动效来代替

       


         

上一篇 下一篇

猜你喜欢

热点阅读