UI界面设计是指对软件的操作逻辑、界面风格以及人机交互行为三方面的综合设计。

UI界面设计概述

相对于平面设计、环境艺术设计、工业产品设计等专业来说,UI界面设计考察的重点不仅是视觉方面的表现能力,还有同学们的逻辑能力和同理心等方面,因此要求同学们具有观察用户,并发现痛点的敏感力,才能让设计方案更具合理性、可行性和创新性。

?教学课件

当然这一切都必须建立在UI界面设计中的“可视形式”上,通过图形、色彩、版式等视觉语言来实现用户对界面的综合使用效果的认可。

至于设计方案能否有效解决问题,能否拥有“能用”的良好使用体验和“好用”的情感化设计,就要看我们在考试的时候,如何通过手绘的形式将产品描绘出来,所以UI界面设计的手绘表达非常重要。

?优秀UI界面设计作品

UI界面设计步骤

在UI界面设计的手绘表达中,画面要做到颜色、风格及版式视觉上的美观。除此之外,界面的操作逻辑以及对目标用户的痛点分析也十分重要,软件的主要功能需要根据目标用户的具体需求而定,之后再去绘制相关功能的界面。

在设计UI界面时,我们需要从以下几个步骤来进行。

  • 用户分析

在考试时,这个步骤其实也是解题的开始。从拿到题目,到结合知识积累去思考,我们需要对目标用户群体的需求有一定了解,了解他们日常流程、环境以及使用习惯,进而对这些信息进行分析处理,挖掘出用户的潜在需求,以用户的角度去完成界面的设计和实现。

?手绘教材

  • 人机交互

交互的根本目的主要就是为了解决用户需求,我们在做人机交互设计时,界面设计的重心是色彩和视觉,以美观设计为主,主要考虑产品看起来怎么样。而交互设计则是以用户为中心进行人机互动部分的设计,主要考虑产品用起来怎么样。所以交互设计则需要兼顾视觉与交互两个方面进行设计,将交互的理念体现在UI界面上。简单来说,把交互设计的理念体现在UI界面上。

?教学课件

?UI界面优秀设计作品

  • 视觉设计

视觉是UI界面中的基本内容,设计UI界面主要就是通过对颜色、栏距、字体、图形等的运用达到合适的视觉效果。设计时应该力求图案的合理布局及简洁化表达,因为承载设备的屏幕本身有尺寸限制,用简约的图形呈现,能够使复杂的内容精简化,增加用户的接受度。

?UI界面优秀设计作品

手绘表达如何呈现

界面设计的视觉效果,能提高用户的操作兴趣,增强用户的体验性及舒适性,使界面设计更加系统化、人性化是我们设计的重点。

从美观性及良好的视觉体验上看,UI界面设计的手绘表达主要围绕三个层级来体现。

  • 第一层级

第一层级可以围绕主视觉内容绘制高保真界面6-8个,常见界面包括且不限于:登陆、注销、设置等基础界面其余大多界面要围绕软件功能绘制。

?UI界面优秀设计作品

在设计时切记UI界面的设计原则:

1. 保持字体及颜色一致,避免一套主题出现多个字体。

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

无论是在文本中心,还是偏左,或者是沿着一个文件的右侧对齐,文本的对齐相当重要,可以极大地影响可读性。一般而言,文本习惯向左对齐,因为它反映了你的阅读方式 – 从左至右。你熟悉每一行开始和结束的地方。

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

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

?教学课件

  • 第二层级

第二层级可以用LOGO、图标或者用户画像及情绪板来表达。

LOGO

LOGO常见绘制效果有三种:平面图形与文字结合或是纯文字、正负形效果以及扁平图形,需要注意的是线条的工整性与网格系统的严谨性,运用标准的几何图形通过各种剪切相交负形或是组合拼接形成的图形而产出。关于LOGO的手绘表达,我们之前的文章里有详细的阐述。

图标

图标作为界面重要工具,它的设计效果影响着操控体验,在对其进行设计时,要注意使其风格与整体格调保持一致,达到整个界面的统一和谐。当然,也可以适当加入交互时的反馈效果,强化其表现力使用户无障碍融入到交互情境中。

?教学课件

图标与LOGO的绘制方式大同小异。但与LOGO不同的是,图标体积小巧,它的设计要求更加精确,需要让它所代表的功能以更加一目了然的形式,呈现在用户面前。可以说,它比起LOGO而言功能性更加直接。

用户画像

用户画像也叫人物角色,它的形象主要来源于通过用户分析后,抽象加工后形成的一系列特征标签。人物形象可以从主视觉画面中挑选适当加入数据图,数据图不要使用视觉效果过于简单的条形图或是折线图,如果画面还有空间基于软件功能可以再加入一部分与软件界面相关联的智能外设界面,其大体视觉效果要求与软件界面相似。

?带数据图的教学课件

情绪板

情绪板是指将一系列能将用户情绪可视化的图像、文本、参考物组成拼贴形式,然后进行视觉提炼,是常用的表达设计定义和方向的设计方法论。

?学员们在练习绘制UI界面

?老师对学员的UI界面做点评

写在最后

当然UI界面设计要想有更好的视觉呈现,手绘能力是必不可少的,所以同学们在之后的备考中不只需要丰富自己的知识积累,锻炼自己的创意能力,还需要不断练习提高手绘水平。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

|京ICP备18012533号-296