界面设计-iOS组件概述(AD、We...

  • 经验类型规范/资料原作者:Echo

  • 经验属性原创文章
  • 经验版权署名-非商业性使用
1684 0 5 2018-05-10

一直在尝试从美术生的角度去理解技术开发中提到的UI kit,了解的越深入,发现这些都是术语。作为设计师,需要弄清楚设计界面的各个知识点,并能明白研发在说什么,足以满足工作需要,但如果你想变得更专业。还是建议一起学学代码,了解研发的工作方式,沟通起来会更加顺畅。我的学习从官方人机交互指南pdf开始。


推荐文章:iOS人机交互指南官方文档(2018已更新到 iOS11)

https://developer.apple.com/ios/human-interface-guidelines/overview/themes/


接下来说说 我对控件的理解:

控件指设计界面中既可组合、又可独立拆分的视觉元素。通常又叫UI kit,主要作用就是增强界面元素的复用性,保持视觉样式的一致性,减少设计工作量,达到优雅而高效的完成设计任务的效果。将设计组件应用到实际研发过程中,共用元素经过一次紧密沟通后,往后直接根据视觉图复用即可。不需要跟着版本迭代,重复标注、切图。从这点上看,也大大降低了设计和研发的沟通成本。


所有的UI kit 都来源于Android、iOS、Windows这三大系统的人机交互指南。虽然这三类系统的应用采用技术语言不同(Java、Swift、C++、Phython...)但前端展示页面的逻辑基本一致,只是因为设备的物理尺寸类型不同,页面展示有各自的风格,最终人机交互指南的规范不同而已。


以iOS为例:

手机端-常见UI Kit包含状态栏、导航栏、tab、弹窗、loading、列表、表格、表单等待。具体描述:如下图

Image title

Android、windows所属控件同iOS大同小异,只是用户操作的交互方式、程序调用控件的类/库略有不同。

例如删除功能:

iOS-左滑删除居多

Android-长按删除居多

Windows-(很久没用了,我不记得了)


接下来,将整理一些以样机尺寸设计时,各系统关键组件在样式、高度上的差异化:



全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票