IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

在网页设计中,如何运用方框/方形元素?

Catherine • 2017-05-07 04:36 • 交互设计

如何让方正方框/方形元素不死板有创意?今天这篇好文总结了超多的设计方法和实战案例,建议阅读。

文章目录[隐藏]

  • 作用
    • 01 分割
    • 02 强调
    • 03 修饰
    • 04 色块对比让版面变得有血有肉
    • 05 信息引导的作用
    • 06 让文字之间相关联
  • 应用
    • 01 网页板块
    • 02 btn按钮,搜索,表单 等
    • 03 图片
    • 04 文字
    • 05 VI logo
  • 类别
    • 01 方框之间的结合
    • 02 方形与方框之间的结合
    • 03 用于标签部分
    • 04 大的方框/方形
    • 05 残缺的方框/方形

如何让方正方框/方形元素不死板有创意?今天这篇好文总结了超多的设计方法和实战案例,建议阅读。

在网页设计中,如何运用方框/方形元素?

常常听见大神说设计不需要方方正正的,这样会显得死板,没有创意。LOW……其实不然,我认为每一种元素,只要在对的环境中,去运用。相信会出现让人耳目一新的效果。

比如我们身边使用的电脑,冰箱 房屋架构等等,都离不开方形的支持。杂志中常常会让方形元素融入进文字或者图片中间,去突出或去修饰它们。随着现在技术越来发达,设计师也会将杂志中的一些元素,融入到网页设计中去。让网页设计更加有新意。

作用

下面我们就来说下方形方框在网页之中的运用。

01 分割

我们已知的分割的元素,主要是线和面 ,其实方形/方框也是具有分割的作用。在设计中运用的话会让你的作品别具一格。

下面设计作品画面中出现了多个文案信息,这么多的信息集中在一个画面中,如何让它们变得有主有次呢,为了让用户清晰的阅读到每一个单独的文案信息,所以设计师加入方框的元素,利用大小对比的关系,有效的避免了内容的冲突和杂乱 。这里的设计通过加方框的元素,使画面中的文字也具有一定的强调作用。

在网页设计中,如何运用方框/方形元素?

这块设计也是具有相同的处理方式:

在网页设计中,如何运用方框/方形元素?

02 强调

如何让文字内容在众多元素里面突出。 要么弱化其他,要么强化自己,显然下面设计中为了让用户第一视觉就能看到表达的文字信息,所以设计师利用了方框的元素进行了强突出。

在网页设计中,如何运用方框/方形元素?

下面的海报设计,也是运用到了方框的元素,把用户的视觉焦点聚焦了起来。既强调了重要信息也不丢失画面的美感和创意。

在网页设计中,如何运用方框/方形元素?

03 修饰

当我们的在设计一个海报,或者网站页面中的一段文字的时候,有时候画面太单薄,一些设计师会用其他的方式进行修饰,但是也有设计师利用方框,不一定是完整的方框,这样整个画面一定会别具一格。下面来看设计案例吧。

下面是一组平面VI的作品,本来是一个平平淡淡的名片,但是设计师加方框的一角进行修饰,瞬间这个作品变得创意十足了。

在网页设计中,如何运用方框/方形元素?

在网页设计中,如何运用方框/方形元素?

下面网页设计中,原本标题在大面积的留白中间,变得单薄,导致页面的中心不稳定,所以设计师在标题上增加了方框的元素,进行辅助修饰作用 ,有效了丰富了标题的展示效果。

在网页设计中,如何运用方框/方形元素?

04 色块对比让版面变得有血有肉

设计师利用方形的色块让网站变得生动创新,使网站在布局上面变得有节奏,有主次,逻辑清晰。下面我们来看看这些设计案例。

下面是一家家具类的网站,设计师利用方块的大小来做对比 。使得整个画面中间的元素组织起来变得清晰有条理,让用户在视觉上变得有层次感, 使得整个版面变得简约清晰。

在网页设计中,如何运用方框/方形元素?

下面这个建筑公司的首页,采用了方形的元素进行大小层次感的相互结合起来,让整个画面变得极其有稳重感,让原本网站上复杂而多的类容,变得条理清晰,干净简洁。同时在画面的版式也是独裁新意。

在网页设计中,如何运用方框/方形元素?

05 信息引导的作用

在复杂而多的海报或者网站架构中,利用方框进行信息引导是非常有效而且新颖的表现方式。

以下网站是左侧一个男模特的网站,整个banner采用了红色调,设计师为了让用户快速往下浏览,所有大胆的添加了红色系的方框,有效的引导了用户的视觉,从上而下的浏览,同时使得整个画面不会出现头重脚轻的问题。另外这样的处理让整个版面设计上更加新颖,使得作品脱颖而出。

右边是阿迪达斯的一个品牌网站,设计师利用了方形的元素作为视觉引导,将用户的视觉一步一步的从引导下去,了解他们的全部商品。

在网页设计中,如何运用方框/方形元素?

下面一组时尚的海报设计,这里将文字利用方形的规律进行引导排版,让用户有顺序的阅读。

在网页设计中,如何运用方框/方形元素?

06 让文字之间相关联

下面海报设计,如果按照正常设计师的话,对于文案的处理方式,肯定会根据文案信息以及海报架构进行分散排版设计。

这样的处理方式,对海报的画面要求会比较高,如果海报比较乱的话,哪么文案的识别性就会降低,为了解决这些问题,设计师选择了方框的元素,利用方框讲文案信息关联再一起。然后再利用方框的大小,根据文案内容的主次进行合理的组织分配。这样不仅让视觉上的到别具一格,而且也降低了画面上其他的元素对文案内容的干扰。让用户第一视觉了解到海报需要传达的信息。

在网页设计中,如何运用方框/方形元素?

下列海报设计中也利用了方框的元素,让文案信息相联组织在一起。通过改变方框的大小,来突出文案信息的主次之分。视觉上给用户舒适的体验,画面也会让人难以忘记。

在网页设计中,如何运用方框/方形元素?

如果我们在设计中充分利用上述几个表现方式,相信我们的设计一定会脱颖而出。所以设计优秀的作品并不难,难的是你去发现优秀作品的规律。当然还有很多点值得我们去发现~

应用

上诉讲到了方框元素的作用,哪么我们来说说方框 方形元素经常运用在那些地方。

01 网页板块

 方框方形元素,经常运用于网页中的各大板块,它们能够有效的将网页中的元素变得条理清晰等,那么我们来看看下面一些案例是如何巧妙的运用方框。

下面是一个旅行网页。整个网站用了大面积的方形元素,利用这些方形的大小和改变长宽比例来错列排版,使得整个网页信息分类明确,节奏感十足。

在网页设计中,如何运用方框/方形元素?

一些商城网站也融入了方形的元素,有效的管理和整合了各类商品信息,同时也利于网站适配不同端口设备展示:

在网页设计中,如何运用方框/方形元素?

02 btn按钮,搜索,表单 等

网页中常见的按钮,其实近几年开始流行的幽灵按钮(透明按钮)就是大量借鉴了方框元素,当然实心按钮也采用了方形元素。下面我们来看下运用了这些元素的案列。

下面整个网页色调明亮清新,除了渐变的背景就是内容。高饱和度的蓝色背景里有点状的世界地图作为纹理点缀,使之不显得单调。

大小错落的内容靠左对齐,下面设计师在按钮上利用了框型的元素设计了幽灵按钮,使得整个文字内容搭配更加通透。

在网页设计中,如何运用方框/方形元素?

这个网站使用了视频作为背景,访问者只需要通过变化的背景就可以明白组织的工作流程。通过调色之后的背景视频并不影响前景的Logo、设计师利用了框型的元素设计了幽灵按钮,使得整个网站显得巧妙而优雅。

在网页设计中,如何运用方框/方形元素?

下面是网站中一段引导语,采用浅灰色的背景加上文字在一起,加上一定的留白,整个画面显得洁净而优雅。设计师在这里采用方形元素来设计了实心按钮,使用户对新页面起到了引导作用。

在网页设计中,如何运用方框/方形元素?

下面网站是利用了方型/方框的元素,来设计了 表单和搜索框部分,表单部分让原本复杂相互干扰的文案信息变得条理清晰,画面简洁。搜索框部分视觉强化,引导用户进入网站搜索获取内容。

在网页设计中,如何运用方框/方形元素?

03 图片

现在越来越多的方框/方形元素出现在网站图片中,下面案例是一个标准的图文结合的设计案例,设计师为了让图片和文案左右两边的视觉平衡,于是加入了方框/方形的元素与图片进行结合。瞬间整个画面变的富有设计感起来了。

在网页设计中,如何运用方框/方形元素?

下面案例图片中设计师为了让多张图片进行统一 协调起来,也加入了方框的元素,给用户传达了三块内容的体系关系,让原本简约而优雅的画面变得多姿多彩。

在网页设计中,如何运用方框/方形元素?

一个人物如何简单的让他在平面中变得有立体感?下面案例设计师采用了框型的元素,与人物结合起来,让原本没有空间感,头重脚轻的男士,变得稳重而富有层次,同时也抓住了用户的视觉。让原本平淡的页面变得富有创意。

在网页设计中,如何运用方框/方形元素?

04 文字

复杂的文案排版起来单调,过于平淡,无层次感?哪么我们来看看方框/方形是如何解决这些问题的。

下面案例中,设计师在这段文案进行设计排版的时候,如果素材有限不能放图片,如何才能让它们变得富有设计感,左右平衡呢?于是设计师将左边的文字与方框元素结合起来,轻松的解决了这个问题。

在网页设计中,如何运用方框/方形元素?

下面案例中,设计师如何巧妙的利用方形元素,将banner 和内容两块连接呢?原本应该放置在banner 上的文字,被放在了方形色块上,不但在传统的版式架构上得以突破,而且引导了用户从上而下的阅读信息。

在网页设计中,如何运用方框/方形元素?

下面案例中,banner中的文案只有一句话,搭配其他产品。设计师利用方框元素,将分散的文字变成了整体,所以使瓶子靠在文字上,给人更安全稳定的感觉。

在网页设计中,如何运用方框/方形元素?

下面案例中,设计师利用方框元素,将一个图形与文字进行结合起来,让整个文字的疏密对比性加强,即使没有图片也能 瞬间提升整个画面的创意。

在网页设计中,如何运用方框/方形元素?

文字这一块就不多讲啦,还有很多的运用,等待你们去发现。

05 VI logo

方框方形的元素如果放在VI 中结合,是不是很有趣~

以下是1+手机的Logo ,通过结合了方框的一部分,两边的线条将用户的视觉引导至+的图形上去,即使在不了解这个品牌的用户 也能够快速的阅读了解这是1+(个人见解)。

搭配整个画面,大量的留白,左上-右下的视觉定律,让画面变得简约而不简单。

在网页设计中,如何运用方框/方形元素?

在网页设计中,如何运用方框/方形元素?

类别

这里我就不做细的分析啦~主要在于大家的灵活运用。

01 方框之间的结合

方框/方框之间的结合,一般主要是用在复杂而多的文案内容中间,起到相互关联的作用,让彼此更加的紧密。

在网页设计中,如何运用方框/方形元素?

02 方形与方框之间的结合

这样的方式开始流行了,主要的作用是用来修饰过于单调的物体,丰富画面的美感,以及平衡左右关系。往往方框和方形之间会伴随着图片或文字一起出现。

在网页设计中,如何运用方框/方形元素?

在网页设计中,如何运用方框/方形元素?

03 用于标签部分

在网页设计中,如何运用方框/方形元素?

表单按钮之类的就不做举例子啦,大家都知道~

04 大的方框/方形

大的方框/方形主要运用于海报之中,或者网页的架构上等较多的信息内容中。

主要作用在 起到画面协调,强调 ,区分等等用途。

在网页设计中,如何运用方框/方形元素?

05 残缺的方框/方形

这类元素往往结合文案一起展示,主要通过方框的线条将用户的视觉中心指引到作者想要表达的内容。

在网页设计中,如何运用方框/方形元素?

 

作者:俊敏

来源:微信公众号「WEB」,ID:web-deisgn

本文由 @俊敏 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23967/

logoUIUXWEB产品产品经理实战案例微信用户素材网页设计视觉设计设计师设计方法设计案例转载
赞 (0)
CatherineCatherine
0
生成海报
三八XX节专题页设计该怎么玩?看这篇就够了!
上一篇 2017-05-07 03:38
干货贴:To B 系统软件Web端的交互设计总结
下一篇 2017-05-07 05:30

相关推荐

  • 分身乏术?来学学交互设计的优先级判断与排期协同 交互设计

    分身乏术?来学学交互设计的优先级判断与排期协同

    在被密集需求轰炸(需求本身都具备一定合理性,不包括那种应该拒掉不接的需求),同时自己还有一堆想自发驱动去做的事情时,交互设计师该如何进行合理的设计优先级判断,分解需求排期推进呢?来看今天的实战经验!

    2017-05-23
  • 交互设计

    我们如何有所作为的设计经验?:在DfE的教训- 有效用户体验

    它并非罕见,请参见语句喜欢"让世界更好的地方,在一段时间的一次经历"在用户体验从业者的生物。这些都是崇高的索赔,但当你的工作都是围绕创造产品和服务,使人们更加快乐和多产,很容易看到如何思考这种悄然而至。

    2014-12-28
  • 最浓缩的概念:一句话明确UI本质,区别真伪UI 交互设计

    最浓缩的概念:一句话明确UI本质,区别真伪UI

    我同意一种观点,成人的知识学习体系最好的其实是慨念性的。因为,我们面对的社会不再是以前学校里老师给方向,让我们去找方法。而是方向我们自己思考自己找,然后针对自己的思考出的方向再去找寻相应的方法。所以,在现实工作生活中,别人的一个方法看似有效,其实未必可行。这也是很多人的成功其实并不可复制是一样的道理。

    2017-05-25
  • 用户心理研究:制造期望与控制期望 交互设计

    用户心理研究:制造期望与控制期望

    在这之前,还请大家先跟随着我回想几个电视电影经常能够看得到的情景。当然,以上只是部分情景,实际上还有数之不尽的情景,你闲着没事可以自个儿多整理些出来。通过上面三个情景我们可以看到剧中人所制造出的三个期望:

    2017-05-29
  • 微信热点

    线框仔,你知道交互设计在未来会多火?

    对你而言,它可能还是未知数。这是康石石撰写本文的首要初衷,我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计师是给APP动效的3.交互设计师都月薪上万,且薪资上涨空间高,酬劳丰厚。其它就不清楚了。。。以下康石石引用《女神进化论》创始人--寺主人在知乎关于交互设计师目前生存现状的一段描述,供大家了解行业目前基本情况:月薪<10k俗称“线框仔”,出没于小...

    2018-04-17
  • 微信热点

    Sketchbox:会画图就能使用的AR建模应用

    在目前的情况下设计虚拟现实和增强现实产品并不容易,仍存在挑战。Unity和Epic Games可以说是现在比较常用的编辑应用,帮助用户以非常精确的方式去编辑虚拟现实内容。但需要指出,这两者都是为已掌握相关技术的人群所提供的技术项目,虽然没必要会写代码,但是了解一些简单的原理和技术能达到的界限也还是需要的,从这方面看,设计VR或AR产品的门槛相对还是比较高的。最近,Y Combinator的最新一期项目中的Sketchbox可以帮助设计师...

    2018-03-23
  • 微信热点

    CTB50成员周红军| 从互联网用户体验谈交易银行创新发展思路

    诚邀各领域专家学者、从业者及机构投稿或荐稿与30余万行业精英分享与共同发展投/荐稿邮箱:tougao@sinotf.com中国交易银行50人论坛:客户在使用交易银行服务过程中所关注的用户体验,是竞争激烈的交易银行服务能否在市场上取得优势地位的决定性因素。文/安邦保险集团国际部总经理、中国交易银行50人论坛(CTB50)成员 周红军来源:中国交易银行50人论坛 学术成果汇编(2017)当下,随着互联网技术的迅猛发展,各行各业已经融入到“互...

    2018-03-31
  • 留白这种设计手段的4大必要功效 交互设计

    留白这种设计手段的4大必要功效

    留白不只是空白的画布,它是一个功能强大的设计工具。留白是很难掌握的,留白的应用是包含艺术与科学。真正了解多少空白位置才足够创造一个良好的布局需要多实践。你设计得越多,你就会学得越多。“Whitespace is to be regarded as an active element, not a passive background” — Jan Tschichold
    “留白不单单是一个被动的背景,而是一个活跃的元素。”Properly using whitespace between paragraphs and in the left and right margins can increase comprehension up to 20%
    适当的运用段落之间的留白和左右边距的留白能有效增强理解力高达百分之20.The more whitespace around an object, the more the eye is drawn to it
    越大的留白空间包围一个物件,越多的目光就会集中在这个物件身上。As designers, it’s our responsibility to create usable communication vehicles.
    “作为设计师,我们职责就是去创造“沟通手段””Let the products speak for themselves
    让产品自身为自己说话。

    2017-04-28
  • 浅谈微信应用交互设计 从零开始学交互

    浅谈微信应用交互设计

    微信应用相信大家都不陌生,比如前段时间风靡朋友圈的神经猫,就创造了三天过亿访问量的神话,开发一款好玩有趣的微信应用,通过微信朋友圈的自发传播,达到品牌和产品的有效推广,是当下很多企业都在尝试的,但事…

    2017-08-02
  • 微信热点

    改善用户体验或是中小型IOT平台突围的唯一出路

    全屋智能、智慧城市成人们关注的新焦点,智能音箱、智能冰箱、智能手环、智能珠宝皆得益于物联网的发展。据推测,在2045年,最保守预测将会有超过一千亿的设备连接在互联网上,而最先在物联网上开花的便是智能家居了。网上数据显示,2021年全球智能家居市场规模将达5000亿元。前景如此可观的智能家居市场不仅催生了不少了智能家居企业,同样也催生了不少提供智能化解决方案的物联网平台,如国外的AWS、IBM、微软、谷歌,以及国内阿里云、京东微联、华为等...

    2018-05-08
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress