给初学者/门外汉的五分钟设计指南。
好的设计原则对任何人来说都有用。 这个指南会告诉你一些基础设计原则,立即就能用得上并分享给别人。
如果你不相信自己能够做好设计,那么请记住传说中的人物David Eric Grohl说过的这段话:
我从不学习打鼓课程,从不学习吉他课程,我靠自己摸索。 我认为倘若你真的对什么东西有所热诚,你就会有动力,你就会集中注意力,你可以做任何你想做的事情。
——Dave Grohl,喷火战机乐队
记着上面那段话,你准备好要开始速成课了吗?让我们开始吧(没有特定顺序):
1. 足够强烈的色彩对比背景和字体必须有足够区分,阅读起来不伤眼睛。 白底黑字是最容易辨认的。 最好不要使用浅灰、黄色或绿色。 如果别人必须眯着眼睛才能看清文字,那肯定是有问题的。
UI Design Do\’s and Don\’ts
2. 深灰比黑色更好如果可以的话,尝试使用# RGB(51, 51, 51),而不是黑色,作为文字颜色。 黑白对比晃眼睛,让人更难集中注意力。
3. 重要内容放在前面布局是帮助使用App或网站的重要信息。 重要的内容应该是第一眼可见的,不需要缩放、滚动或点击。
让我们看看几个视觉层级设计的正面实例。
Instagram(下图左侧)将让用户发布的图片/视频作为焦点。
Pinterest(下图右侧)的主要功能是搜索,人们在上面浏览翻找信息。
再看两个例子。
Spotify(下图左侧)显然把唱片封面和音乐标题放在第一位,将用户操作放在第二位。 尽管操作是第二位,Spotify仍然保证播放暂停按钮的比重大于前进后退。
Facebook(下图右侧)看起与Instagram非常相似,把好友发布的内容放到前面和中心。
4. 对齐一切如果你感觉哪里有些不对,最快的解决方式很可能是把不对齐的东西全部对齐。 有时设计师会念叨需要使用“栅格”,这其实是在提醒团队需要解决对齐的问题。 保证元素对齐是改进任何App或网站的最简单的方法,可以立马让视觉效果提升10倍。
让我们再看看其它对齐案例,这次是Medium。
下面是一个Medium的页面,你觉得看起来如何?是不是有哪里不对?提示:注意左侧的对齐情况,看起来怎么样?
下图我仅仅将内容左侧对齐了。
5. 文字尺寸和留白我们是给人做设计的,不是给蚂蚁做的。 增加文字尺寸并多留些空白能够保证内容更加易读。
好的文字尺寸VS不好的文字尺寸:
好的留白VS不好的留白:
6. 如果顺序很重要的话,使用列表大部分移动/网页App有搜索功能,对于应该如何展示搜索结果,可能有些争议。
如果顺序是很重要的,那么列表是最有效的。
如果顺序不重要,并且还鼓励用户多浏览探索(像是Pinterest或Airbnb),那么网格视图就可以提供更多的信息,方便用户浏览探索。
7. 先做灰度设计,再上色灰度设计能够保证聚焦于关键的用户体验。 颜色牵扯到较多的情绪反射,并且容易打扰我们所聚焦的关键问题。
8. 让设计用起来舒服手的使用是一个重要的问题,建议参考Luke Wrobluewski的文章《Responsive Navigation: Optimizing for Touch Across Devices》
Luke画出了手机上最容易使用的部分(对于右手来说)——我挺喜欢哪些可以设置左右手的App的。
很多高效的手机App保证导航和主要操作在手机的底部。
9. 借用色板色彩是一种难以捉摸的艺术。 我强烈推荐大家去Dribbble搜索“Color Palettes”或者使用色板编辑器,如Coolors或者Color Claim。 这样做可以节约好几个小时的争论、纠结的时间。
10. 使用Apple和Google的系统设计规范这两家公司都有很棒的资源帮助任何人搭建Android或iOS的App。
例如,Google的Material里有设计原则、资源、色彩、图标和控件,能够帮助你快速开始App设计。
译者Z Yuhan:推荐我的文章《谷歌Material Design从这些方面打破了我的思维局限》
Apple则有HIG(Human Interface GUIdeline),里面罗列了有所有设计iOS平台App所需要知道的东西。
记住,设计需要练习需要一些时间和练习才能够训练出一双辨别设计的锐眼,但是你会发现上面的建议会大大提高你的设计。
suck at design
译文地址:交互进阶
译者:Z Yuhan
谈起Photoshop(以下简称Ps),我们对她简直是又爱又恨。 Ps是目前最强大的图像编辑软件,我们时常可以看到来自世界各地的Ps大神的杰作,任何可以想象得到的画面都可以使用Ps创造出来。 然而,我们又会常常深深陷入三个困境中,不能自拔:正版软件价格昂贵,自行破解的过程却困难重重;安装包大小将近1G,低配置的电脑无法流畅运行;有时遇到应急的情况,然而电脑里面没有安装Ps。 难道就没有更简单易行的解决方法来解决问题吗?答案是,有!最佳解决方案是使用在线的图像编辑工具来替代Ps。
这些在线图像编辑工具都是可以免费使用,免安装,随用随走。 下面,我们先来聊聊几个“江湖流传”较广的在线图像编辑工具。
相对来看,以上的两个方案似乎都存在着许多不方便的地方,例如,国外的网站Pixlr不支持中文,国内网站界面操作不方便等等问题,接下来要介绍的网站,不仅可以很好地解决以上的问题,而且还结合了各自的优势。 PhotoPea是个国外网站。 网站的首页就是官方的基本介绍,官方的口号是:打造先进的图像编辑器。 同时,介绍文字中清楚地标记出该网站支持对PSD,XCF,Sketch,XD和CDR等文件格式的支持。 支持多种语言,打开菜单栏上的更多选项,可以进入语言选项,里面包含了现代的主流语种,还支持中文和藏文。 中文适配的表现上还不错,但部分功能术语,比如图层样式的各个种类依旧是英文,但好在历史纪录面板还是贴心地适配了中文,所以这点不完美还是可以原谅的。 支持上传字体包,选择文字工具,在选择字体的下拉菜单中选择“loadout”就可以上传并应用本地的字体包。 支持手机端,不同于Pixlr的手机端只有照片美化,也不同于要下载安装app,Photopea可以直接在手机浏览器网页上流畅运行。 实测在手机浏览器上的打开链接速度较慢,在微信上打开链接的速度较快。 至于其他的方面,就和Pixlr的表现相同了,同样是对Ps的工具以及工具的相关功能做了还原,也没有路径图层和通道,也同样有一套完整的快捷键系统。 顺便提一下,其他的工具都还原得挺好,但快速选择工具的效果并不理想。
这些在线编辑器都提供了免费、便捷、易于上手的图像编辑服务,满足了不同用户的需求。 在选择时,可根据个人习惯、功能需求以及操作体验进行挑选。 希望以上内容能帮助您找到合适的在线图像编辑工具,让您的创作之路更加顺畅。 无论您是图像设计初学者还是专业设计师,这些在线编辑器都能提供足够的功能和便利,帮助您实现创意。
在探索设计界的瑰宝时,我们精心挑选了这22款卓越的UI设计工具,每一种都以其独特的优点在设计领域熠熠生辉。让我们一起揭开它们的神秘面纱:
1. Marvel: 简洁的界面,它为你提供了一个理想的平台,让你可以轻松构建页面并模拟原型,其与各种平台的集成使其更具效率。11. Figma: 作为实时协作的佼佼者,Figma以其快速设计和无缝协作功能,成为团队合作的理想选择。
12. Framer X: 专为经验丰富的设计师打造,Framer X让你在原型和交互设计上游刃有余。
13. Flinto: 简单易用,Flinto让你能够轻松创建交互和动画,即使是初学者也能得心应手。
14. Principle: 专为移动应用动画交互设计量身定做,帮助设计师在视觉表达上独树一帜。
15. UXPin: 大型项目和设计系统的全链路解决方案,提升团队协作的效率和质量。
16. ProtoPie: 在复杂交互设计中,ProtoPie凭借对智能设备传感器的精确控制,为创新提供了可能。
17. Justinmind: 无缝融合Sketch和Photoshop,Justinmind是原型制作的全能选手。
18. Origami Studio: Facebook的设计力作,功能强大且易于掌握,助力你的设计实现突破。
19. Fluid: 一款兼顾速度和灵活性的原型与设计工具,满足你快速迭代的需求。
20. Keynote: 跨足演示文稿和动画设计,Keynote用其强大的视觉表达力提升用户体验。
21. GRTC: 专为设计师量身打造的排版比例计算器,确保每一个细节都精确无误。
22. Zeplin: 后期设计与预开发的桥梁,与你的原型紧密结合,确保设计落地的精准。
想要深入了解这些工具的深度特性和应用场景?请进一步咨询我们的专业团队,我们将助你发掘更多设计可能性。设计路上,我们与你同行!
本文地址:http://www.hyyidc.com/article/63178.html