UI实战教程!做设计稿前应该做哪些准备工作? - 优设-UISDC

UI实战教程!做设计稿前应该做哪些准备工作?

2017/07/06 6798评论区

前面几篇讲了《一款APP设计的从0到1》这些系列文章,总共6部分,目前为止已经讲了前4个部分,还剩下视觉还原和上线准备篇,今天插播一下关于APP设计时该做的准备工作和一些设计师必须要知道的UI常识。

往期回顾:

  1. 《从零开始做APP 系列之项目立项+预估时间篇》
  2. 《从零开始做APP 系列之界面设计篇》
  3. 《UI实战教程!从零开始做APP 系列之切图标注篇》

一般来说,移动UI界面设计包括两个方向,分别是图形(视觉)设计和交互设计:

  • 视觉设计主要负责这个UI看起来是否美观,是否有设计感等等。
  • 交互设计主要负责这个UI用起来顺不顺手,上手容不容易等等。

更重要的是移动APP UI 设计的魅力在于,你不仅需学会使用一些合适的技巧,更要有效的理解用户与程序的交互关系。一个有效的用户界面关注的是用户目标的实现,包括视觉元素与功能操作在内的所有东西都需要完整一致。

一. 如何进行一些基本的准备工作?

  • 一定要玩机器,玩APP。包括iOS、Andorid、ipad、watch等等智能设备。
  •  熟悉各个平台的界面设计规范。
  • 学会欣赏几款不错的APP设计或者是好的APP设计模板。
  • 无论是你设计多大尺寸的UI,一定要有一台测试机也就是说必须真机测试。
  • 将review做为移动UI工作的一个阶段。(备注:review就是评论、反馈的意思。这就是说,我们移动APP UI设计完成一些模块之后,一定要进行阶段性的评审和总结,修改、反馈。)
  •  培养一个靠谱的程序小伙伴。向一些有经验的客户端程序员学习和了解更深的设计规范。

二. 必须了解的一些APP UI设计原则

UI设计的一致性

用户来到你的APP,脑子里会保持着一种思维习惯,你的 UI 需要保持一致,以免用户的思维方向被打乱。

UI设计的流畅性

你应当分析一下,自己的站点是否容易导航。用户应当可以自由掌控自己的浏览行为,确保他们能从某个地点跳出,能够毫无障碍地退出。不会让你的用户在你的设计作品当中迷路。

UI设计的群体特征

要设计有效的移动 UI界面,必须对你的用户群有所了解,不同的用户阶层对不同的设计元素有不同的理解,17~25 岁年龄段的人,和 40~55 年龄断的人有不同的喜好。

UI设计的简洁性

UI 设计越简单,用户体验越好,不要滥用设计元素,不要使用拥挤的界面。目前来说,很多手机APP设计的非常简约,简约设计可以增强 UI 的易用性,可以让用户不必关心那些无关的信息。

UI设计交互要合理性

最好的设计不是用来看的,是用来体验的。如果交互做的很差,谈何体验。而且不要混杂多种交互效果在一个页面,会让用户感觉太“刺激”而反感。

三. 设计师必须要知道的一些常识

我觉得设计师都应该要知道一些公司其他部门的工作内容,起码找人讨论不会抓错对象。本文整理出较常见的各种缩写和定义。主要是给设计师看的所以简单说明,想深入理解可以参考 SA 、 SD 、 RD 、 PG 、 PM 、 DBA 、 MIS (自备梯子)这篇和 Wiki,网络上也有许多文章介绍各个职务的工作内容。

PM:Product Manager 产品经理

针对某一项或是某一类的产品进行规划和管理的人员,主要负责产品的研发、制造、营销、渠道等工作。(管进度、各部门沟通协调、被客户骂、和程序各种撕)

SA:System Analyst 系统分析师

通过需求分析确认系统的需求,并进而形成系统产品设计的人。 通常他们也会涉及可行性评估、项目管理、开发前评估、需求验证等工作。(简称:这个系统要做什么?)

SD:System Designer 系统设计师

根据领域模型,再配合实体的平台,考虑其效能、稳定、分散与安全性等,所建构而得的软件规格。(简称:这个系统要怎么做?)

PG:Programmer 程序设计师

从事软件撰写,程序开发、维护的专业人员。以某种程序语言为工具,给出这种语言下的程序。包括分析、设计、编码、测试、排错等不同阶段。(最常被叫做码农或程序猿的职业。)

RD:Research & Development engineer 研发设计工程师

广义:是一种工作类型,凡是研究或开发的人员都算,包含 SA、SD、PG。

狭义:真正在作研发的单位,搞创新,很烧钱,还不能确定产出。

MIS:Management Information System 网管人员

工作范围包含利用计算机硬件、软件和网络装置,进行讯息的收集、传递、储存、加工、整理的系统,以提高组织的经营效率等等。(俗称管机器的,大至主机断线小至个人计算机蓝白画面四国语言都会出动他们。)

QA:Quality Assurance 质量保证工程师

通过建立和维持质量管理体系来确保产品质量没有问题。

QA的目的,是要在产出产品的过程中,使用正确的方法来进行,而 QC 的作用,则是当产品完成时,会去检查所产出的产品是否正确。

Planner:企划

负责构思目标、分析现况、归纳方向、判断可行性,一直到拟订策略、实施方案、追踪成效与评估成果。(如果懂技术和实作会让很多人不用加班加到死。)

Sales:业务

专门做销售营销的工作者,负责将公司之产品销售给客户。(某些时候要把产品卖掉会夸大其词,然后实作人员就哭了。)

F2E:Front-End Developer 前端工程师

主要负责写 Html、CSS、Javascript,接 API…等等。(要和设计师合作、常常想翻设计师的桌,偶尔会拿到 PS 直出的 HTML,比表格排版还惨…基于上述原因,切图常常变成是 F2E 的工作。)

UX/UE:User Experience Designer 用户体验师

设计流程包括:目标用户设定,满意度的范围和主题设定,用户需求的功能,互动研究,系统回馈和最终的报告与成果。(应该是整天和数据玩、做实验、写报告的一群人,不过都大多抓去画 Flow 和 Wireframe。)

UI:User Interface Designer,用户界面设计师

应该是画 Flow 和 Wireframe、设计接口的人。(常常和 VD、UX 混在一起讲,能明确定义并区分的人和公司很少。)

VD:Visual Designer

拥抱Photoshop、Illustrator、Sketch…绘图软件的人,退件修改和熬夜是基本。

希望这篇文章大家可以学以致用。

因为设计师不是艺术家,不像搞艺术的那么随性。因为设计师设计的产品是给人们用的,关乎每个使用者的感受。艺术家不用考虑观者的感受,只管倾述自己的内心世界并充分展示个性。设计师注定背上神圣的使命——设计,让生活更美好。

最后,附上完整的APP设计和开发流程:

项目启动→建立产品原型→形成效果图→进入研发阶段→研发成功后进入测试阶段→测试过后将问题反馈给研发人员进行调整-→多次测试确认没有bug。

欢迎关注作者公众号:UI妹儿

「从零开始设计App 之UI规范系列」

  1. 《一份超实用的设计规范制定指南》
  2. 《实用必收!如何建立一套UI设计规范?(附众多神器)》
  3. 《基础小课堂!从零开始教你做高保真原型图+UI 设计规范》
  4. 《UI丨历经实战,我总结了这四个界面设计规范的经验》

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/ui-design-plan-work

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 海报设计 设计理论 神器下载 字体下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里