iOS7 APP界面设计教程第一章《为iOS7的规范而设计》及统一设计规

iOS7系统界面和按钮平面化突显,内置应用图标、解锁画面、主屏幕、通知中心等界面更多地采用极简元素和新的调色方案,苹果核心复杂立体的真实“拟物”风格完全

iOS7系统界面和按钮平面化突显,内置应用图标、解锁画面、主屏幕、通知中心等界面更多地采用极简元素和新的调色方案,苹果核心复杂立体的真实“拟物”风格完全已被削弱,包括之前的皮革、阴影、木质等设计元素也进行了大大弱化,系统界面更简单、更干净了。

为iOS7的规范而设计

遵从:新UI更好的帮助用户理解内容并与之互动,但却不会分散用户对内容本身的注意力。
清晰:各种大小的文字易读,图标醒目,去除了多余的修饰,重点突出,很好地突显了设计理念。
深度:视觉层次和生动的交互动作赋予UI新的活力,不但帮助用户更好的理解新UI的操作并让用户在使用过程中感到惊喜。

如何入手设计呢?必须按照以下的方式进行:

首先,去除了UI元素让app的核心功能呈现的更加直接并强调其相关性。
其次,直接使用iOS7的系统主题让其成为app的UI,这样能给用户统一的视觉感受。
纵观全局,以内容和功能为核心来指导设计,从前的设计模式可以先放到一边。

APP界面设计统一设计规范:
APP界面设计规范指导APP设计过程中的设计标准。根据统一的设计标准,使得整个APP在视觉上统一。提高用户对APP的产品认知和操作便捷性。

APP界面设计统一规范的重要性:
统一的标准,一、便于在设计过程中的团队合作,二、提高用户对APP的产品认知和操作便捷性。

APP界面设计统一规范大概内容:
1.遵循统一的准则,确定标准并遵循;
2.颜色使用恰当,遵循对比原则:色彩标准、色彩对比,突出内容、显示测试;
3.光标、图标和指示图片、地图等:统一的构图布局,色调、对比度、色阶和风格;
4.Font:中文采用宋体,英文采用Microsoft Sans Serif。大小:MSS字体8磅,宋体小五号字(9磅)五号字体(10磅);
5.文字表达:在提示信息、帮助文档中的。用词、修饰及标点符号等等;
6.控件风格、布局;
7.布局的顺序:从左到右,从上到下;
8.快捷键、弹出菜单;
9.用户交互:按钮状态、弹出窗口位置、执行动作提示信息(视觉和听觉,甚至的触觉的);
10.联机帮助:HELP文档。

ios7-redesigned-icons-psd css-ios7-icons

下面是针对iOS7 APP界面设计的一些人机交互方面的总结:

1、以内容为核心

2、充分利用整个屏幕。无需使用边框、底图等等多余的UI元素,让内容扩展到屏幕边缘。

3、尽量减少视觉修饰和拟物化设计的使用。

UI面板、渐变和阴影有时会让UI元素显得很厚重,致使抢了内容的风头。应该以内容为核心,让UI成为内容的支撑。

4、尝试使用半透明底板。半透明的底板可以让用户看到后面的内容,在某些场景下起到了上下文提示的作用,另一个角度上来说,也让用户(比以前)看到了更多内容。

5、保证清晰度。 保证清晰度是另一个方法,以确保你的app中内容始终是核心。

6、大量留白。空白让重要内容和功能显得更加醒目。此外,空白可以传达一种平静和安宁的视觉感受,它可以使一个app看起来更加聚焦和高效。

7、让颜色简化UI。一个主题色——比如在记事本中使用的黄色——让重要区域更加醒目并巧妙地表示交互性。这同时也给了一个app一个统一的视觉主题。

8、通过使用系统字体确保易读性。iOS7的系统字体自动调整行间距和行的高度,使阅读时文本清晰易读,无论用户选择何种大小的字号都表现良好。
9、使用无边框的按钮。按钮名称、箭头以及系统颜色向用户展示了交互元素,这些内容替代了原先的带有形状的按钮。联系人界面使用了系统色蓝色箭头文字展示了按钮的导航性。

10、用深度来体现层次。iOS7经常在不同的层级上展现内容,用以表达分组和位置,并帮助用户了解在屏幕上的对象之间的关系。

 

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

25学堂今天跟大家分享12张精美的移动模型素材分享,这12张素材你可以应用在你的移动APP项目当中或者是APP官网设计当中,顿时让你的作品高大上!下面的这12张移
如今再来看扁平化APP设计,还是那么的简洁漂亮!最重要的是扁平化的移动APPUI界面简单实用,对移动设计师来说,...最近,25学堂将会推出很多漂亮的移动APP应用模板(框
有创造性的APPUI设计往往可以大幅度提升用户体验的。那么好的移动APP设计干货和APP设计规范也是新手们的渴求的干粮。25学堂秉着分享和共同学习的原则,收集了
移动APP项目名称:易配货APP 2.0移动APP项目背景:易配货是传化物流产业集团为货主与司机打造的物流信息交易平台,基于诚信会员体系和移动互联技术,为会员
iOS切图神器,我想大家都不会很陌生啦,Cutterman也是目前移动端设计人员用的比较多的一款切图工具。还有25学堂之前推荐的在线切图工具和PS切图插件推荐等。
今天25学堂的小编跟大家分享一个国外优秀的图标字体酷站,也是一个在线编辑的SVG图标素材的酷站-SmartIcons.coSmartIcons 网站是一个提供了1500+个顶级图标和内建多种