UI设计UI设计

UI设计初学者应该怎样入门?

2018-03-26  本文已影响9人  UI设计师王晓庆

要学习UI设计,纯粹是喜欢设计,想要自己能设计一点东西,可是不知道应该怎样学起?

UI设计师是什么?很多人都以为只是P图的美工,这里有必要先明确一下UI设计师的概念。

一、UI设计的概念

软件设计可分为两个部分:编码设计与UI设计。UI的本意是用户界面,是英文User和 Interface的缩写。

从字面上看是用户与界面2个部分组成,但实际上还包括用户与界面之间的交互关系。

UI设计分为实体UI和虚拟UI,互联网说的UI设计是虚拟UI,一般是指对软件的人机交互、操作逻辑、界面美观的整体设计。

二、UI设计师

UI”的本义是用户界面,是英文User和interface的缩写。UI设计师简称UID(User Interface Designer),指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。

试听UI设计免费课程大家可以关注微信公众号:UI精品课,回复(试听) 不知道怎么操作的可以联系我。

工作内容:

编辑负责软件界面的美术设计、创意工作和制作工作;根据各种相关软件的用户群,提出构思新颖、有高度吸引力的创意设计。

对页面进行优化,使用户操作更趋于人性化;维护现有的应用产品;收集和分析用户对于GUI的需求。

UI设计师的涉及范围包括商用平面设计、高级网页设计、移动应用界面设计及部分包装设计。

工作经验:

主要从业人员精通Photoshop、Illustrator、AE、ARP等软件;

1. 负责公司产品在智能电视、PC端、移动端页面/应用的整体设计;

2. 基于用户体验、人机交互、图形化设计、界面设计等前沿理论实现产品风格设计;

3. 充分理解产品策划思路及理念,配合产品经理和研发人员实现产品各种界面的视觉设计;

4. 建立和完善产品界面视觉设计规范;

5. 根据交互设计及产品规划,完成产品(iPhone、Android 、Web平台App及网站)相关的用户界面视觉设计。

6. 配合产品开发中的图形界面(GUI)设计。

7. 完成产品相关推广活动的专题页面、FLASH的设计及制作。

8. 与研发团队充分沟通协作,确认可控的误差范围和视觉效果的最终实现;

9. 根据视觉设计的发展趋势及用户研究的结果不断优化产品的图形界面(GUI)

UI初学者需具备的知识架构

1、视觉设计部分:

首先,视觉设计不仅仅是做ICON,做界面或者界面元素。

有很多人认为,如果去互联网公司做视觉方向ui设计,只会简单做图标、界面就OK。这是极其幼稚的想法。

一般公司如果花钱雇专职视觉设计师的话,那么整个公司的美术设计工作一般都会给视觉设计做。

所以,如果你想今后在视觉领域混,那么以下几项技能必不可少:

1)平面构成;

2)色彩构成;

3)版式设计;

4)心理学;

5)美术绘画;

6)设计意识;

6)设计意识;

2、交互设计师应该具备的基本能力

1)了解用户体验设计、可用性原则;

2)信息挖掘、用户调研、数据分析;

3)良好的逻辑能力;

4)心理学;

5)交互设计原则、不同平台的规范;

6)产品视觉感;

7)沟通能力;

三、项目开发流程

图中也展现了UI设计师在项目开发过程中的工作内容

四、设计步骤

规范基础-软件基础-图标设计-界面设计-切图交互-用户产品

五、设计规范

一致性原则

坚持以用户体验为中心设计原则,界面直观、简洁,操作方便快捷,用户接触软件后对界面上对应的功能一目了然、不需要太多培训就可以方便使用本应用系统。

字体

-保持字体及颜色一致,避免一套主题出现多个字体;

-不可修改的字段,统一用灰色文字显示。

对齐

-保持页面内元素对齐方式的一致,如无特殊情况应避免同一页面出现多种数据对齐方式。

表单录入

-在包含必须与选填的页面中,必须在必填项旁边给出醒目标识(*);

-各类型数据输入需限制文本类型,并做格式校验如电话号码输入只允许输入数字、邮箱地址需要包含“@”等,在用户输入有误时给出明确提示。

鼠标手势

-可点击的按钮、链接需要切换鼠标手势至手型;

保持功能及内容描述一致

-避免同一功能描述使用多个词汇,如编辑和修改,新增和增加,删除和清除混用等。

建议在项目开发阶段建立一个产品词典,包括产品中常用术语及描述,设计或开发人员严格按照产品词典中的术语词汇来展示文字信息。

准确性原则

使用一致的标记、标准缩写和颜色,显示信息的含义应该非常明确,用户不必再参考其它信息源。

显示有意义的出错信息,而不是单纯的程序错误代码。

避免使用文本输入框来放置不可编辑的文字内容,不要将文本输入框当成标签使用。

使用缩进和文本来辅助理解。

使用用户语言词汇,而不是单纯的专业计算机术语。

高效地使用显示器的显示空间,但要避免空间过于拥挤。

保持语言的一致性,如“确定”对应“取消”,“是”对应“否”。

可读性原则

文字长度

文字的长度,特别是在大块空白的设计中很重要,太长会导致眼睛疲惫,阅读困难。

太短又经常会造成尴尬的断裂效果,断字的使用也会造成大量的复合词,这些断裂严重的影响了阅读的流畅性。

空间和对比度

每个字符同线路长度,间距也是重要的。

所以每个字符之间的空间至少等于字符的尺寸,大多数数字设计人员习惯选择一个最小的文字大小的150%为空间距离,这就可以留下足够的空间。

当每一行中读取大段的文字,且线路长度过多或线之间的空间太少,都会造成理解困难。

对齐方式

无论是在文本中心,还是偏左,或者是沿着一个文件的右侧对齐,文本的对齐相当重要,可以极大地影响可读性。

一般而言,文本习惯向左对齐,因为它反映了你的阅读方式 – 从左至右。你熟悉每一行开始和结束的地方。

布局合理化原则

在进行UI设计时需要充分考虑布局的合理化问题,遵循用户从上而下,自左向右浏览、操作习惯。

避免常用业务功能按键排列过于分散,以造成用户鼠标移动距离过长的弊端。

多做“减法”运算,将不常用的功能区块隐藏,以保持界面的简洁,使用户专注于主要业务操作流程,有利于提高软件的易用性及可用性。

菜单

-保持菜单简洁性及分类的准确性,避免菜单深度超过3层。

-菜单中功能是需要打开一个新页面来完成的,需要在菜单名字后面加上“…”。【只适用于C/S架构,B/S请无视】。

按钮

确认操作按钮放置左边,取消或关闭按钮放置于右边。

功能

-未完成功能必须隐藏处理,不要置于页面内容中,以免引起误会。

排版

-所有文字内容排版避免贴边显示(页面边缘),尽量保持10-20像素的间距并在垂直方向上居中对齐;

各控件元素间也保持至少10像素以上的间距,并确保控件元素不紧贴于页面边沿。

表格数据列表

-字符型数据保持左对齐,数值型右对齐(方便阅读对比),并根据字段要求,统一显示小数位位数。

滚动条

-页面布局设计时应避免出现横向滚动条。

页面导航(面包屑导航)

-在页面显眼位置应该出现面包屑导航栏,让用户知道当前所在页面的位置,并明确导航结构

如:首页>新闻中心>欧科智能招商服务平台正式发布,其中带下划线部分为可点击链接。

信息提示窗口

-信息提示窗口应位于当前页面的居中位置,并适当弱化背景层以减少信息干扰,让用户把注意力集中在当前的信息提示窗口。

一般做法是在信息提示窗口的背面加一个半透明颜色填充的遮罩层。

就写到这里了,希望对你有帮助,在此感谢您的阅读!想要学好UI设计可以关注我的新浪微博:UI设计师王庆庆,并添加关注!

​精彩回顾:

如何在3年内从零基础逆袭,成为年薪50万+的UI设计师

零基础学习UI,如何4个月入职互联网公司?

想学UI设计,但是审美很差怎么办!

上一篇下一篇

猜你喜欢

热点阅读