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

相关推荐

  • 做交互方案时,请注意检查这4个点 交互设计

    做交互方案时,请注意检查这4个点

    作为一名交互设计师,到底什么程度才能算得上是“专业”?成为一名专业的设计师是否有方法与捷径呢?答案是肯定的,但是今天我分享的内容还不敢称之为体系,只能说是几个小小的经验吧,希望能给正在奔向专业路上的你有所启发。

    2017-05-11
  • 微信热点

    【UI交互设计】首月结课作业展示

    花瓣美素是全国最大的版权素材平台,本文章内学生作品图片,未经允许,严禁抄袭和转载。花瓣网丨花瓣美素教学中心,承担天津市大学软件学院数字媒体专业UI交互设计方向120人的教实训任务,在刚刚过去的第一个月里,通过同学们和教师团队的不断努力,专业核心课程《图形图像基础》和《用户体验设计》等两门课程教学任务圆满完成。《图形图像基础》是UI交互设计专业的专业必修课。通过企业教师的认真指导和对该课程的学习,同学们对UI交互有了进一步的了解,在企业教...

    2018-04-17
  • 极简主义风格:要讲究四大设计要点 交互设计

    极简主义风格:要讲究四大设计要点

    极简风并不是简单的做减法,这也是极简设计最棘手的地方。想必设计师都明白“少即是多”这个概念,但是要怎么在实际设计中践行这种极简设计的理念呢?今天的文章,就帮你梳理一下基本的法则,帮你在设计之前就理顺思路。“完美的设计是可以实现的,也许你还可以向其中加入更多的东西,但如果想从中移除某些元素,就完全不可能了。”

    2017-05-11
  • 交互与时间:大幅菜单的0.5秒等待时间 交互设计

    交互与时间:大幅菜单的0.5秒等待时间

    在大幅菜单中,鼠标经过区域的响应时间会很大程度的影响用户的使用体验,那么在现在具体的网页设计中体验时间都是怎么设计的呢?文章分享了几个实例,一起来看看。

    2017-04-28
  • 2018年3月交互设计招聘内推信息

    58体验设计团队——北京 交互视觉用研岗都有,欢迎各位朋友自荐或推荐,非常感谢。 简历可发给uxd-job@58ganji.com  是一直活泼可爱的团队~ 对于男设计师来说:100人里65%是女生 其中单身有1/4 机会还是很大的 阿里口…

    交互专题 2018-03-09
  • 阿里UCAN2017用户体验设计论坛的总结与感悟 交互设计

    阿里UCAN2017用户体验设计论坛的总结与感悟

    五一假期前的两天有幸参加了阿里UCAN2017用户体验设计论坛,很荣幸的领略了业内大牛们对于体验设计的理念与趋势的见解。本次论坛的主题是“新设计x新商业”,由阿里提出的新零售、新金融、新创造、新能源和新技术为起点,借助用户体验的设计赋能,来连接用户、商业与技术,实现最大化的商业目的。在沉淀了两天之后,我将从中学习领悟到的一些看法总结了下来。“利用人类的现实感官作为交互体验的手段,模拟与现实世界相似的场景,让体验特征表现的更加直观,真实。正是借助于科技的创新,一体性、真实性的交互体验才得以实现,人类与虚拟信息的交流才会越来越自然。”在既要满足一群人,又要满足个体中的一个人,包容一个人到参与群体的场景多样性。就是现在设计思维中所需要逐渐形成机器学习的共生方式。— 阿里妈妈UED总监 萧健兴“全链路设计是新技术发展下的必然趋势。”

    2017-05-01
  • 2017年交互设计的10大趋势 从零开始学交互

    2017年交互设计的10大趋势

    UI 设计的趋势是变化非常快的,有的时候我们的脚步总是可能慢了一拍。 随着 2016 年接近尾声,Lin. 为大家整理了外网大牛 Jamie Leeson 总结的 2017 年 UI 设计的 10 个重要的趋势。01. 沉浸式的全屏视频Campos Cof…

    2017-08-02
  • 「这个控件叫什么」系列之动作菜单/动作面板 交互设计

    「这个控件叫什么」系列之动作菜单/动作面板

    @龙爪槐守望者 :鉴于国内交互设计 名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计 发展,做出一点微小的贡献。

    2017-08-14
  • 微信热点

    利用github预览axure发布的文件

    目的github不仅仅可作为一款代码开源库平台及版本控制系统,百度百科对其定义为私有或开源软件项目管理平台,今天在此向不会使用Git的同学们普及下利用github预览Axure发布的原型文件。准备阶段1、github desktop。下载地址:https://desktop.github.com/2、 github账号。注册详情:https://blog.csdn.net/p10010/article/details/51336332下...

    2018-05-04
  • 微信热点

    【UED人物】朱锫:自然建筑

    近日,朱锫建筑事务所作品景德镇御窑博物馆荣获“2017年度The Architectural Review未来建筑奖”之“最佳文化建筑”(the Winner of the Cultural Regeneration category)。自此,又一位中国建筑师叩开了国际大奖之门。△ 景德镇御窑博物馆室内效果图“未来建筑奖”始于2002年,每年由英国知名建筑专业杂志《The Architectural Review》(建筑评论)评选并颁发...

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

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