如何成为手机ui设计师

　　一个成熟的设计规范，一定离不开精确的经过多次调试的数据。一个优秀的手机UI设计师，必定也是从一个普普通通的UI设计师慢慢转变的，经手过大大小小上千上万个设计才能积累下丰富的设计经验，才能根据需求快速设计出满意的作品。小编带大家来学习一下手机UI设计的相关知识。

　　挑战和制约：每个媒体都有它的局限所在。即使是在移动端这个充满机会、自由和创意的平台上也有着许多亟待解决的问题，和无法回避的局限性。
 

　　碎片化的移动端：不同的智能终端不仅仅尺寸不尽相同，而且因为分辨率的差异使得屏幕的像素密度也有很大差异，往细了考虑，这些终端的输入机制、屏幕比例、屏幕方向都会影响到移动端的UI设计。移动端的网页设计可以借助响应式设计保证不同屏幕下的浏览体验，相比之下移动端的APP设计则相对缺少流动性。所以，作为移动端的UI设计师，还是需要考虑屏幕差异造成的布局设计的不同以及用户体验上的变化。
 

　　分裂的操作系统平台：每个操作系统都有它们自己的一套设计规范，交互方式，程序接口，而随着操作系统的版本更新，这些东西也都有着各自的变化。
 

　　设计和构建一个APP的方式会直接影响到它的性能。手机里安装的程序如果设计的好可以你的手机可以待机一天半，而如果其中有一个程序设计的有问题，会让你需要出门多带一个移动电源。一些不必要的转场动画可能会让你的CPU为之进行密集地运算，一段存在问题的JS代码可能让你的浏览器耗费多于平常数倍的电量。设计和开发，都会影响到APP的性能，甚至左右手机的续航。
 

　　抛弃思维定势
 

　　学校教育和实际设计开发上的“时代差异”，让很多设计师对数字化的互联网的认知稍显“静态”，甚至形成某种思维定制，对于移动互联网也知之甚少。在这个信息爆炸的时代，激烈的竞争催化下的移动互联网正在以一种恐怖的速度演化、推进，这使得设计师们需要紧跟发展的步伐，随时更新升级自己对于互联网的认知。
 

　　从构思屏幕布局到考虑界面转换
 

　　当涉及手机UI设计的时候，单单考虑屏幕布局是远远不够的。优质移动APP向我们证明了界面间的转场动画到底能让一个UI界面产生怎样的张力。而Android L所用的Material Design则更是在看似普通的静态界面之后，隐藏了一系列让你欲罢不能的过度效果。界面转换之间的动效，在过去只为博得一笑，今天却正在走向主流，成为移动端的用户体验的核心。它正在成为交互和界面的重要元素，赋予界面以韵律和生命力。动效不仅呈现运动的过程，还能表现出空间、层次，变化，在基础的界面结构上为用户带来截然不同的体验。
 

　　你不需要将界面做独特或者原创，尤其是当你是为了独特而重新设计所有的界面，然后让整个产品为独特而担上风险。很多时候，坚持使用原生UI元素和模式是让应用能按时出货的重要保证。比起强行推动独特原创的设计，很多时候更合适的做法是打造简单高效的交互界面，创造真正的品牌价值。
 

　　然而，想要学习手机UI设计新技能需要：
 

　　了解平台：正如同web设计师需要了解HTML/CSS一样，作为移动端UI设计师的你应该了解移动端APP的架构。首先移动端开发的语言和网页设计就不太一样，各个不同平台有着各自的编程语言和接口，界面的构成也无法使用CSS和标签来实现。深入阅读官方的开发文档，明白APP的构成，编译方式，发布方式，了解设计的规则。这些东西不仅关系到你的应用开发好坏，还会影响系统的稳定性，电池续航长短等多种因素。
 

　　了解移动端的技术构成：了解位置服务(wifi，GPS等)，蓝牙(低功耗蓝牙技术)，信号，前后摄像头，麦克风，陀螺仪，位置传感器，加速度传感器，指纹扫描仪(iPhone 5s)，眼动追踪技术，语音识别，人脸识别，等等等等。每一个新技术的背后以为着应用程序更多的可能性，交互设计、使用体验，甚至商业模式。
 

　　发掘本地UI组件的开发潜质：每个移动操作系统中中总有着大量的本地UI组件，他们有着极大的自由度，方便你进行定制。你需求确切地知道他们的特征(尺寸，大小，功用)，你可以为与你合作的开发者节省大量的工作时间。
 

　　了解移动端的工作流程：安装SDK并运行，了解移动开发框架，比如TubyMotion、Xamarin、Titanium。熟悉集成开发环境，因为这其中包含了移动开发所需的方方面面。
 

　　了解移动端的界面模式：三大移动平台之间，有着相似之处，但是在深入探究他们的交互设计，会发现它们在理念上的巨大差异。作为一个设计师，你需要明白这些差异所在，以及它们是如何体现在实际案例中的。
 

　　记录并解释你的UI设计：考虑到屏幕截图并不足以表现UI全部的特性，你需要学会记录界面不同的状态、转变过程、转场动画等信息，并且学会记录界面对于不同状况的反馈。
 

　　在设计阶段践行精益UX设计：一个现代的设计师应该是具备战略眼光的设计师。你的目标不能局限于闷头制作漂亮的界面，你应该让你的设计与团队合作结合到一起，切合项目需求。洞悉用户深层次的需求，并且能快速地随之反馈到设计上。将设计作品保存下来并附上详细的说明，确保所有的设计都与核心理念保持一致，与用户需要保持一致。
 

　　在开发阶段采用敏捷UX设计：你不能只将高保真的模型交给开发者就了事，因为在开发过程中会不断提出新的需求。总会有之前考虑不周全的情况，需要在开发阶段进行补充完善，设计师需要随之进行快速响应。所以，在这个阶段，设计师真的需要坐在开发者旁边应付突发情况。确保开发者在碰到新的需求的时候，不用他们自己来补充UX的细节，或者再来找设计师。
 

　　手机UI设计的小技巧
 

　　响应式设计：在移动端，响应式设计并非是放之四海皆准的解决方案。有时候它非常适用，但是有的时候并非如此。你有责任考量什么时候采用专门的解决方案，什么时候需要做响应式设计。
 

　　谨慎使用CSS和JS：CSS动画，渐变，阴影都非常赞，也非常容易实现。视差网页看起来也很酷，很多设计师都对此感兴趣。但是这些元素都非常消耗资源，对移动端的浏览器会产生很大的负荷，进而影响电池续航。适度控制CSS特效和JS动效都是很有必要的。即便低性能手机上浏览器可以良好地支持CSS3选择器，但是性能的瓶颈会让整体体验非常差。
 

　　像素密度
 

　　大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。像素密度这项指标是连接数字世界与物理世界的桥梁。
 

　　Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指最末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。
 

　　倍率与逻辑像素
 

　　以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480x800和1080x1920，它们分别属于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320x533和360x640。即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。真正决定显示效果的，是逻辑像素尺寸。单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。
 

　　无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面。
 

　　实际应用
 

　　要把单位设置成逻辑像素。打开PS的首选项——单位与标尺界面，把尺寸和文字单位都改成点(Point)。这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它;调节倍率，则通过图像大小里的DPI来控制。这个DPI，其实就是PPI，像素密度。有个常识大家都知道，屏幕上的设计DPI设成72，印刷品设计DPI设成300;由于1英寸是固定长度，每1英寸有多少个像素点决定了画质清晰程度，DPI达到300以上，其细腻程度就会给人真实感，像真实世界中的物件。最早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上显示的尺寸和打印尺寸相同，便于设计。
 

　　移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。
 

　　交互设计规则适应手机端
 

　　交互设计的五大要素：
 

　　目标群设计(Goal-driven Design)
 

　　为你的目标用户群做设计。像调研或者访谈形式的用户研究，能帮助你塑造目标用户群的人物特征。这可以让你为用户目标定制app的工作流程，以满足他们的需求。
 

　　可用性(Usability)
 

　　如果用户认为你的app很复杂，那么他们肯定不会从App Store下载。可用性会让产品变得有用，这也是成为希望的第一步。
 

　　功能与标识(Affordance & Signifiers)
 

　　标识是功能的提示作用。比如，带下划线的蓝色文本的显示，你会知道点击它会跳转到别处 。使用正确的标识，让用户不用花费时间去考虑每个UI元素的用途。
 

　　易学(Learnability)
 

　　你希望用户本能的知道如何使用的界面。这是设计模式的用场，在后文中我们将会说到。熟悉的模式能够让用户很容易地适应新的app。
 

　　反馈与响应时间(Feedback & Response Time)
 

　　反馈让用户知道一个任务完成与否。它可以是一个很简单的蜂鸣声，又或是复杂一点的模态窗口。请确保您的意见是友好的，人性化，并通过尼尔森诺曼集团规定的时间内指导响应。
 

　　用户群
 

　　屏幕尺寸不是手机设计中的唯一约束，用户也形成了界面约束的基础，所以，在创建针对目标群app的第一步是要了解你的用户。

　　UX设计过程中的三个基本策略：
 

　　角色
 

　　角色是从你的目标用户的预期行为塑造虚构人物，它将帮你决定app需要什么来运营。
 

　　用户场景
 

　　场景会模拟用户会干什么。随着用户场景，你就可以设计出最适合他们的UI以及他们的想要达成的效果是怎样。
 

　　体验地图
 

　　在这里你可以了解所有的单一交互中的会出现的条件。体验地图绘制的每个步骤都是用户在APP中可能经历的。它可以帮助你了解所有步骤发生时用户的情感和周围的情况。
 

　　原型图
 

　　在勾画原型之前，用书面大纲的形式先表现可以帮助你更清楚的摸索最重要的部分——内容。在内容基础上建立流程能让你对页面的总数有一个更精确的评估，接下来为app每一页流程都绘制一张草图。然后将纸上的草图剪出来形成纸上原型，或用工具生成数字原型。大纲可以帮助您快速了解不同页面的流程;草图将APP的布局和结构的详细信息融入流程中;快速原型可以帮助你测试这些用户的想法。
 

　　两种常见的交互设计模式：
 

　　手势
 

　　触摸设备的定义由手势决定。触摸，滑动，双击，捏和缩放正在成为用户的第二自然反应。
 

　　动画
 

　　加入动作能使用户专注于用户界面。元素消失与元素滑出的视线也是有差的，前者是缺失;后者是之后还可以供用户使用。当动画与手势相结合，又有了更深度的体验。手机的交互模式更有助于选取通用界面元素的布局。
 

　　渐变和阴影
 

　　扁平化是现今的设计趋势，但不意味着阴影和渐变都没了。当设计按钮，切换等视觉效果，你必须考虑使用阴影。通过扩展阴影梯度，使UI设计更自然的呈现给用户。您可以使用阴影和渐变创建3D按钮和输入形式框，使元素出现嵌入和扩展的效果。
 

　　我们来看下相关的元素
 

　　嵌入式元素：输入字段，按钮触动，滑块轨道，未选中的单选按钮，复选框。
 

　　外显元素包括：未按下按钮，滑块按钮，下拉控件，选择单选按钮，弹出窗口。
 

　　看过扁平化设计趋势的现在与未来，使用半扁平化设计解决嵌入和外显元素会更为安全。
 

　　分享四款UI设计师手机上必装的几款配色参考APP。
 

　　Palette — 一款设计爱好者会喜欢的取色 APP (Android)
 

　　Palette 的中文意思调色板。它能够将一张图片里的突出颜色和颜色代码提取出来，从而方便你学习其中的配色方案以及获得配色灵感。主要功能是取到一张图的色彩，然后返回一系列颜色，可供我们选择设置我们的文本颜色，背景颜色，从而达到界面的一致性。很适合插画师和前端工程师快速提取颜色搭配代码的一款安卓APP。
 

　　Pixolor — 一键拾取屏幕色彩，设计师高效工作利器(Android)
 

　　Pixolor 是一款 Android 平台下的屏幕取色应用,它能够在屏幕上悬浮一个圆形放大镜,其中包含颜色信息与像素坐标。Pixolor 可以精确地查看手机图片对应的像素的颜色，它有一个浮动在屏幕上的取色盘用来获取色彩信息和像素信息，以后不用担心手机图片上传到电脑会失真。
 

　　RealHex (iOS)
 

　　RealHex 作为一个拾取颜色并记录颜色参数值的应用，不仅仅是设计师，画家，摄影师的专利，任何人都可以创造性地使用它。大自然的世界具有天然的和谐配色：选取一处风景，对景物取色，形成的配色方案可以运用在平面设计，室内设计，网页设计中，相比去配色网站寻找现成的配色方案。
 

　　FABRIKA – 自制装饰艺术(iOS)
 

　　Fabrika 并不算是一个纯粹的配色工具，同时FABRIKA也是一款专门设计制作壁纸的APP, 它的色彩选择和搭配功能特别好，所以将它推荐给设计师或插画师。可以把它当做是一款风格特异的绘图软件，双击空白画纸即可选择图案的色板，继而再选取图案的形状，可以同时选择多种。
 

　　学会软件技能从来都不是目的，都是为了设计出满意的作品，在一些便捷快速绘图的软件的帮助下，不只是手机UI设计师，所有的UI设计师，都有了更多思考的时间，更多的用思维考虑与用户之间的关联，怎么设计出用户需要以及满意的作品，能得到用户的认可才是对一个作品好不好的最好证明。