020-29815005
预约专线时间:09:00-23:59

线框图设计技巧干货分享

新闻来源:优漫教育 日期:2021-09-28
对于UI设计来说,最简单却又最基本的设计就是线框图。讲到这,也许会有很多人不喜欢,难道不是线框图吗?但是事实上,要掌握线框图的设计,还要学会很多设计技巧。下一篇文章将从线框定义.功能及设计技巧展开讲解,一起来看一下~。
  一、线框图定义:

  大家常说的线框图,实际上就是页面的示意图,也可以被称为屏幕蓝图。其任务是展示网站或产品架构。就设计环节而言,线框图设计一般是根据用户需要来布置网页的内容和功能。根据开发的观点,在增加视觉设计和内容之前,在开发初期,应该先用线框架来建立网页的基本结构。从根本上说,线框图的设计目标实际上是为大众用户提供一个产品将包括的页面和组件,以及这些元素之间的相互作用。


平面设计培训


  二、线框图的作用。

  (1)协助小组评估并改进工作范围。设计人员可利用线框图快速创建产品的视觉表达,方便后期修改;同时,线框图也有助于设计人员向团队展示页面元素和控制项,以及如何与其互动。

  (2)让所有团队成员参与产品设计。使用线框图可以让设计者和开发者在早期共同讨论设计问题,在开始视觉设计前提出反馈和修改建议。在设计过程中,经常会遇到需求的前后变动。利用线框图,该方法能提高计算效率,而且与修改线框相比,修改耗时较长。这有利于快速重复设计过程,避免不必要的浪费。

  (3)进行用户检验。线框图有助于设计人员从潜在用户那里得到宝贵的反馈。在同一时间内浏览线框比阅读规范更快,并且有助于减少与预期的不同。


  三、线框图计算技巧。

  (1)正确使用色彩:如果线框中使用丰富的色彩,可能会让观众分心,并且增加更新的难度。但是,有些情况下,可以用颜色来强调某个部件。举例来说,红色可能用于错误状态,蓝色则用于评论等等。

  (2)使用简单的组件:线框图没有包含完整设计和详细说明的组件。反之,他们应该设计得相对简单,使团队成员易于识别。给组件添加细致的阴影.粗细的描边会花费很多时间和精力,但并不实际。

  (3)式样和一致性:在所有线框图中,相似的部件必须看起来一样。假如同一个组件看起来不一样,开发人员可能会怀疑其功能是否相同,甚至会由于设计不同而增加评估时间。当你使用线框图的时候,记住一种简单的设计技巧是一致的,避免引起混乱。

  (4)多使用注解:某些解决方案不能直观说明的情况,如某些控制项背后的逻辑,开发人员可能会对其产生怀疑。这类案例中,可以提供注解,以说明其背后的逻辑。因此,团队将理解您的解决方案,并且您不必花费时间来讨论这些问题。

  (5)扩展线框图以实现交互原型:在使用不同产品时,存在一些简单和一般的交互,还有一些非常复杂的交互。当线框图不能满足复杂度时,可以用线框图来扩展交互原型,而不需要写长的注释和大量的解释。

  有关线框图的设计技巧干货就讲到这里,大家能不能掌握以上内容?当然,只是为了学习干货知识,可能还是难以掌握这些设计技巧。所以,大家还是要在作品中多练手,才能更好地把握线框设计的精髓!