从Web借鉴UI设计左正

用户体验已经成为衡量应用软件质量的重要标准。在过去我们可能会惊叹于某个Web应用的华丽界面,现在,随着HTML5的强势登场,各类表现层技术及开发框架的发布,Web与窗体应用的界限正在被逐渐模糊。虽然技术已经焕然一新,但很多开发人员并不是专业的信息架构师,可能还在使用传统的、平凡的UI设计风格。富应用已成定局,过去难以实现的效果在今天看来已如此简单。本文旨在通过借鉴Web界面设计经验,来探寻系统UI设计的最佳实践。

一指导原则概述

二UI设计流程

第一步:理解需求并了解我们的用户

了解系统中的角色,以及他们之间的关系。在设计UI前,我们应该知道这些角色能够做什么,期望做些什么以及不能做些什么。我们要了解这些角色的主要任务,并深入研究他们的工作习惯、知识层次以及他们理想中的软件应该是什么样子。与这些代表不同角色的关键用户交谈,为他们每一个人编写一个场景来描述他们理想中的最佳体验是个不错的方法。作为设计者来说,我们必须清楚用户的习惯。在某些行业,可能从业者所希望的界面风格是常人无法理解的,但对于该角色确实是可行的。这些信息,如果不与用户面对面的沟通,恐怕很难从文档中获取。

一般步骤如下:

What用户要做什么?用户的期望是什么?

Why用户的目标什么?用户为什么有这样的想法?

Where用户处在何种场景活应用环境中使用系统?

Who谁在使用这一系统?他们有什么差异?他们的习惯有何不同?

How用户的业务流程是什么样的?系统如何帮助用户完成任务?

第二步:定义功能,划分模块

进入这一阶段表示需求已经被分析并定义。UI设计者应该确认以下事项是否已经清晰:

如果上述问题还存有疑问,那么就应该停下来把前期工作做好。

第三步:设计全局导航与局部导航

导航与标识的设计体现了设计者对复杂事物的组织能力。导航与标识往往密不可分,很多时候导航就在充当标识。标识如同系统中的地标,帮助用户了解:他们身在何处,他们的目的地在哪,以及他们如何完成操做等。在大型系统中,标识帮助用户不会迷失。导航则帮助用户迅速达到目的地。

有3类导航,分别为:

导航有2类模式,分别为:

“用例图”和“系统结构图”都能反映出系统的功能结构。但是,它们都无法反映出用户如何使用系统。“路径图”反映了用户如何使用系统,包含了业务逻辑,以及各功能模块之间的调用关系和数据流向。“路径图”显示了用户完成任务,需要在系统中行走的路径,就如同地图一样,反映出不同功能的复杂程度。

确定导航栏的位置放在顶部可以增加内容区域的面积,但是导航条目过多时,一行就放不下了。放在左侧,可以增加导航栏的面积,可以放入比横行更多的按钮,但是会减少内容区域的面积。两者给有所长。需要根据需要选取。

设计导航树设计导航树要考虑两个问题。第一,导航树要适合进行权限控制。第二,导航树的层次要便于用户使用,一般常用功能的排列靠前,还有考虑树的深度,太深了会增加用户的记忆负担。

首先,要确定局部导航的形式,可能的形式包括:包括在Logo中添加链接,在数据查询结果集中添加链接,“面包屑”等。

然后,确定局部导航的规模,局部导航过多会使系统路径相对复杂,增大开发工作量。因此,应该压低局部导航的数量,力争做到简单实用。

具有动画的导航具有更高的用户体验,而且对于数据需要延迟加载的导航来说,动画效果是必须的。然而,使用的场合要区别对待,并不是效果越绚丽越好。动画只需要流畅并能够个用户以反馈就好,毕竟对于应用系统而言,业务处理才是其核心价值,不能浪费项目组的宝贵资源来打造一个“花瓶”。

第四步:界面设计

界面设计最简单的方法就是参考同类系统的UI设计,结合实际项目和用户需要进行调整。界面设计有极大的自由度,因此也带来的一定的风险。设计者需要很强的业务知识,如果缺乏对用户工作的了解,很可能无法理解用户的真正期望。因此,调研和沟通非常重要。界面设计长犯以下错误:

第五步:界面分割与整合

第六步:开发原型->演示->收集反馈->改进

以用户为中心设计系统的很重要的一步就是收集用户反馈。完成原型开发,并及时向用户演示,与用户频繁地交流,共同测试系统原型,能有效促成UI的高可用性。

三设计图标

图形隐喻就是通过图形暗示用户的一种技巧。比如Windows里的回收站,历代Windows系列产品,只要我们看见那个“垃圾桶”我们就知道那是回收站。可见,好的UI,往往需要对图标进行定制化设计,使其包含某种隐喻来引导用户使用系统。图形隐喻可以推广到整个UI设计,不仅仅是图标设计,尤其是在游戏软件中。令我深有感触的就是《星际争霸II》,其UI设计无疑增加了游戏整体的用户体验。但是,使用图形隐喻存在一定风险。UI设计者的个人看法,如果与大多数的人有偏差,就会适得其反。毕竟,我们做的仍然是应用软件而不是游戏,不会有强大的美工和设计团队,在我们追求前卫设计的时候,可能会让用户感到困惑。因此,笔者从风险和成本角度考虑,并不建议在应用软件中过多地依赖图形隐喻。也许,我们的软件没有什么特点,但作为应用软件UI,简约、易用、高效才是我们设计的目标。所以,在此我只考虑图标的设计原则。

图标设计的核心思想——用美观的图形抽象现实事务(事物)。以下是一些指导原则:

图标设计,可能已经超出了我们大多数人的技术范畴。这类工作更适合于专业的美工来完成,而不是UI设计人员。如果你不擅长矢量作图,请一名专业美工可能更好。

感谢您阅读本文,如果您觉得有所收获,麻烦点一下右边的“推荐”,您的支持是对我最大的鼓励...

THE END
1.UI基础界面图标规范图标绘制规范,一文看...来自阿多比设计UI基础|界面图标规范图标绘制规范,一文看懂! 好的图标设计不仅仅是美化界面的元素,也是传递信息、增强交互体验的重要工具,更是一个设计师专业力的体现。 整理了6条图标设计规范,在日常设计中灵活运用,...https://weibo.com/6500079170/P1uasklgd
2.视觉设计方法大放送——3分钟了解图标设计按照图标的绘制手法,图标可分为矢量图标和手绘图标。 矢量图标/手绘图标 图标设计 图标设计的核心思想,就是尽可能地发挥图标的优点——比文字直观、比文字漂亮;减少图标的缺点——不如文字表达准确。 图标设计遵循以下三个原则,即可用性、美观性和原创性。 https://www.gameres.com/847710.html
3.一篇文章,带你看懂功能图标设计!Halo,这里是设计夹,今天分享的是「功能图标设计」。 本文将详细介绍功能图标在现代软件和应用程序界面设计中的定义、作用、种类、设计原则、设计方法和注意事项等方面的内容。 功能图标作为界面设计的基础组成部分,其设计和使用对于提高用户的效率、体验和满意度具有重要作用。 https://www.niaogebiji.com/article-666120-1.html
4.Qt绘图指南:掌握高效美观的GUI设计之道QPainter是Qt框架中用于在绘图设备(如QWidget、QPixmap、QImage等)上进行绘图的类。它提供了丰富的绘制方法,如绘制直线、矩形、椭圆、多边形等。QPainter还提供了绘制文本、图像、路径等功能。在进行绘制操作时,QPainter会考虑当前的状态,如坐标变换、裁剪区域、画笔、画刷等。 https://developer.aliyun.com/article/1463725
5.你应该知道的65个设计术语10 个基本设计术语 什么是构图? 构图,也称为布局,是创建完整图像的设计元素的视觉排列。在一个作品中,您可以使用不同的设计原则来创建视觉上令人愉悦的作品,以提供功能性布局。 什么是设计中的平衡? 放置在页面上的任何元素都具有视觉权重,可能会受到形式、大小、颜色和纹理的影响。为了使布局平衡,某些元素可能需要...https://www.szfangwei.cn/news/6524.html
1.最新图标设计趋势与特点概述新闻摘要:最新风格的图标设计趋势与特点体现在简洁、抽象、扁平化、动态和个性化等方面。设计师们追求极简主义,以简洁的线条和形状表达图标含义,同时注重抽象表现,引发观众联想。扁平化设计成为主流,色彩鲜明、对比强烈。动态图标和...http://www.czshengmei.cn/post/11756.html
2.可爱小图标设计与应用指南简介:在图形设计领域中,图标设计对用户界面(UI)至关重要,特别是对于论坛和网站。它们通过简洁的图形传达功能或信息,增强用户体验。本主题将探讨图标的设计原则、格式选择、设计工具、版权问题以及应用场景,旨在帮助设计师创建吸引人的视觉元素。 1.图标设计的原则和重要性 ...https://blog.csdn.net/weixin_36431814/article/details/144124458
3.轻松绘制Icon图标,提升新媒体视觉效果在深入探讨如何绘制Icon之前,我想先和大家聊聊Icon的基础知识。Icon,即图标,是界面中用于表示功能、文件、程序或命令等视觉元素的图形符号。它们虽小,却承载着巨大的信息量,是用户与界面交互的重要桥梁。 1、Icon的设计原则 设计Icon时,应遵循简洁明了、易于识别、色彩搭配和谐等原则。简洁的线条和形状,能让Icon在众多...https://www.batmanit.cn/blog/k/52326.html
4.「设计方法」UI工作流程指南(一)设计时原型的类别也需要关注,每个项目启动时对原型的需求不一定都相同,交流的对象也有可能会对原型的类别产生混淆,以为线框图(Wireframe)、原型(Prototype)和视觉稿(Mockup)是一个东西,设计最好先与产品经理/甲方开始就确认要绘制什么类型的原型。 三种类别虽然产出效果不同,但在本质上都是一样的,为设计开发服务,...https://maimai.cn/article/detail?fid=1432760722&efid=WECXIWo5VTVdp8MWzUWhCA
5.制图实训报告(20篇)本实训的目的在于把握AutoCAD用于工程制图的基本操作,了解工程图纸绘制的格式和要求,工程图样绘制和阅读工程图样的原理和方法,培养形象思维能力,要求我们能够用AutoCAD绘制二维的工程图纸,理论和实践紧密结合,通过《机械制图课程设计》做了一套工程图样的操作实例。 目的与任务: 1、了解工程图纸的一般要求和格式并绘制平面工...https://www.ruiwen.com/shixunbaogao/7300946.html
6.icon的设计原则有哪些在设计图标时,有一些基本原则需要遵循。首先,图标应该简洁而明确,能够清晰地传达出所代表的概念或功能。其次,图标应该具有一定的普遍性,以便于不同文化背景和语言环境的人们都能理解和使用。此外,在设计过程中还应注意细节,并确保图标与相关文字的配合协调。在选择图标元素时,建议优先考虑自然界中已有的形状和形式。这...https://wap.zol.com.cn/ask/details_20545874_2787619_3.html
7.阿里云设计语言:打造云计算设计领域的语言体系MySecretRainbow在计算设计语言引领下,阿里云图标以极简的几何形态作为识别特性。在图标设计时应避免无序、无逻辑、不稳定的随机形态,一切形态表现均应在一个无形的几何空间内完成。 所有二维图标应绘制在相应大小的基础方形网格框架上,轮廓线的笔划宽度固定。这样可以确保图标在导出时将保留其所需的比例和周围空白区域的一致性。 http://www.mysecretrainbow.com/blog/22653.html
8.人机交互2交互设计的原则与方法SpriCoder的技术博客交互设计的原则与方法 交互设计中的问题 尽量减少用户需要记忆的部分 缺乏反馈 1. 目标Goal vs. 意图Intention 单个目标可对应多个意图 举例:删除文档中的部分内容的目标 意图1:通过编辑菜单删除 意图2:通过删除按钮删除 每个意图可包含一系列活动 2. EEC模型 ...https://blog.51cto.com/u_16038001/6159133
9.个人实训总结通用15篇在绘制图形是时,仅仅绘制好的图形还不能看什么来,也不足以传达足够的设计信息。 只有把尺寸标住标在自己的图形上面,就会让看图者一目了然,CAD提供的尺寸标注功能可以表达物体的真实大小,确定相互位置关系使看图者能方便快捷地以一定格式创建符合行业或项目标准的标注。 https://www.unjs.com/fanwenwang/gerenzongjie/20230423182512_6935637.html
10.图标设计的三个小原则还有个问题要点一下大家:就是在设计图标的过程中,我全程都是用矢量工具绘制,然后做布尔运算,再用锚点去调整。如果用钢笔去勾可以是可以,但是如果水平不够高,曲线就会不协调。 差异性 设计一套图标时,要尽量放大图标之间的差异性,减弱图标之间的相似性,这是最容易被设计师忽略的一项原则,往往为了保持视觉风格的统一...https://www.jianshu.com/p/3bfc7b221a74
11.PhotoshopUI交互设计张晨起著第2章 图标设计 352.1 了解图标设计 362.1.1 什么是图标 362.1.2 图标设计的作用 362.1.3 图标设计的意义 362.2 图标设计的绘制原则 362.3 Photoshop图层的基本操作 412.3.1 新建图层 412.3.2 选择图层 422.3.3 复制、移动图层 422.3.4 重命名图层、删除图层 442.4 画笔工具 502.4.1 预设画笔工具 52...http://product.m.dangdang.com/detail1378434003-22159-1.html?main_pid=0
12.借“助农”软件产品设计,育爱党前端开发人才——《UI设计应用》课程思政典型...课前,通过任务单让学生了解疫情中外卖小哥;课中,将抗疫精神、规则意识、工匠精神、中国优秀传统文化等融入教学,通过感人外卖小哥视频导入,强调抗疫精神,引出教学任务;讲解设计原则中,体现规则意识;讲解设计方法中传导工匠精神和文化自信;图标绘制创作中传导创新精神和精益求精的工匠精神;课后,通过助农网图标的制作进一步...http://www.gxzjy.com/ztlj/kcszjxyjsfzx/cases/202208/t20220816_112426.html