`
wenqxin
  • 浏览: 13503 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

移动应用UI设计规范

    博客分类:
  • ios
阅读更多

今天回头看看设计文档,回头复习一下,然后对比自己的App,发现有好些条在开发阶段都贯彻得不彻底。

iphone 三种设计方案:

  • 效率型:社交、银行、企业应用
  • 应用型:天气预报,地图、打车
  • 侵入型:音频、视频等


设计观念

  • 关注:移动应用的本质就是帮助用户以最高的效率完成特定的应用,少即是多。不要用多多益善的观念来打造移动应用。
  • 独特:与同类产品需要有独特之处。

使用环境:

  • 无聊
  • 忙碌
  • 异地


通用的设计规范:

  •  响应性: 如果用户执行了操作,应用必须立刻作出相应的反馈
  •  细节
  •  拇指
  • 点击目标
  • 内容:直接操控是触屏设备交互模式的根基
  • 控制元素的布局:具有控制功能的元素一般放到页面下方。

导航:

  • 没有导航
  • TabBar 导航
  • 列表导航

输入:

  • 确保针对不同的内容类型使用对应的键盘,提升用户输入的效率
  • 可以为你的应用预先好自动纠错这方面的设置

手势:

  • 无形,需要做合理的引导。
  • 多点触控
  • 锦上添花,即使用户不摘掉

交流:

  • 提供反馈:为用户的每一个交互行为提供即刻的反馈,否则用户会疑虑程序是否发生了什么问题,或是错误的认为自己并没有完成自己想要进行的操作行为
  • 模态对话:主要是alert,非常不友好,尽量少用
  • 确认:当你希望用户对是否要执行某种操作进行确认时,动作表单(Action Sheet)会更加合理一些。相比于警告框,动作表单更像是在上下文当中对用户行为的响应,而不是唐突出现不明状况的东西。

第一印象:

  1. 应用图标
  2. 首次启动


屏幕定向

  • 目前来看默认的也是最主流的屏幕定向方式仍是竖屏。
  • 正如前面提到的,如果你的应用需要用户输入很多文字,那么最好考虑支持横屏视图模式,让人们能使用更宽一些的键盘。
  • 对于内容阅读类的应用,也可以考虑在应用内增加独立的锁屏设置。

 

分享到:
评论

相关推荐

    2024年河北省职业院校移动应用与开发(中职组)样题及赛项规程

    参赛选手依据给定的功能描述,使用Photoshop图像工具软件处理和设计图片,使用Adobe XD进行高保真原型设计,需符合移动应用UI设计规范,同时实现原型界面之间交互的功能。 2.模块B:移动应用前端开发 参赛选手按照...

    术与道 移动应用UI设计必修课

    关于移动端设计,全面分析了移动端的设计规范,为移动端设计提供了书面形式的指南

    《Android UI设计》PDF

    《Android UI设计》面向创建移动应用的产品经理、设计师和开发者,系统讲解了从事Android UI设计必须要掌握的Android平台的主要技术和特性,全面总结了Android UI的设计原理、设计理念和设计模式,并通过一个综合的...

    Android UI规范

    Android UI设计规范文档 1 设计原则 2 风格 2.1 设备和显示 Android 驱动了数百万的手机、平板和其它设备,兼容了各种屏幕宽度和比例。利用 Android 灵活的布局系统,您可以创造出从平板到手机都看起来很优雅的应用...

    移动应用开发的基本流程.doc

    移动应用开发的基本流程是一个涉及多个阶段和步骤的过程,确保从概念到最终产品... 根据设计规范和需求,选择适合的编程语言和开发工具进行开发。 对于iOS平台,常用的开发语言是Objective-C或Swift;对于Android平台

    AntDesign蚂蚁金服APP移动端原型组件.rplib

    Ant Design 移动端设计规范,一个基于 Preact/React/React Native 的 UI 组件库,是 Ant Design 的移动规范的 React 实现,服务于蚂蚁及口碑无线业务。 image.png 特性 基于 Ant Design 移动设计规范。 规则化的...

    中国首个开源 HTML5 跨屏前端框架 Amaze UI.zip

    Amaze UI 开发思路通过拆分、封装一些常用的网页组件,以规范化采用云适配平台开发的移动网站,统一用户体验逐渐形成的。1、语义化 Amaze UI开发遵循语义化原则,意图通过类名(class)等信息直观传达元素的功能角色...

    UI Kitten:基于 Eva Design System 的 React Native UI 库-开源

    用于创建令人惊叹的跨平台移动应用程序的 React Native 框架。 基于设计系统的 UI Kitten 将您的产品从 MVP 带到最终产品版本。 永远开源和免费! UI Kitten 是 Eva 设计系统的 React Native 实现。 该框架包含一组...

    react-native-ui-kitten:基于Eva设计系统暗模式的React Native UI库

    UI小猫UI Kitten是一个React Native UI库,可让您创建出色的多品牌跨平台移动应用程序。 该库基于Eva Design System,在设计和开发过程中带来了一致性和可伸缩性。 它包含一组以类似方式设置样式的通用UI组件。 最棒...

    微信小程序 UI布局常用技巧整理总结

    微信小程序ui设计规范汇总:  微信小程序是一种全新的应用形态,微信小程序平台不需要下载安装即可使用应用的平台,微信小程序实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。  也体现了“用完...

    HTML5移动Web开发指南.pdf

    具有一定HTML基础的UI设计师。 Web项目中的项目经理以及策划人员。 对手机Web开发技术感兴趣的开发者。 开设计算机课程的高等院校及培训机构的师生。 此外,本书也适合熟悉.net、Java、PHP等后端Web技术的开发者阅读...

    专为微信设计的UI库WeUI.zip

    WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库。WeUI 是一套同微信原生视觉体验一致的基础样式库,为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、toast、...

    Axure原型设计元件库,基于Axure RP 10/9/8,支持 Android、Apple、Windows、微信,移动、桌面

    对于元件库的设计,我参考官方的设计规范文档,尽可能不放过任何一个像素的偏差, 无论长度、宽度、转角、颜色。希望你采用了此高保真元件,可以更好地和开发、测试 等团队成员深入沟通。 如果你的团队有 UI 设计...

    assist.network:善意移动应用开发

    商誉移动应用程序和API开发 该API位于后端目录中 移动应用程序位于前端目录中。 我们首先从HTML5开始,以拥有可在其上测试应用程序的可点击客户端。 在第一轮UAT之后,将为Android和iOS创建本地客户端。 项目进度...

    中国电信CRM客户端平台规范

    本规范根据CRM客户端软件的业务需求及发展要求,规范和定义了CRM客户端平台的功能、技术架构,为中国电信CRM客户端软件...提出了系统UI和UE设计原则,针对部署客户端软件后移动应用场景下的外设需求及配置给出了建议。

    Axure RP 8.1.0.3399 WinmacOS 一款专业的交互原型设计软件(UIUX交互原型设计软件).rar

    Axure RP是一种专业的交互原型设计软件,使负责定义需求和规范、设计特性和接口的专家能够快速为应用软件或网站创建线框图、流程图、原型设计和规范文档。作为一个专业的原型工具,它可以快速高效地创建原型,同时...

    Nike-Store-Ui:耐克(Nike)商店电子商务用户界面采用Flutter

    Dribble.com的应用程序设计 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目,那么有一些资源可以帮助您入门: 要获得Flutter入门方面的帮助,请查看我们的,其中提供了教程,示例,有关移动...

    《Android应用开发揭秘》附带光盘代码.

    《Android应用开发揭秘》全部实例源代码,配合《Android应用开发揭秘》使用 前言  第一部分 准备篇  第1章 Android开发简介  1.1 Android基本概念  1.1.1 Android简介  1.1.2 Android的系统构架  1.1.3 ...

    《Android应用开发揭秘》源码

     15.6 AndroidUI优化  15.7 其他优化  15.7.1 zipalign  15.7.2 图片优化  15.8 小结  第五部分 扩展篇  第16章 Android NDK开发  16.1 AndroidNDK简介  16.2 安装和配置NDK开发环境  16.2.1 系统和软件...

Global site tag (gtag.js) - Google Analytics