恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
7大网页UI设计技巧,无需专业背景也能掌握
0.0°

以下内容由摹客的小伙伴儿翻译,希望能为你带来一丢丢启发~ 摹客不仅仅为你提供优质快捷的设计工具和平台,我们也是设计干货的分享者。


了解摹客戳这里哦:https://idoc.mockplus.cn/idoc




以下是严肃的正文~


每个Web开发人员都不可避免地遇到需要做出视觉设计决策的情况,无论他们喜欢与否。


也许你所在的公司没有全职设计师,需要自己做新功能的UI。 或者也许你正在做一个兼职项目,你希望它看起来比另一个Bootstrap网站更好。


举起手来说:“我永远都不能让这看起来很好,我不是艺术家!”是很容易的。但事实证明,你可以用很多技巧来提升你的工作水平,而不需要平面设计的专业背景。


小编为你带来七个用来改善设计的简单办法。


1.利用颜色和字重来创建层次结构而不是用文本大小


Image title


样式UI文本的一个常见错误是过分依赖字体大小来控制层次结构。


“这个文字很重要吗?让它变大些。”


“这个文字是次要的吗?让它变小些。”


不要仅仅将所有繁重的工作留在字体大小上,而是尝试使用颜色或字重来完成同样的工作。


“这个文字很重要吗?让它粗一些。”


“这个文字是次要的吗?把颜色调浅一些。”


尝试并保持两至三种颜色:


●  主体内容要保持深色(但不是黑色)(如文章标题)

●  二级内容要保持灰色(如文章发布日期)

●  辅助内容要保持浅灰色(比如是页脚中的版权声明)

 

Image title


同样的,两种字重通常足以用于UI作品:


●  正文的标准字重(400或500,具体取决于字体)

●  着重文本较粗的字重(600或700)


Image title


UI界面要远离400以下的字重; 它们可以用于大标题,但是在较小的尺寸下难以阅读。 如果你正在考虑使用较轻的字重来弱化某些文本,请使用较浅的颜色或较小的字体大小。



2.不要在彩色背景上使用灰色文本


Image title


使文本变成浅灰色是在白色背景上去强调它的好方法,但它在彩色背景上看起来并不美观。


那是因为我们实际上在白色上看到灰色的效果,在对比度上是减弱了的。


使文本更接近背景颜色实际上有助于创建层次结构,而不是使其变为浅灰色。


Image title


使用彩色背景时,有两种方法可以降低对比度:


1.减少白色文本的不透明度


使用白色文本并降低不透明度。 这样可以让背景颜色稍微渗透,以不与背景冲突的方式去强调文本。


Image title


2.手工挑选基于背景颜色的颜色


当背景是图像或图案时,或者当降低不透明度使文本感觉太钝或褪色时,手工挑选基于背景颜色的颜色比降低不透明度更好。


Image title


选择与背景色同色调的色彩,调整饱和度和亮度,直到它看起来是ok的。


3、补偿阴影


Image title


不使用较大的模糊和展开值来使对话框阴影更明显,而是添加垂直偏移。


它看起来更自然,因为它模拟了一个从顶部照射下来的光源,就像我们在现实世界中习惯看到的一样。


这个原则同样也适用于Bootstrap Well或者是表格输入上使用的插入阴影: 


Image title



4.少使用边框


Image title


当你需要在两个元素之间创建间距时,尽量忍住马上安排边框。 


虽然边框是区分两个元素的好方法,但它们却不是唯一的方法,使用太多边框可能会让你的设计忙碌和混乱。


下一次当你找到边界时,请尝试以下其中一个想法:


1)使用边框阴影


边框阴影可以很好地勾勒边框那样的元素,精妙地达到目的并且不会分散用户注意力。


Image title


2)使用两种不同的背景颜色


通常只需要为相邻元素提供略微不同的背景颜色即可区分它们。 如果已经使用了除边框之外的其他背景颜色,请尝试删除边框,你可能并不需要它。


Image title


3)增加额外的间距


有什么更好的方法来创建元素之间的间距而不是简单增添间距? 在不引入任何新UI的情况下将元素间隔得更远是创建元素组之间区别的好方法。


Image title


5.不要放大那些注定小的图标


Image title


如果你正在设计一些可以使用一些大图标的东西(比如登陆页面的“功能”部分),你可能会本能地获得一个像Font Awesome或Zondicons这样的免费图标集,然后提升尺寸直到满足你的需求。


毕竟它们是矢量图像,所以如果增加尺寸,质量不会受到影响吗?


虽然矢量图像在增加尺寸时不会降低质量,但是当你将它们放大到预期尺寸的3倍或4倍时,以16-24px绘制的图标看起来永远不会非常专业。 他们缺乏细节,总觉得不成比例地“矮胖”。


Image title


如果你有小图标,请尝试将它们包含在另一个形状中,并为形状提供背景颜色:


Image title


这可以使实际图标更接近其预期大小,同时仍然可以填充更大的空间。


如果有预算的话,还可以使用设计用于较大尺寸的高级图标集,例如Heroicons或Iconic。


6.使用重边框为单调的设计添加颜色


Image title


如果你不是一名平面设计师,你如何在你的UI中添加那些其他设计从美丽的摄影或彩色插图中获得的视觉效果?


一个可以产生重大影响的简单技巧是为界面的某些部分添加色彩鲜艳的边框,否则会感觉有点乏味。


例如,在警告消息的旁边:


Image title


…或强调当前激活导航选项:


Image title


......甚至在整个布局的顶部:


Image title


在UI里添加一个彩色矩形不太需要什么平面设计天赋,它可以大大有助于使您的网站更富有“设计感”。


挑选颜色很难? 尝试从Dribbble的颜色搜索等有限的调色板中进行选择,以避免被传统颜色选择器的无限可能性所淹没。



7.并非每个按钮都需要背景颜色


Image title


当用户可以在页面上执行多个操作时,很容易陷入纯粹基于语义设计这些操作的陷阱。


像Bootstrap这样的框架通过提供一个语义样式菜单来鼓励这一点,无论何时添加新按钮,都可以选择:


Image title


“这是一个积极的操作吗? 将按钮设为绿色。”


“这会删除数据吗? 将按钮设为红色。” 


语义是按钮设计的一个重要部分,但是有一个更常见的重要维度:层次结构


页面上的每个操作都位于重要度金字塔的某个位置。 大多数页面只有一个真正的主要操作,一些不太重要的次要操作,以及一些很少使用的三级操作。


在设计这些操作时,在层次结构中传达它们的位置非常重要。


●   主要操作应该是明显的。 单一,高对比度的背景色非常适合。


●   次要操作应该清楚但不突出。 轮廓样式或较低对比度的背景颜色是很好的选择。


●   三级操作应该是可发现的,但不引人注目。 像链接一样设置这些操作通常是最好的方法。


Image title


“破坏性的操作怎么样,他们不应该总是红色吗?”


其实没必要的! 如果破坏性操作不是页面上的主要操作,则最好给它进行二级或三级按钮处理。


Image title


当负面操作实际上是界面中的主要操作时,保留较大,红色和粗体样式,就像在确认对话框中一样:


Image title


摹客还有新消息和你分享:


【摹客福利】

智能标注,一键切图,告别手工,PS,Sketch和Adobe XD全平台插件支持,摹客iDoc邀你体验,戳https://idoc.mockplus.cn/get-idoc注册后输入体验码 ui.cn 即可免费升级协作版。


【摹客大赛】

设计你心目中的校园社交APP,报名即送价值199元的设计大礼包,助力你比赛,报名入口:https://idoc.mockplus.cn/ux_2018


更新:2018-12-19

收藏

3人已收藏

摹客设计云

设计1+2,摹客就够了!

  • 576

    作品

  • 859

    粉丝

  • 6

    关注

  • 【摹客RP会员日】狂欢来袭!终身版团购低至5折!
  • 摹客RP买一年送一年!这波钜惠只剩最后5天!
  • 摹客RP,个人空间全新上线,享沉浸式设计体验!
  • 产品经理需要了解的前后端技术知识

    猜你喜欢

      7大网页UI设计技巧,无需专业背景也能掌握

      0.0°

      你确定要举报7大网页UI设计技巧,无需专业背景也能掌握

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年12月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      3
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录