ui界面设计的布局法(UI界面设计基本原则)

文/田龙过 闫河 用户界面(UserInterface) 也称人机界面,是指软件用于和用户交流的外观、部件和程序等,简称UI,它是用户和智能手机之间进行交流和通讯的平台和纽带,是用户感知、认知、使用和体验软件的最主要的媒介。

ui界面设计的布局法(UI界面设计基本原则)(1)

一般说来,优秀的UI具有简洁、清晰、容错、熟悉、响应、美观、一致、高效等特点。归纳起来要设计好一款手机APP的UI,就必须遵守两个基本原则:

ui界面设计的布局法(UI界面设计基本原则)(2)

ui界面设计的布局法(UI界面设计基本原则)(3)

UI是连接用户与手机的桥梁,图标或按钮则是进行更深入的人机互动的标志和人口,好的UI设计主要目的便于人机交流,让用户快捷地理解程序的用途及操作步骤。

ui界面设计的布局法(UI界面设计基本原则)(4)

优秀的UI首先强调的是功能性,即实用性。在设计领域衡量一个UI设计的成功与否,归根结底就是看用户使用的兴趣和使用的频率。以用户的需求为设计目标并引导用户的需求,是APPUI设计的逻辑起点和终点。

ui界面设计的布局法(UI界面设计基本原则)(5)

同样优秀的的APP用户界面应该时刻关注的是用户使用时的快捷和便利,易用性是其基本特征,必须站在用户的角度、了解用户的使用能力和兴趣偏好,交互细节和交互操作要符合用户的操作习惯,同时尽量简化操作步骤和信息层级,并在UI界面提供或显示简单的操作提示,让用户可以凭借已有的生活常识、使用经历和基本的逻辑推理来操纵软件。

ui界面设计的布局法(UI界面设计基本原则)(6)

UI作为用户使用软件的中介,必须时时刻刻处在用户的自由掌控之中,用户不仅能自由掌控自己的浏览行为,还要确保他们能从某个地点跳出或毫无障碍地退出,这些在用户离开前弹出窗口的行为,也是用来判断UI易用性的标准。

ui界面设计的布局法(UI界面设计基本原则)(7)

UI的设计既要实用,也要好用要达到这两点,还必须强调设计的一致性,其中包括结构设计的一致性、导航设计的一致性和操作设计的一致性。界面的一致性就是界面的统一性,就是要把一样的功能放在在同样的位置。页面由基本模块组成,每一种基本模块在UI设计的时候,都应把字型、字号、颜色、行距以及按钮的颜色、形状等元素排列一致。

ui界面设计的布局法(UI界面设计基本原则)(8)

ui界面设计的布局法(UI界面设计基本原则)(9)

UI设计是对用户软件使用环境的设计。由于APPUI设计必须遵从易用性的特点,尤其是手机界面尺寸有限。因此,简洁大方的交互界面设计才能更容易的吸引用户、引导用户。

ui界面设计的布局法(UI界面设计基本原则)(10)

极简主义是美学上的简化主义,其设计理念强调删繁就简、简约整洁、突出主题,用最少的色彩和最简单的形象直接表述最终的设计意图和优美高雅的思想品味。

ui界面设计的布局法(UI界面设计基本原则)(11)

优秀的界面布局会个性鲜明、重点突出、准确明了,便于用户寻找信息操作程序。在设计时都要简约而不是简单,就是说在手机有限的屏幕里具有清晰的浏览次序,需要根据用户的视觉基本流程给界面进行合理的空间布局和定位,疏密搭配、相互呼应,科学合理的排列组合,设计出用户的视觉层次,使界面突出核心和重点。

ui界面设计的布局法(UI界面设计基本原则)(12)

用户可以通过布局和定位形状、尺寸、颜色对比等做出选择,在最短的时间内快速清晰地识别出信息,操作功能。

ui界面设计的布局法(UI界面设计基本原则)(13)

APPUI设计中各种色彩构成的面积、形状、位置以及色相、明度、纯度之间要有对比和变化,使页面布局结构与配色之间的分组与整合、对称与平衡、对比与统一、强调与突出、虚实与留白、节奏与韵律等方面的协调互补。

ui界面设计的布局法(UI界面设计基本原则)(14)

UI设计中图标的组合元素和图标的配色设计要简单,图标和背景明暗距离以及图标的明暗反差都要精心调整,突出主次。可以说,出色的色彩设计不但能够让图标脱颖而出,对用户产生强烈的视觉冲击,而且也会感染用户的情绪,为用户带来鲜活生动的视觉体验,使用户对软件产生信任、亲切、舒服的感觉,对产品产生依赖感。

ui界面设计的布局法(UI界面设计基本原则)(15)

ui界面设计的布局法(UI界面设计基本原则)(16)

① 官方头条号:设计智造 顶级创意设计师必备

② 本篇为 设计智造www.cocoo.top 编辑整理,版权归原作者所有,转载请注明出处!

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页