集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > UID >

成都界面设计培训机构:从ios界面设计原则看设计

发布者: 成都达内     浏览次数:     发布时间:2019-11-18 13:31:24

不知道平时做iOS端界面设计的同学有没有一些困惑,就是在做完一个自己还挺满意的界面时给身边的人看,总是会听到不同的声音,褒贬参半,这种时候是相信自己的审美?还是听取别人...

  不知道平时做iOS端界面设计的同学有没有一些困惑,就是在做完一个自己还挺满意的界面时给身边的人看,总是会听到不同的声音,褒贬参半,这种时候是相信自己的审美?还是听取别人的建议?或是把各种方案糅合在一起?或许可以从iOS的界面设计原则的角度来看一下自己的视觉稿。

  成都界面设计培训机构分享ios界面设计原则中最先阐述的就是以下三条:

  清晰(Clarity):纵观整个系统,任何尺寸的文字都清晰易读,图标精确易懂,恰当且微妙的修饰,聚焦于功能,一切设计由功能而驱动。留白、颜色、字体、图形以及其它界面元素能够巧妙地突出重点内容并且表达可交互性。

  遵从(Deference):流畅的动效和清爽美观的界面有助于用户理解内容并与之交互,而不会干扰用户。当前内容占据整屏时,半透明和模糊处理能够暗示其它更多的内容。减少使用边框、渐变和阴影让界面尽可能地轻量化,从而突出内容

  进深(Depth):清楚的视觉层和生动的动效表达了层次结构,赋予了活力,并有助于理解。易于发现的且可触发的界面元素能提升体验愉悦感,让用户在成功触发相应功能或者获得更多内容的同时还能掌控当前位置的来龙去脉。当用户浏览内容时,流畅的过渡提供一种纵深感。

  可见这三条原则是我们在做ios产品时最基本的也是最重要的原则。其中清晰原则放在了第一条,则是重中之重,现在我们可以先根据这些原则审视下面这些产品的界面。

  成都界面设计培训机构:从ios界面设计原则看设计

  1.清晰&遵从

  最左侧图片为“单读”app中二级类目选择页,旁边是同类型产品“片刻”的二级类目选择页,他们采取的设计表现形式很相似(都是在图片上覆盖半透明效果再叠上文字信息),但是给人的视觉感受却大相径庭。

  左侧页面的标题字号大小舒适,字体也有别于其他同类型产品,增强了品牌辨识度,并且类目之间分隔清晰,不会给人凌乱感。

  中间页面的类目分隔感较弱,紧贴在一起稍显凌乱,而且标题与辅助文字都过小,识别度较差,再加上此页面在iphone 7p设备上

  都需要滚动6屏左右的长度,令人倍感焦躁。

  在ios界面设计的三大基本原则之下,主要以动效、品牌化、颜色、布局和字体5个方面作为设计的着力点和出发点。以下将逐个进行介绍:

  1. 品牌化

  a. 优秀的app通过优雅别致的文字、颜色和图片来营造独特的品牌辨识度。

  b. 不要让品牌化阻碍了优秀的应用设计。保证它是直观的、易于导航的、易用的并且以内容为中心的。

  c. 内容比品牌化更重要。不要为了增加品牌曝光就牺牲了用来浏览内容的空间。

  2.颜色

  a. 在iOS,颜色能够暗示可交互性、增加活力以及提供视觉的连续性。保证这些颜色无论是单独还是组合、在浅色背景还是深色背景上都看起来很棒。

  b. 考虑在app中统一使用一种关键色来暗示交互性。避免给可交互和不可交互的元素使用相同的颜色。否则用户就很难知道到底哪里是可点击的。

  c. 在多种光线条件下测试你的app的颜色方案。以求在大多数的使用场景下提供最好的视觉体验。

  d. 使用足够的颜色对比度。避免图标和文字跟背景分不开

  成都界面设计培训机构:从ios界面设计原则看设计

  3. 布局

  a. 内容是你的最高使命。一般来说,具有相似功能的元素应该看起来相似。

  b. 利用视觉权重和平衡来表示重要性。大的对象能够抓住人的眼球,也更易于点击,一般来说,把首要的对象放在屏幕的上半部分并且放在偏左的位置 ——处于从左往右的阅读环境时。

  c. 缩进和对齐还可以表明多组内容之间的关系。

  d. 为可交互元素提供足够的空间。尽量让所有控件都有不小于44pt x 44pt的点击区域。

  4. 字体

  iOS的系统字体英文是San Francisco[SF UI Text (用于19p及以下大小的文本)和SF UI Display(用于20p及以上大小的文本)]中文为苹方。此款字体较之前的Helvetica和黑体-简整体显得更为圆润,让阅读变得更加容易,这对于大屏趋势来说显得更为重要。

  以上是对ios设计原则的粗浅的研究,纵观ios近几年的产品迭代,越来越注重效率,甚至会因此而折损视觉效果,设计师很难单纯从视觉角度提升产品的整体品质,更多的要在交互逻辑上下功夫,这将是接下来对ui设计师最大的考验。最后我想说的是:用户的需求是感性的,我们在做产品时要经常换位思考,多方权衡,不应生搬硬套这套原则。

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56