当前位置 > 主页 > 万和大讲堂 >


UI设计师必备技能 南京UI培训告诉你

2016-03-31 09:45

  手机端用户界面设计中你是否会遇到一些问题?手机屏幕小?用户体验不好?今天南京UI培训为你搜集了手机界面设计几个需要注意的点,快来补课吧~


  1.交互设计规则适应手机端


  “不要因为你的屏幕空间小而认为好的交互设计规则不适用。”


  南京UI培训在设计前先和大家回顾下交互设计的五大要素:


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


  ② 可用性(Usability):这一点看起来有些空,但你的应用程序必须是可用的。如果用户认为你的app很复杂,那么他们肯定不会从App Store下载。可用性会让产品变得有用,这也是成为希望的第一步。


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


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


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


  这五大要素是你着手设计前应该考虑的基础。


  2.用户群是谁?


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


  下面是UX设计过程中强调的三个基本策略:  南京UI培训


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


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


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


  3.原型图是必须步骤


  “设计和研究工作并行。例如,您可以基于你了解到的东西快速地勾画出的用户流程。在定稿之前,创建一个简单的原型。它没有被任何幻想——你的原型可以在纸上完成,这样可以开始了解用户使用的内容和行为的流程。”



  在勾画原型之前,用书面大纲的形式先表现可以帮助你更清楚的摸索最重要的部分——内容。在内容基础上建立流程能让你对页面的总数有一个更精确的评估。



  接下来,你可以为app每一页流程都绘制一张草图。然后将纸上的草图剪出来形成纸上原型,或用工具(例如:UXPin)生成数字原型。


  在这一过程中,大纲可以帮助您快速了解不同页面的流程;草图将APP的布局和结构的详细信息融入流程中;最后,快速原型可以帮助你测试这些用户的想法。  南京UI培训


  4.熟悉的模式用起来才方便


  “手机端设计会围绕着许多设备具体的细微差别,如拇指的位置和方位和姿势。看一些流行的界面设计并且学习一些常见的移动端界面模式,熟悉的模式让你为创建一个“有家的感觉”的用户界面。”


  我不建议你照搬别人的设计,使用常见UI模式更像是可用性的基础,然后再结合你自己的创造力。这样你会确保你的app的设计不仅符合用户的期望而且也不会感到无聊。


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


  ② 动画:加入动作能使用户专注于用户界面。元素消失与元素滑出的视线也是有差的,前者是缺失;后者是之后还可以供用户使用。当动画与手势相结合,又有了更深度的体验。



  手机的交互模式更有助于选取通用界面元素的布局。例如,导航按钮在屏幕的底部比在顶部更方便用户用拇指点击。


  (Yelpapp)


  Yelp app是一个很直观的移动交互设计的例子。这款应用程序非常简洁,美观,按键大,很清楚得表达他的目的。所有按钮很清晰,易于用户理解。而且Yelp使用一些常见的移动用户界面模式,如你在很多应用的看到的底部的工具栏的模式。


  说到文字南京UI培训来分享一些技巧:


  ① 积极的短语标签让用户有欲望点击。


  ② 重要的话必须先出现。移动端的用户容易急躁,所以用“全名”而不是“名称(全称)”。


  ③ 措辞必须一致,并在每屏的风格也要差不多。


  检查出库capptivate用户界面,并使用您的接口优秀的界面示例,将所有的手势,动画,和移动设计文本的细微差别。找一些好的界面模板看一下它的手势、动画、移动文本的细节差别,多做一些搜集,选取合适的用在你的设计中。


  5.要考虑到手指粗的用户


  “手指比鼠标下的像素要厚得多,所以你要注意手指友好的设计。具体来说,给用户指尖留有足够的空间。如果你的按钮太小或太紧密,用户无法准确(会增加挫折而遗弃)挖掘他们。”


  南京UI培训分享几个按钮和其他触摸设计的技巧:


  ① 我们拿手机的方式不同。大概有三种方式拿的电话:一个拇指/一只手,两只手/一位,两只手/两个大拇指。而且也有不同的方式来拿平板电脑,但用户大多是按住一侧片。


  ② 我们的手指都很胖, OK,这不是真的: 手指约有45-57像素宽,这是比大多数推荐触摸尺寸都大。例如,苹果公司建议约44像素的正方形目标。


  44像素的准则也并不总是如此。你想设计成多大事你的事,不过,你应该考虑人的手指及他们如何与app进行交互来设计。


  6.渐变和阴影依然存在


  “扁平化是现今的设计趋势,但是,这并不意味着阴影和渐变都没了。他们已经又慢慢回到他们的设计方式。可以看看谷歌的Material Design,了解他们是如何做一个强势复出。”


  当设计按钮,切换等视觉效果,你必须考虑使用阴影。正如我们看脸上五官下的小阴影,UI元素下有会有阴影。”阴影,通过扩展梯度,使UI设计更自然的呈现给用户。您可以使用阴影和渐变创建3D按钮和输入形式框,使元素出现嵌入和扩展的效果。  南京UI培训


  我们来看下相关的元素


  嵌入式元素:


  ① 未按下按钮


  ② 滑块按钮


  ③ 下拉控件


  ④ 选择单选按钮


  ⑤ 弹出窗口


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


  以上是南京UI培训跟大家分享的几点UI设计小知识,身为设计师的你,新技能Get到了么?也希望日后大家能多多补充自己的思维模式和设计方法的相关知识。


  想和兴趣相投的朋友们一起交流吗?那就来江苏万和计算机培训中心吧。江苏万和作为专业的南京UI培训中心,还会定期邀请知名企业的高级UI/UE设计师,项目经理为学生做经验分享会,参与到国内各大UI设计圈沟通交流群,让更多的UI大咖成为你的人脉朋友。


最近开班 more>
  • Python基础班
  • Java全栈开发
  • 前端基础班
  • 软件测试
  • 云原生精英班
  • 云网预科班
  • CISP
  • HCIE-Datacom(HCIA,HCIP基础)
  • HCIP-Datacom(HCIA基础)
  • HCIA-Datacom(0基础)
  • HCIE-Datacom(HCIA,HCIP基础)
  • HCIP-Datacom(HCIA基础)
  • HCIA-Datacom(0基础)
  • OCM 12C
  • OCP 19C
  • RHCE 9.0
  • 随时开课
  • 12月26日
  • 随时开课
  • 12月4日
  • 12月16日
  • 12月9日
  • 12月21日
  • 1月6日
  • 12月30日
  • 12月16日
  • 12月21日
  • 12月7日
  • 12月7日
  • ——
  • 随时开课
  • 12月16日
    • 姓 名 :
    • 电 话 :
    • 课 程 :

技术交流群

  • Java大数据交流群560819979加入
  • Python技术交流群595083299加入
  • Oracle技术交流群595119011加入
  • Web前端技术交流群604697610加入
  • Huawei技术交流群482919361加入
  • Redhat技术交流群587875348加入
  • UI设计技术交流群511649801加入
  • Cisco技术交流群596886705加入
  • IT运维技术交流群605888381加入