四大基本原则

1.对比
避免界面中的元素太过相同。如果元素不相同,那就干脆让他们截然不同。让界面引人注目,对比是一个重要因素
2.重复
让设计中的视觉要素在整个作品中重复出现。重复颜色、形状、材质、空间关系、线宽、大小和图片等。
3.对齐
任何东西不在界面中随意安放,每个元素与页面上其他元素有某种世界联系。建立清晰、精巧和整体性的外观
4、亲密性
彼此相关的项应当互相靠近,归组在一起。如果多项之间有很强的亲密性,将它们视为一个视觉单元,而不是鼓励的元素。
这样有助于建立组织信息,减少混乱,为读者提供清晰结构

亲密性

1.将相关的项组织在一起,指物理位置相互靠近,这样相关的项将被看做一个整体。

2.要依据元素之间的关联性来判断亲密性,元素在内容上有关联性,那么在视觉安排上就要有关联性

3.空白可以表达关系,通过空白可以将有关联的内容分成几个组。

4.亲密性原则需要我们更加关注空间,通过合理利用空白让信息之间进行分类。

小结
如果项之间存在亲密性,则将他们视为一个视觉单元,而不是多个孤立的元素。要有意的注意到阅读的顺序,视线如何移动,从哪里开始沿着怎样的路线,在哪里结束。

注意问题
避免界面上出现过多的孤立元素
不属同一组的元素不要建立联系!如果无关,则要分开
不要仅仅因为空白将元素放在角落或中央

对齐

1.原则是任何元素都不能随意安放,每一项与某个内容建立某种视觉联系。
2.页面上只使用一种对齐方式
3.我们的大脑喜欢看有序的东西,这会给人一种平静、安全的感觉。降低大脑处理信息的难度,有助于信息的表达。

图片.png

上图外观强差人意,但是没有对齐

图片.png

图片.png

上图没有明确的右边界,但是将标题居中,看起来会非常杂乱

图片.png

上图以左边界为明确基线,标题和文字都以此基线为准。

图1.png

图2.png

图1虽然在左边有一条明确的基线,但是在右边与图片之间有部分空白,这部分的形状很难看,这部分空白将左边的文字和右边的图片分开
现在图片在左边使基线按照图片右侧为准,这样更加明确清晰

重复

1.设计的某些方面要在整个作品中重复
2.重复的宗旨是将整个作品联系在一起,提供统一性
3.根本目的是统一,增强视觉效果。

避免
过多的使用同一个重复元素

对比

1.页面之间的不同元素有对比效果,以达到吸引读者的对比效果

图片.png

图片.png

图片.png

图片.png

去掉居中对齐,用其他对齐方式
找出最重要的东西加以强调
把最重要的东西放在一起,这样读者就不会错过重点
将有逻辑的东西归为一组,合理利用空间,将各项分开或联系起来

颜色运用

色轮

图片.png

图片.png

图片.png

颜色关系

1.互补:色轮上相对的颜色为互补色,最佳的搭配是一种作为主色,一种用于强调

图片.png

2.三色组:彼此等距的三只种颜色会形成让人愉悦的三色组

图片.png

3.分裂互补三色组
从色轮一边选择一种颜色,再找出它的互补色,不过直接使用,而是使用它两侧的颜色

图片.png

4.类似色
由色轮上相邻的颜色组成

图片.png

5.暗色与亮色
纯色就是色调,向色调添加黑色或者白色,可大幅拓展色轮。添加黑色就是暗色,添加白色就是亮色。

图片.png

6.单色
由一种色调,及对应的多种亮色和暗色组成。

图片.png

7.色质
色质是指某种颜色的特定明暗度、深浅度或色调。如果色质相近,看上去会模糊不清,对比太微弱。

图片.png

8.暖色与冷色
暖色(红色或黄色)冷色(蓝色)
冷色更趋于做背景

更多技巧提示

建立包装品牌


http://www.taodudu.cc/news/show-4876299.html

相关文章:

  • 《写给大家看的设计书》粗读整理
  • PyQt5-小案例(复数计算器)
  • 中科院分词ictclas50 web项目 linux,NLPIR/ICTCLAS2014中科院分词系统Api接口 For 易语言...
  • ictclas java版_10分钟开始使用ICTCLAS Java版
  • 中文 NLP (2) -- ICTCLAS分词
  • 武汉科技大学机械原理课程设计——飞剪机构尺寸设计matlab语言
  • 中国石油大学《机械设计课程设计》在线考试
  • 计算机和机械课程有关联吗,机械工程及自动化有哪些课程
  • 计算机课程设计参考文献,近几年课程设计参考文献 课程设计参考文献有哪些...
  • web安全渗透测试的大纲
  • 渗透测试之社交工程攻击
  • 渗透测试培训必会工具xray扫描器被动扫描的使用(二)
  • 渗透测试培训必会工具xray扫描器的使用(一)
  • [ 渗透入门篇 ] 从渗透测试执行标准着手的渗透学习大纲。掌握了这些知识点还担心找不到工作?
  • 渗透测试培训必会工具xray扫描器反连平台的使用(三)
  • web渗透测试培训,如何做信息收集?
  • Quartus计算机组成与设计实验原理图整理(十)——二进制补码加法器实验
  • 山东大学软件学院计算机组成原理实验3
  • 全加器在计算机的应用,两个半加器组成全加器的做法 浅谈全加器和半加器的应用...
  • Quartus计算机组成与设计实验原理图整理(一)——基本逻辑门逻辑实验
  • 基于74ls194的m序列发生器(硬件)
  • 基于89c51的74ls138模块的四位数码管动态显示
  • 数电实验(组合逻辑电路、时序电路,555定时器)
  • AutoCAD 2016 for Mac
  • 《程序猿和攻城狮》 --南京大学软件学院导学课 测试一答案
  • 攻城狮生活-5 房子置换很难
  • 攻城狮生活-4 高架桥惊魂一幕
  • 攻城狮生活-3 奇怪的司机
  • 强力推荐各位攻城狮查看,收藏IT职业技能图谱(全套13张)
  • 攻城狮生活-1 与老司机的斗智斗勇

《写给大家看的设计书》- UI设计必看相关推荐

  1. 关于产品设计和UI设计

     因为题主没有特别提到具体的要求,刚好这两天自己也在研究,提两个方向的: 第一个方向:快速开发 --- 2014.04.29 update--- 0.Marvel 最近在使用 Marvel Fre ...

  2. 费诺编码的gui页面设计_GUI设计和UI设计有什么区别?

    首先从技术的角度分析两者处于包含与被包含的关系. GUI=Graphical User Interface,是指在计算机出现后,在屏幕上使用图形界面来帮助(User)与机器打交道用的界面接口,泛指在计 ...

  3. php++ui设计课程,UI设计主要学什么?

    UI设计是指对软件的人机交互.操作逻辑.界面美观的整体设计:UI设计中文名字叫:用户界面设计.UI设计作为时下热门高薪职业之一,其发展前景不言而喻,应用领域非常广泛,那么UI设计都需要学习什么呢?下面 ...

  4. html和ui有什么区别,前端设计和ui设计的区别是什么

    前端设计和ui设计的区别有研究方向不同,ui是用户研究.交互设计.界面设计,web前端是html.css.js等需要编写代码:职业机会不同,ui设计:前端开发工程师.资深前端开发工程师.前端架构师等, ...

  5. GUI设计和UI设计有什么区别?

    首先从技术的角度分析两者处于包含与被包含的关系. GUI=Graphical User Interface,是指在计算机出现后,在屏幕上使用图形界面来帮助(User)与机器打交道用的界面接口,泛指在计 ...

  6. “春节退出酒场告知书”,公务员必看!

    "春节退出酒场告知书",公务员必看! 来源 | 人民日报.中国之声.新华每日电讯 春节临近,各种聚会应酬也随之而来,喝酒也成为很多饭局的必有活动之一. 最近,一封<2018年 ...

  7. 分析交互设计和UI设计的区别!优漫动游

      很多刚入行的设计师甚至是一些公司,其实对于交互设计和UI设计这个岗位的认识是非常不清晰的.   下面优漫小编带大家了解交互设计和UI设计应该关注的一些问题   1.想法由公司高层或项目负责人提出, ...

  8. 学英语看美剧学地道英文必看的10部美剧!

    学英语看美剧学地道英文必看的10部美剧 1.Desperate housewives 绝望主妇 时而压抑.时而诙谐.人物性格刻划得鲜明,只是觉得剧情不是那么贴近生活,不过里面的句子还有哲理性,几个主演 ...

  9. Ubuntu18.04.1 64位 安装ns2.35全过程--水逆选手必看!!高版本Ubuntu必看!!

    Ubuntu18.04.1 64位 安装ns2.35全过程--水逆选手必看!!高版本Ubuntu必看!! ...前言 Step1: 更新系统 Step2:安装ns2需要的几个包 Step3:下载安装包 ...

  10. android ui秘笈,看图说话 – Android UI 设计秘笈 :Part I

    Android 的官方开发者博客发了一份幻灯片,介绍了一些 Android UI 设计的小贴士,Roger 在这里以看图说话的形式发出来,有兴趣的读者就继续往下翻吧.整个 PPT 共分5个部分,Par ...

最新文章

  1. 阮一峰老师的ES6入门:async 函数
  2. 微服务框架-Spring Cloud简介(一)
  3. I2C总线学习(二)--数据传送格式
  4. python从入门到爬虫_python爬虫从入门到放弃(一)之初识爬虫
  5. TGE学习笔记07 - 脚本控制动画
  6. 通过连接池无法连接mysql_连接池无法链接数据库
  7. luogu P1020 导弹拦截
  8. 语言能控制鼠标滑轮吗_家长的“语言暴力”到底有多可怕,孩子能承受的住吗?...
  9. JAVASCRIPT 基本数据类型
  10. python bind_all_【Python】__all__ 暴露接口
  11. android xml显示调整,AndroidStudio中怎么设置xml与预览同时显示?
  12. Dot Graphiz 操作说明
  13. 现阶段的主流数据库分别是哪几种?
  14. 期权定价模型BS模型及反推隐含波动率 golang实现
  15. centos7.X版本如何下载网络流量实时监控工具iftop
  16. P4408 [NOI2003] 逃学的小孩 题解
  17. CSS 选择器及常用属性介绍
  18. 上市不到一年,京东物流CFO马越“跑了”,市值累计蒸发1300亿元
  19. vue集成汉字转拼音并提取首字母(附多音字解决方案)
  20. el表达式ne什么意思_JSP中EL表达式的用法详解(必看篇)

热门文章

  1. Android商城开发----点击加入购物车,购物车商品的增删减
  2. 模糊神经网络应用实例,模糊算法和神经网络
  3. GSAT:一种新型植物线粒体基因组组装工具
  4. 中科软测试面试题2019_中科软寿险事业部测试面试题
  5. 电力系统嵌入式设备测试工具
  6. 怎样用计算机做一个电子地图,电子地图如何制作简介-20210525123653.docx-原创力文档...
  7. Rosbag格式在线解压缩
  8. 达梦环境配置ODBC驱动
  9. 将NSString转换成UTF8编码的NSString
  10. Java 通过使用递归函数实现树状结构