开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
10 个构建 SaaS 应用的 UI & UX 小技巧 - 技术翻译 - 开源中国社区

10 个构建 SaaS 应用的 UI & UX 小技巧 【已翻译100%】

标签: <无>
oschina 推荐于 3个月前 (共 10 段, 翻译完成于 05-21) 评论 0
收藏  
0
推荐标签: 待读

从 SaaS 应用中获取一个漂亮的 UI/UX 对于知道如何编码但不善于设计的开发者来说会是一个真正的挑战。我有软件工程师的背景,一直在维护 https://checklyhq.com ,并为其撰写博客,我收到了大量关于我正使用的 UI 框架的问题。

反对者:这就是 Bootstrap 和一些 Vue.js !

献上我的技巧,让你的 UI 脱颖而出并且闪闪发光。遗憾的是,这并不容易。生活是痛苦的。内容(充分)按照主观重要性排序。

kevinlinkai
 翻译得不错哦!

1.眼睛比数学或代码更重要

你所有的developer synapses都会在这一次触发。 但有时候,很明确地对网格和边缘和字体大小平等划分看起来却很糟糕。

相信我,我学习了计算机科学,也学习了艺术史(实际上是真的!)。 在12px网格上标题看起来比用一个13.7px的边距更好。做到这一点。 对于我的品牌标识,我调整了其各个部分的高度和宽度,直到它“感觉正确”,调节CSS的内容。

在数字上的工作并不总是用眼睛看的, 比如下面的视频启发了我

凉凉_
 翻译得不错哦!

2.表单,模态框和标签可解决99%的用例

使用像Github,Travis,Stripe,Digital Ocean甚至AWS这样的站点给我上了一堂重要的课程:即便在2018年, 基于表单的页面带有用于更复杂和上下文相关的交互的部分和模态框的标签,可以解决99%的问题。



当试图创建一个屏幕页面时,我总是会回到这种模式。它总是以最简单和优雅的方式解决问题。

3.把你的白色空间加倍

我第一次调整到我的CSS是增加更多的白色空间,那里已经有相当多的白色空间。白色空间解决了大量的信息订购和视觉层次问题。在垂直的白色空间,你可以完全坚持,因为人们不介意滚动。登陆页是一个很好的例子,你可以在白色空间中承载它们。



但不要迷失在padding和margin的使用中,最好使用这些简单的规则。

    1.在您的SCSS,SASS,Stylus或任何您使用的CSS预处理器中创建一个$ spacer变量。 Bootstrap默认使用1rem。

    2.在您的margin和padding定义中使用该$ spacer的倍数。再次,不要害怕混淆均匀或不均衡之间的分歧。如果看起来好,就使用它,比如

margin-bottom: 1.5 * $spacer;padding-top: 1.2 * $spacer;
凉凉_
 翻译得不错哦!

4. 只需使用bootstrap和一些自定义

也许这个建议应该是第一个。以上的建议和这个帖子中的下一个提示都是在Twitter 的bootstrap下解决的。bootstrap能够帮助改善那些很多看起来像samey和仍然使用 jQuery 的落后网站。

这些批评很容易解决, 而且由于其年龄和多年工作的人员的经验,他们从框架中做出的令人难以置信的大量决策中也分散开发人员的精力

那么如果你正在构建一个SPA,如何避开jQuery? 很简单,只要使用像(真棒)https://bootstrap-vue.js.org/ 如果你像我一样使用Vue,或者如果你在React land中使用https://reactstrap.github.io/

如何避免的看起来像Bootstrap的外观? 两种选择:

    1.真正的方法是:通过编辑大量的bootstrap变量来开始自定义。 小小的调整还有很长的路要走 - 更多关于下面的内容。Bootstrap网站上的文档为您提供了所有需要的信息。

    2.懒惰的方式:购买主题并复用(S)CSS。 Themeforest的管理模板部分有一些相当不错的主题。

其他像BulmaSemantic UI等框架也很棒,看起来很有光泽和“现代”。 然而,我发现他们很少提供相同的跨浏览器兼容性和健壮性。 我可能错了。


凉凉_
 翻译得不错哦!

5.颜色比你想象的更重要

许多开发人员完全低估了需要多少丰富颜色能够决定了一个网站/品牌/产品的身份。

Medium 是一个很好的例子。 它大多是白色的,有一个非常特殊的字体 - 在后面还有更多 - 一个非常可辨识的绿色品牌颜色(#018f69)。 始终如一地使用它,这使得在其他几十个博客网站中可以立即识别出来。 然后是Heroku紫色(#79589F),亚马逊橙色(#FF9900)......你明白了吧。


注意搭配:高可见性品牌颜色,加上高对比度深色的文字和低对比灰色色调的边界, 背景等

调整颜色托盘非常简单,立即将您从所有非定制的Bootstrap网站中分离出来。 这是Checkly的_colors.scss文件。 注意brand-primary和各种灰色调。

不知道什么颜色适合其他人? 我发现Adobe的色轮是一个非常方便的工具,可以找到不错的免费色彩。

凉凉_
 翻译得不错哦!

6.字体比你想象的更重要

字体就像电影中的音乐。 即使它们很少出现在主要特征中,它们也具有很多特征,意图和情感。 一个人在一片草地上行走的沼泽标准场景可以传达基于电影配乐的胜利,悲伤或悬念。 同样,只要基于字体,您的网站可以是严肃的,商务休闲的或悠闲的。 尝试在一个银行网站上粘贴Comic Sans字体,观看世界的燃烧吧。

谷歌字体很难被打败,开始探索字体如何与你想要的设计产生共鸣。 小提示:使用“自定义”文本选项来使用与您的项目相关的任何文本。

对于Checkly,我选择了一种颇受欢迎的非自由字体,称为Fakt Soft Pro。 这种字体跨越了严肃/休闲鸿沟的中点:我在Checkly的产品营销中倾向于表达:易于使用且友好,但在应用和解决问题能力方面表现非常严肃。

凉凉_
 翻译得不错哦!

7.文本无处不在

在典型的SaaS站点中,你永远不会真正使用太多的文本。不是长篇副本“战争与和平”类型的文本,而是更多正确的文字点缀在你的页面上。

这可能会变得混乱,因此为所有文本元素获取“视觉层次结构”非常重要。你将有更多想象之外的文字元素需要展示。我们来分解一个典型的屏幕页面:


    1.标题小标题将页面切分成清晰的部分。认为H1到H6。

    2.标签告诉人们他们正在处理的具体输入类型。通常很小,最好使用大写字母。

    3.内联的帮助或者只是一个段落(带有p元素)告诉人们不能立即看明白的事情。这应该是你的“正常”基线字体。

    4.工具提示只是一种隐藏的方式,可以在不将每个页面独立展示出来的情况下获得更多内联帮助。请大量使用反色背景。

    5.占位符只适用于文本字段输入,但又是可以嵌入更多帮助文本而不会产生混乱的地方。较低的对比度可以很好地抵消用户输入的实际文本。

    6.按钮可以带图标,或者可以大写。取决于你的风格。我个人倾向于点亮图标。另请参阅https://grumpy.website/post/0Px1O7Ukl

经验法则#1:字体越大,应该越瘦,越胖的字体应该越小。

经验法则#2:HTML已经有一个内置的视觉层次结构:h1 h2 h3直到h6,然后是p。对于每个元素,至少要更改以下两个属性:font-size,font-weight,margin-bottom,letter-spacing,text-transform:uppercasein以这样一种方式,可以使得每个元素至少在两个方面与它邻居元素产生不同。然后是一直使用h1到h6。也适合搜索引擎优化!

凉凉_
 翻译得不错哦!

8.借鉴

所以你认为是我自己想出了这些智慧的网页吗?哈哈哈…吸气…不。大部分内容是我从一些伟大的SaaS公司的疯狂康概的开源样式指南中借鉴来的。梵高说过“能工摹形,巧匠窃意!”(完全滥用),但是真正伟大的艺术家会告诉你,他是从哪借鉴来的!就是我的最爱:

MarvelApp

Heroku

Auth0


还需要更多的研究?这是一个收集了所有‘m Styleguide.io的网站。只有热爱,你才能从观察、学习和这些公司的设计人才那受益。学习,观察,或许借鉴一点灵感,最佳的练习。

kevinlinkai
 翻译得不错哦!

9. HTML电子邮件是可怕的

这话题值得写一个完整的帖子,但制作漂亮的HTML电子邮件是更难的。它是HTML表格。没有办法绕过它。一般来说,HTML电子邮件分为两类:

    1.大多是匿名的:通讯,欢迎消息,促销等。他们有一定程度的个性化,但每个人的内容都是99%。

    2.大部分是数据驱动的:基于特定用户帐户的交易消息和用户在应用中的操作。对于Checkly,例如针对特定响应时间和错误消息检查的警报消息,以及关于每个账户在过去七天中每次如何检查的每周摘要电子邮件。

对于第一类,尝试只使用Mailchimp或类似的服务。您可以添加一些个性化的数据项目,它将为您提供良好的服务。

对于第二类,我进行了大胆的调研找到一个框架或工具,它允许我编写HTML电子邮件,类似于构建Web应用程序屏幕。这就是我最终的结果:

    1.我使用了非常棒的mjml.io和它的伪HTML标记。

    2.我使用相当不错的html-templates.js来实际编写模板,以便我可以使用pug。所有Checkly HTML实际上都是用Pug模板编码的。

在我的Webstorm编辑器中,这看起来如下所示:

好的情况的是,它使设计和编辑这些类型的电子邮件变得更容易。 您可以使用Pug逻辑函数如if语句和partials以及隐藏所有嵌套HTML表的mjml.io标记。

凉凉_
 翻译得不错哦!

10.从模拟到代码

在以前的工作中,我有Real Designers™和Real Front End Developers™,我们有人担心品牌和复制和风格指南。 大多数面向客户的网页素材都经历了以下过程:

    1.品牌/营销设置身份

    2.设计师在Sketch中设计网页和手机屏幕

    3.Sketch在Framer和/或Zeplin中得到进一步发展

    4.前端开发人员将设计转变为代码

并非所有这些步骤对于每个迭代或每个项目都是必需的。 但是,如果您在Sketch或类似工具方面有些用处,我会推荐在开始编码之前至少完全设计一个或两个屏幕页面。 但不是所有的屏幕页面。 不是每个模态框或交互元素。

只需使用正确的品牌颜色,正确的字体并尝试获得正确的边距和空白。 考虑一下你的简陋版本的完整风格的UI风格指南。 这样做会大大缩短您的开发时间,并为您提供所有其他屏幕页面的指导。

凉凉_
 翻译得不错哦!
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们
评论(0)
Ctrl/CMD+Enter

暂无网友评论
顶部