2022-12-04 13:44来源:m.sf1369.com作者:宇宇
界面布局的简洁
简洁的设计理念在手机软件界面的设计中尤为重要。简洁有度的排版布局设计能为用户思想的融入留出空间,有效提高人机交互的效率。当下是一个大规模生产以及信息过剩的时代,处在激烈竞争、事物繁忙状态中的人们,生活步调在不停地加快,根本无暇顾及过多的装饰细节。简洁干净的设计,不仅可以留给人们片刻的清新与安宁,而且可以有效地帮助用户集中精力完成正在着手的工作。
文章图片3
手机界面排版布局的简洁可以从屏幕显示量精练、显示一致性和即看即所得这三个角度来体现。
首先来看屏幕显示量的适度精练,它是指适度地安排手机软件界面中的各要素例如选项标识等,既不能过于拥挤,亦不可过于稀疏。科学证明,屏幕总体覆盖率不应该超过40%,而分组覆盖度不应超过62%,否则就容易造成用户的不安和心理负担。信息过度会使用户有目不暇接的繁杂感,手机界面本来就有面积小的特征,如果显示项目过多真的会使使用者不愿意继续操作下去。而稀疏和空洞的屏幕覆盖率又会分散注意力,使用户打不起精神。所以手机软件界面的显示项目数量要适度,依据科学行事。
文章图片4
再来说显示的一致性,在手机软件界面中它一方面是指设计语言在表达上的一致性,例如图标、色调,布局、文字字体及大小,表达术语等的统一性;另一方面是指手机界面在任务信息的表达、界面控制等方面与用户熟悉的理解模式相一致。一致性本来就是设计简洁的表现,它是设计师最大限度利用资源的手段。要求设计尽可能达到简约的同时,设计师不可以以牺牲准确性为代价,因为这样会使用户的理解产生歧义,增添不必要的麻烦。
文章图片5
即看即所得要求在设计手机软件界面时设计师要把所设计内容清晰地外化出来,保证用户随时都清楚什么是可行的操作,应该怎样继续,在使用者意图和操作之间建立自然的匹配以达到美的人机交互体验的目的。这些都考验了设计师的把控能力。因此即看即所得是手机排版布局得以简洁的更深层的可行性支持。
文章图片6
利用最佳视域设计符合逻辑的界面布局
在手机软件界面设计中,视觉注意十分重要,是人们与手机进行交互的起点,只有先在视觉上引起人们的注意,信息才能成功地传达。在我们观察事物的时候,总有信息会被我们接收,也总有信息会被我们忽略,这是选择注意的表现。人的注意力是有限的,它与意识的强弱程度有着很密切的关系,当外界信息超出了我们能处理的范围时,我们就会把注意力集中在与目的相关的信息上,或者是引起我们兴趣、爱好的事物上。当下,要想引起人们的注意,产品一定要在视觉和功能上能够体现用户具体的目标核心价值观,只有这样才能吸引人们的注意力。
文章图片7
手机软件界面的合理布局有法可依――最佳视域。视域指的是人们能看得见的区域,这个区域包括了从一个驻足点上所能看到的一切。“形式的接受是一种新的心理格式塔的形成过程。格式塔不单是指图形样式,重要是指组织整体。”软件界面设计的逻辑性可以帮助这种心理格式塔的快速形成和建立。人因工程学证明,人在头部静止且眼睛正常活动状态下,水平方向的左25度为最佳视域;垂直方向则是0度到下30度为最佳视域。
文章图片8
人们的眼睛习惯从左到右,由上至下地扫视,适应顺时针方向的搜索,在偏离中间位置相同距离的视域范围中,眼睛的观察效率在屏幕各象限中按照左上,右上,左下、右下的顺序递减。因此,在手机软件界面设计中重要的信息应该落在人们的最佳视域范围内,并且在设计中利用信息板块之间良好逻辑关系对视觉要素位置进行合理布局,保证使用者对手机信息有高效的视觉认读效率。
文章图片9
界面的美感的整合(视觉平衡)
人类的情感、情绪和认知是一个相互补充和相互形象的有机体,设计美观的物品使人情绪良好,这种感觉反过来可以激发他们更具创造性地思考,这对用有机界面的易用性起到了很大的作用,研究表明愉快的人较善于发现解决问题的其他方法,因此能够容忍较小的难度。极具美感的设计能够使用户与产品间的互动进入一个良性循环中。
文章图片10
正因如此,当我们满足了手机软件的实用性和科学性时,美感就是我们为满足用户需求的重要考虑的内容了。我们前面提到过美感的经验是多维度的,在追求美的过程中人们都希望自己的五感都能得到满足。在手机界面设计中,我们现在的科技只能达到视、听、触三感的满足。我们的可视界面是满足视觉美感的重要途径,要得到足够的重视。掌控手机软件界面的美感应从整体入手,对各个界面布局中的视觉元素进行合理搭配以达到视觉上整体的平衡与和谐。
文章图片11
我们必须谨慎入微地考虑设计中色彩、质地、图像造型和整体版面的设计,让各要素充分担当视觉传达为它们指定表现的责任内容,为用户提供更加愉悦的操作环境与心境,提高它们对手机视觉界面的整体印象和使用兴趣。我们知道色彩的明暗与纯度,形状的长宽高矮,肌理平滑与粗糙都会在我们视觉中产生力的作用,对观看者有着明显心理影响。
文章图片12
版面布局的平衡感对界面整体形象十分关键,正所谓毫厘之差,微妙所在,绝对不能因为视觉形式反差的大小影响用户感官的舒适程度。我们可以通过适度把握文本与空白的显示比例、图形样式的繁简度、背景色彩与软件主体图标的明暗对比等控制视知觉中力的平衡。这样就能够使手机软件界面
界面设计就是可视化的用户界面设计(user interface design),包括但不限于平面广告设计、手绘场景/图标类设计、PC端网页设计及制作、移动端网页/APP的每一页页面设计。
操作方法
01
软件用户界面设计在工作流程上分为结构设计、交互设计、视觉设计三个部分:
一、结构设计(Structure Design)
结构设计也称概念设计 (Conceptual
Design),是界面设计的骨架。通过对用户研究和任务分析,制定出产品的整体架构。基于纸质的的低保真原型(Paper
Prototype)可提供用户测试并进行完善。在结构设计中,目录体系的逻辑分类和语词定义是用户易于理解和操作的重要前提。如西门子手机的设置闹钟的
词条是“重要记事”,让用户很难找到。
二、交互设计(Interactive Design)
交互设计的目的是使产品让用户能简单使用。任何产品功能的实现都是通过人和机器的交互来完成的。因此,人的因素应作为设计的核心被体现出来。交互设计的原则如下:
1)有清楚的错误提示。误操作后,系统提供有针对性的提示。
2)让用户控制界面。“下一步”、“完成”,面对不同层次提供多种选择,给不同层次的用户提供多种可能性。
3)允许兼用鼠标和键盘。同一种功能,同时可以用鼠标和键盘。提供多种可能性。
4)允许工作中断。例如用手机写新短信的时候,收到短信或电话,完成后回来仍能够找到刚才正写的新短信。
5)使用用户的语言,而非技术的语言。
6)提供快速反馈。给用户心理上的暗示,避免用户焦急。
7)方便退出,如手机的退出,是按一个键完全退出,还是一层一层的退出。提供两种可能性。
8)导航功能。随时转移功能,很容易从一个功能跳到另外一个功能。
三、视觉设计(Visual Design)
在结构设计的基础上,参照目标群体的心理模型和任务达成进行视觉设计。包括色彩、字体、页面等。视觉设计要达到用户愉悦使用的目的。视觉设计的原则如下:
1)界面清晰明了。允许用户定制界面。
2)减少短期记忆的负担。让计算机帮助记忆,例:User Name,、Password、IE进入界面地址可以让机器记住。
3)依赖认知而非记忆。如打印图标的记忆、下拉菜单列表中的选择。
4)提供视觉线索。图形符号的视觉的刺激;GUI(图形界面设计):Where, What, Next Step。
5)提供默认(default)、撤销(undo)、恢复(redo)的功能
6)提供界面的快捷方式。
7)尽量使用真实世界的比喻。如:电话、打印机的图标设计,尊重用户以往的使用经验。
8)完善视觉的清晰度。条理清晰;图片、文字的布局和隐喻不要让用户去猜。
9)界面的协调一致。如手机界面按钮排放,左键肯定;右键否定;或按内容摆放。
10)同样功能用同样的图形。
11)色彩与内容。整体软件不超过5个色系,尽量少用红色、绿色。近似的颜色表示近似的意思。
当然,要着手开发一个软件用户界面,远远不止这三步,在进行开发之前还需要进行需求分析、方案验证等前期工作,而作为UI设计师,这三步则是最核心也是最关键的工作。
界面设计的一致性,包括风格的一致性,界面颜色的一致性,与软件运行的系统环境的一致性。
具体来说,包括下列内容的一致性:
菜单选择、命令输入、数据显示等,保持同一种形式风格; 采用统一的标号、约定俗成的缩写和预先定好的颜色; 保证信息显示方式和数据输入方式协调一致。
用户界面是人与机之间交流、沟通的层面。从深度上分为两个层次:感觉的和情感的。感觉层次指人和机器之间的视觉、触觉、听觉层面;情感层次指人和机器之间由于沟通所达成的融洽关系。总之用户界面设计是以人为中心,使产品达到简单使用和愉悦使用的设计。
界面设计从流程上分为结构设计、交互设计和视觉设计三部分。
随着产品屏幕操作的不断普及,用户界面已经融入我们的日常生活。一个良好设计的用户界面,可以大大提高工作效率,使用户从中获得乐趣,减少由于界面问题而造成用户的咨询与投诉,减轻客户服务的压力,减少售后服务的成本。因此,用户界面设计对于任何产品/服务都极其重要。
在国外,用户界面设计人员有了一个新的称谓:Information Architecture,信息建筑师。它不仅仅是指美工,而是具有心理学、软件工程学、设计学等综合知识的人。
好的用户界面应该集 “实用、易用、美观” 于一体。如果软件的功能不实用,不能为用户解决问题,那么不管这个软件是否易用和美观,用户都不会使用这个软件,除非用户没有选择余地。如果两个软件的功能和价格都差不多,那么易用性就成为用户选择的第一标准。哪款软件更好操作,效率更高,用户就会选择哪款软件。如果两个软件的功能、价格、易用性都差不多,那么用户一定会选择更加美观的那款软件。
不良反应不好的用户界面主要有以下一些表现:
界面操作步骤繁琐,界面布局混乱,缺乏逻辑,盲目堆放界面元素,让用户不知如何下手。
界面措辞不专业,含糊不清,如消息框出现文不对题的语病。
没有防错处理,对用户输入的信息没有校验;执行破坏性的操作之前,不提醒用户确认等等。
不提供进度条、动画来反映正在进行的进程,对于重要的操作也不返回结果。
界面缺乏美观和个性,甚至出现界面风格不一致的情况。
编号规则中有8个蓝色的图框,分别表示在系统图中编号的不同排列顺序,允许误差一栏默认的就可以,开始编号一栏是器件是从什么序号开始编的,这个可以根据需要自由填写;需要哪种编号顺序是在下方填写的,其他按楼层啊、按状态等,你可以随意选择几种情况试试
工具软件推荐
photoshop、ai、ae、axure、fireworks、coreldraw、flash
1、photoshop
给各位最好的建议还是使用最新的版本的软件哦!因为一个最新版本的功能更加全面,不然的话更新的意义何在呢?你说是吧!
2、ai
全称adobeillustrator是一款多媒体、在线图像和出版的工业标准矢量插画的软件。在生产多媒体图像的艺术家、专业插画家还是生产印刷线稿的设计者、或者是互联网页、在线内容的制作者,都不否认adobeillustrator不仅是艺术产品工具。也为线稿提供了无与伦比的控制以及精度。矢量图方大放小不会变形这是ai的优势,很适合扁平。劣势是ai不能切图,对于虚拟化的图标处理不是很好。
3、ae
adobeaftereffects在视频特技和设计的机构,如动画制作公司、电视台、多媒体工作室以及个人后期制作工作室。ae是动效这块效率最高的软件但是劣势是不能用ae画图标做界面。属于是一款层类型后期软件。
4、axure
是负责定义规格和需求、界面与设计功能的专家能够快速创建应用软件和web网站的流程图、线框图、规格说明文档和原型的一个专业的快速原型设计工具。
5、fireworks
是adobe推出的一款网页作图软件,通过软件可以加速web开发和设计,是一款优化与创建web图像和快速构建网站与web界面原型的理想工具。
6、coreldraw
出自加拿大corel公司的平面设计软件;这款软件是corel公司出品的矢量图形制作工具软件,这个图形工具给设计师提供了页面设计、矢量动画、位图编辑、网页动画和网站制作等多种功能。
7、flash
是macromedia公司推出的交互式矢量图和web动画的标准,由adobe公司收购。做flash动画的人被称之为闪客。网页设计者使用flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。
要想成为一个优秀的设计师,就必须要知道设计的四大基本原则是什么?设计的四大基本原则:亲密性、对齐、对比、重复。
设计是把一种设想通过合理的规划、周密的计划、通过各种方式表达出来的过程。人类通过劳动改造世界,创造文明,创造物质财富和精神财富,而最基础、最主要的创造活动是造物。
业务系统的核心目标是支持顶层业务管理目标的快速达成,所以业务系统的首页设计应该从业务目标和管理效率这2点出发。
针对不同用户角色聚合常用的数据信息和功能操作,通过数据激发动力,通过快捷工作台高效执行,以此来实现业务管理目标的高效达成。