记得我是从大三下学期开始将注意力从从工业产品设计转移到交互设计的,但是那时候产出的设计主要是小组项目或者创赛(那时候的界面好像都是乱画哈哈哈哈),真正工作后发现原来作为一名UI/UX设计师还是要会很多基本操作的,所以刚工作后边学边做,没人教我就研究大神的分享。很多初入这个行业的朋友可能也像我当时一样比较困惑,不知道该怎么加强,下面是我总结的几个现代化UI/UX设计师需要具备的基操以及我的一些方法,所谓“基操勿6”,这里罗列的并不困难,如何这些你有的还没有整明白,建议有针对性的加强即可。
1.理解元素之间的间距
UI上的元素可不是随意放置的,作为一个有涵养的设计师需要深谙网格系统,并熟练的运用在设计中,这会使设计中的元素和元素见产生和谐一致的美感,节奏感。最常见的网格间距系统是Hard grid 和 Soft grid。
Hard grid是将内容对齐在一个固定的垂直网格,而Soft grid定义了页面上元素之间的间距。
至于他们的优缺点,以及为什么使用以8的倍数作为间距,我推荐这个视频有更详细的解释:
2.懂得如何配色
选择合适的配色目的在于让设计和谐,易懂,并有助于将UI元素和表面相互区分开来。 很多设计师通常不愿意从头开始创建一个调色板,但其实这比想象中要容易的多。下面是我通常采用的4个步骤,可以持续地调出干净而美观的颜色。
1. 选择一个品牌色。我从一个主色调开始,根据品牌、个人偏好、调研或色彩心理学来确定。 2. 选择系统颜色。为各种元素,如背景、文本、错误提示、成功提示等定义颜色。
3. 从基础颜色创建调色板。一旦我为品牌和用户界面选择了基础颜色,我就把颜色放到Google color tool 中(靠近底部),以获得该颜色的不同色调和阴影。
4. 确保可访问性。Web Content Accessibility Guidelines 建议所有文本和背景之间的色彩对比度至少为4.5:1。使用Stark插件,可以确保调色板的颜色是可访问的(如果用谷歌颜色工具生成,可访问性应该问没问题)。
3.懂得使用排版中的字号
排版所涉及的内容可不只是选择一个好字体,如果排版得当可以加强界面的可读性,可达性和层级关系进而增强整体可用性。
如果你不太愿意从头开始创建排版指南,可以尝试使用Material type scale generator来生成段落,标题,按钮等的字体大小,未来创建一个UX项目的字体指南,我通常这么搞:
选择一个合适的字体。我最喜欢的获取方式是Google fonts 或者Adobe fonts。
避免2种以上的字体。与其在界面引入新的字体,倒不如使用font families。因为他们符合统一的规范,并且十分灵活。
建立一个基本的字体大小。推荐首先确定正文中最常用的字体比例,并确定一个合适的行高。行号保持在130%到150%之间以获得最佳的可读性。
设定一个比例值。比例值带来来一致性,节奏感和层次感,为了给H1,H2,H3,正文,标题,按钮等设置字体比例,我们需要一个比例值来乘以我们的基本字体大小。常见的字体比例是1.250x、1.414x、1.5x、1.618x。
在设备上测试比例。在多种设备尺寸上测试不同尺度的字体,以决定正确的数值。
4.懂得用户测试
不同的用户测试方法适用于不同的场景,常见的用户测试包括usability testing, card sorting, tree testing, a/b testing, 和feedback surveys。要深入理解这些方法,我推荐阅读Quantitative User-Research Methodologies: An Overview。
这里我提供一个用来完成高质量用户测试的模板:
界定目标
首先第一步要界定用户测试的目标是什么,推荐将这个目标写下来作为引导我们执行的指南。比方说“探索当前数据图表的交互方式能否为用户提供优秀的使用体验”
做假设
就像做实验一样,用户测试需要以严谨的态度和科学的方法进行,我们需要为此准备一个假设,这将构成我们测试的基础,比方说“用户喜欢在同一个界面同时看到三个图表“。
筛选问题
筛选问题是在向潜在参与者提出的,以确保他们很适合测试。例如我们现在在测试一个数据平台的应用程序,那么我们可能先需要问他们“你目前是否使用一些数据分析平台”或者“你是否经常需要进行数据分析的服务”如果他们的回答是否定的,那他们就并不是我们要找的被试。
场景
在这一步需要定义不同的场景,以帮助我们洞察影响因素,例如一个场景可能是测试三个图表放在同个界面中的体验,而另一个场景可能是测试三个图表不在同一个Page下的效果。
每个场景的测试任务和问题
开场——收集被试者的预期,并向他们解释场景
问题和任务——解释要完成的测试任务并定义整个过程要提出的问题
终极问题——询问被试者的体验与他们的预期有什么样的差别,这有助于了解他们喜欢什么,不喜欢什么,多什么感到困惑等等。
最终问卷
收集最后的想法并提出问题来将所有的场景联系起来。他们更喜欢哪个方案?在1-5分的范围内为每个体验打分。记得要再次展示视觉效果以提醒被试者每个场景的情况。
结果
这里还要一些关于收集用户测试最佳结果的建议:
不是所有的用户都精通技术,所以在用户测试中不需要创建非常复杂的任务。
要提出详细的筛选问题以便得到合适的被试者,或者更好的方法是招募我们自己的用户或目标用户。
使用简化的措辞,而不是技术术语。
根据Neilson Norman Group的研究,我们只需要测试5个用户就可以发现85%的可用性问题。
5.善于使用低保真原型
之前的实习经历给了我很多关于制作低保真原型的启发,那些创意设计师用卡片,剪纸等方式可以快速将自己的想法传达出来,我觉得这是一件非常酷的事情。而现实的UX工作用到的原型形式比较固定,通常是带有连线的线框图,即便已经这么简化还是有很多设计师不愿意制作原型,也不愿意将原型分享给团队,他们觉得这会收到更多他们不想听到的反馈,但如果你在展示原型之前向团队强调该关注什么,就可以引导他们的注意力放在整体感受上。
Whimsical是一位美国设计师推荐给我的工具,我一直用它来完成线框图绘制工作,它的制作流程高效且足够轻量级,总是能够帮助我把注意力集中在信息层级,布局和内容本身上,而不是被颜色,字体,图标和其他设计细节羁绊。作为UX设计师的基操,原型是收集反馈最高效的方式,一定不要怕麻烦就跳过该步骤,否则很容易会让你陷入细节之中并降低设计的效率。
Part 1就先写到这里了,等有空了打算在Part 2聊聊以下内容:
Comments