失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 提升UI设计 你需要这几个小技巧

提升UI设计 你需要这几个小技巧

时间:2019-07-17 04:55:55

相关推荐

提升UI设计 你需要这几个小技巧

今天与大家分享的内容主要关注的是:交互界面UI设计的基础原则。一共有11条原则,短小精悍,看完念念不忘。

01字母间距

每次您使用完全由大写字母组成的文本时,请不要忘记设置字母间距。这样可以防止字符彼此粘连,并使文本更具可读性。

02 Light,Thin and Hair Font Styles

您需要谨慎使用这些样式。如果您要制作一种最终会在屏幕上看到的产品,那么最好不要选择""thin""和""hair style""的字体,因为它们很难阅读,并且可能在某些屏幕上造成半像素损坏的效果。

03 行高(Line Height)

在排版时候最好不要将行高设置保留为自动值。通常,您必须稍微增加一点行高以提高文本的可读性。对于大型文本块尤其如此:例如网站或移动应用程序的博客,文章等。

04 文本和标题层次结构(Text and Headings Hierarchy)

粗体文本应用于突出显示文本的重要部分。这不仅包含标题,链接和按钮,有时还包括文本的强调部分。如果将粗体用于整个文本,将不清楚在哪里查找以及更重要的内容。在设计过程中,我们必须正确地强调重点内容。

05 文字对比(Text Contrast)

在设计过程中,文本的颜色十分重要。它应该具有足够的对比度,以便在任何类型的设备平台上上都可以方便地读取文本。这对于经常使用浅灰色的输入字段中的占位符(placeholders)尤其重要。

06 摆脱多余的框架和线条

除了使用线框对模块进行区分,我们仍然可以使用其他的办法来区别不同的文字和语义模块:例如阴影或间距。

07 边距

边距有助于帮助用户区分不同模块之间的内容。在下面的案例中,右侧的卡片中,文字紧紧地排列成了一个文字模块的整体,与图片保持清晰的距离,有助于用户进行阅读。

08 屏幕边缘空白

如果您处理海报,横幅或卡片,请注意边缘的空白。如果以经典方式(从左上角到右下角)布置内容,我们可以调整边距,使上边距比左边距更大。这丛视觉上将优化用户体验。

09 阴影

物体下方的阴影绝对不能为黑色。避免在项目中出现“脏污”,不自然的阴影。

10 图标规范

如果您正在为网站或应用程序处理一组图标,请确保所有图标都有一致的规范。这意味着相等的笔触宽度,相等的边框半径。图标应具有一致的样式。

11 避免使用怪异的布局

请使用常规的顺序排列元素(图像,标题,文本和日期),否则可能会影响用户的阅读体验。

看完以上设计原则,是不是觉得都很简单呢?其实每个规则都有其例外,在某些情况下,我们应该反其道而行之。但是在大多数情况下,这些技巧将有助于改进您的设计。

如果您学会了,别忘了分享给更多人以及点「在看」哦~感谢您的阅读。文章来源:美国交互设计资讯

最大的变化是从LOGO中移除「短视频」字样,同时将「抖音」字体的重新设计。被疫情突袭后不少企业延后复工制造和研发停摆今年的产品升级应该怎么办?3月31日晚8点(本周二)着名设计策略与趋势专家,黄晓靖将带来精彩直播《备战疫后,半小时学会四大色彩趋势》原价199元,限时免费抢先预约!

直播福利

1、有机会获赠500元的以德国劳尔色彩RAL COLOURS标注的《中国设计趋势报告》限量趋势色卡;

2、还有机会获得88元美啊学习券,先到先得~

学设计,上美啊!微信交流群已开通~

相关精彩:抖音更新LOGO,新字体顺眼多了!iPhone12刘海终于去掉了,这颜值无可挑剔啊!YouTube音乐夏令营的品牌动画设计,燃爆了!VR干货!这里有最全的Oculus Quest手势追踪设计指南全套!武藏野美术大学「zero to one」开放日视觉设计!苹果或于3月31日举行发布会:iPhone 9+浴霸iPad柔性屏和双屏来了!设计师必备跨屏交互设计规范(详尽)远程设计合作的4条准则用户体验中的5条视觉设计原则「壁纸」快来获取最新的苹果内置壁纸分享不易,记得点「在看」哦~戳这里,学习更多设计干货!

如果觉得《提升UI设计 你需要这几个小技巧》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。