• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 学会这10条设计技巧,新手也可以做出合格的设计!

学会这10条设计技巧,新手也可以做出合格的设计!

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含经验分享,设计技巧,设计方法等相关知识,希望在学习及工作中可以帮助到您

编者按:今天@喪心病狂十六夜貓?这篇译文让你get到10个简单易用的设计原理,了解这些基本规则,就算新手也可以做出合格的设计。

目录

  • 灵活使用对比
  • 「接近黑的黑」比「黑」更容易阅读
  • 重要的内容放在最初的位置
  • 将所有东西列好
  • 当心字符的尺寸和间距
  • 搜索结果非常重要的时候,请使用「列表显示」
  • 先进行黑白设计,然后再追加颜色
  • ?目标是舒适的设计
  • ?使用完美的配色板
  • 了解Apple或Google的设计原则

一. 灵活使用对比

为了减轻眼睛的压力,让我们有意识的增加对比,使用不同的背景和字体的颜色吧。

通常来说,在白色背景上使用黑色文字可读性是非常好的。避免使用明度很高的灰色或黄色、绿色,以及不使用非常细的字体,就没有什么问题。

二. 【接近黑的黑】比【黑】更容易阅读

如果有设置文字黑色的机会的话,请不要使用纯黑色(#000000),让我们来使用“灰黑色”(#333333)吧。在纯白的背景上叠加纯黑,看起来会比较晃眼,专注于文字内容会比较困难。

三. 重要的内容放在最初的位置

首先,通过布置最重要的情报,来提高网站和应用的舒适度。重要的内容,就算是没有放大、滚动、Tap,好好的表现出来也是非常有必要的。

?如何好好利用视觉层次,让我们来参考一些案例吧。在Instagram中,用户投稿的照片/视频清楚的表现出来焦点。

在Pinterest中,通过将搜索栏配置在顶部,列出了一个非常漂亮的网格式布局内容。对于应用程序来说,搜索作为核心功能能发现新的内容和情报,为了寻找Pinterest也会被使用。

?再来稍微看一些其他的案例。

在Spotify中,将音乐专辑的作品作为开头,紧接着是歌曲名,最后是配置控制按钮。相较于快进/快退,它被设计成更注重播放/录制按钮。

四. 将所有的东西整列好

在你在设计一个【和别人不同的】【有趣的】的作品之前,最先需要解决的问题是,确认各个要素之间是否对齐。只要对齐,就可以提升应用程序、网站和平面设计的外观了。

?此外,作为“对齐”有关的一个参考案例,让我们看看Medium.com吧。它有些地方看起来很可笑。

在布局的左侧,优质的内容并没有很好的体现出对齐,而右侧的主要内容却很好进行了整理排列。

五. 当心字符的尺寸和间距

通过调整字体尺寸来让阅读更方便,调整字符间距来让内容更加容易理解。

△ 适合的文字尺寸和不适合的文字尺寸适合的文字尺寸和不适合的文字尺寸

?

△ 适合的空间和不适合的空间适合的空间和不适合的空间

六. 搜索结果按顺序排列是非常重要的时候,请使用【列表显示】

众多的移动APP和Web应用中,有多少种类型搜索结果的表示方法直到现在都还在讨论。

其结果是,如果顺序是很重要情况下,列表形式将是最有效的展现方法。如果不管搜索结果的顺序如何,目的是帮助用户发现新的内容,那网格则是能带动视线的不二之选。

七. 先进行黑白设计,然后再追加颜色

用黑白的单色设计,是可以解决APP的核心问题点的一种设计。

由于颜色能无意识的反应出人的感情,在设计UI组件时可能会成为一种阻碍。

八. 目标是舒适的设计

如果想解决单手操作时带来的操作问题,可以参考下图。

?

在该图示中,直观的反应出了右手操作智能手机时的状态,在设计APP时可以有效的使用这种技术,如屏幕的下面的1/3处布置导航菜单等核心的功能。

九. 使用完美的配色板

颜色也是一门奥秘很深的艺术,为你的设计选择合适的配色是非常重要的。在Dribbble可以找到不错的调色板,非常推荐使用像Coolors或Color Claim这样的调色板生成工具。

十. 了解Apple或Google的设计原则

Apple和Google开源了对开发Android、iOS 用软件的人来说重要且极好的资源。

例如,在谷歌material的概要中,从APP设计的指导方针开始,齐聚了各种素材资源、配色、图标、部件资源。

而在Apple中,则有着Human Interface Guideline,通常被称为HIG的文件编制。该准则为你详细介绍了设计iOS应用程序所需的知识。

总结

想发现设计中所出现的问题所在,长时间的练习是非常有必要的。通过灵活使用这次介绍的设计方法,来做出更棒的设计吧。那么,一起来享受设计吧。

「实例教学系列」

  1. 《实例教学!利用「对比原则」做出抢眼设计的20个方法》
  2. 《实例教学!10个帮你运用好字体组合的设计原则》
  3. 《实例教学!12种透明背景的万能设计方法》
  4. 《实例教学!设计网页时选择配色的八个要点》
  5. 《实例教学!10个用好模糊效果的超实用设计技巧》

优设大课堂

您可能想查找下面的文章:

  • 该有的视觉元素全都有,设计不好到底差在哪里?
  • 为什么几个人的小团队更加高效更加靠谱?
  • 对于「以人为中心」的设计,你的理解可能太浅显了
  • 为什么大家都想学服务设计?来看CEO 的亲身经历!
  • 想为iPhone X设计UI?给你这11个设计小贴士
  • 疯传谷歌走All-White风?假的!其实只是合作伙伴的重设计
  • 在做产品设计的时候,预期和现实到底有多大的差别?
  • 设计出了错?很有可能是你没有问对问题
  • 为什么不要再问用户「你们到底想要什么」?
  • 想紧跟流行风尚?这5种平面设计趋势了解一下

相关文章

  • 2017-08-06用ps两分钟做个xhtml+css的网站首页
  • 2017-08-06新手建站入门教程帖⑦:做一个漂亮的网站就这么简单
  • 2018-08-23看起来很高大上的设计规范,看这篇就知道怎么用了!
  • 2018-08-23用YouTube 为例,让你轻松读懂交互设计7大定律!
  • 2018-08-23浅色还是深色?教你选择合适的界面配色方案!
  • 2018-08-23这样使用Sketch的Symbol功能,能极大提高你的工作效率!
  • 2018-08-23打包下载!23款网页设计师必备经典私藏英文字体
  • 2017-08-06网页无法打开 原来是元素div缺少结束标记
  • 2018-08-23在这些实例中,学会用动效赋予你APP生命力
  • 2018-08-23用超多App 案例,帮你掌握尼尔森十大原则

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 做设计说到底是「知人事」:专访VMware 设计主管谢雅苹!
    • 小米新品的海报背景,用这个神器可以一键生成!
    • 高手的平面课堂!网格系统的入门基础知识+案例演示
    • 使用Hexo+GitHub搭建个人博客
    • HTTP 状态代码整理介绍
    • 超多实例!解析「接近法则」在设计中的应用
    • 为什么微博不像微信一样设计得简洁?
    • 个性化创意鲜明的网站设计实例(30个)
    • 如何开好需求评审会?36氪产品总监告诉你!
    • 各主流浏览器及其内核介绍

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有