8 个容易被新手 UI/UX 设计师忽略的细节

神译局

 · 6小时前

关注
如今,你的产品只需要一秒就能激怒用户。

神译局是36氪旗下的编译团队,关注科技、商业、职场、生活等领域,重点介绍外国的新技术、新观点、新风向。

编者按:互联网时代,你设计的产品只需要一秒就能激怒用户。完美的产品体验离不开精心的细节设计。在这篇文章中,作者以“过来人”的身份,为大家介绍了8个容易被忽略却十分重要的细节,希望能对大家有所启发。本文来自Medium,作者Daniel Danielyan,原文标题8 Overlooked Details by Beginner UI/UX Designers

图片来自Unsplash|摄影Josh Calabrese

在设计一个重大工程的时候,人们时常会忘记一些简单但是容易被忽略的元素。以下提到的许多元素都是新手设计师可能会遗漏的。

1.忘记密码的页面

图片来自Medium

新手设计师可能会出现这个问题:他们会记得设计注册页面、登陆页面,但是会忘记去做忘记密码的页面,后者设计起来虽然简单,却至关重要。

通常情况下,用户可以通过邮件或者电话验证码的方式找回密码,通过这两种方式设置新密码,或者收到临时密码。

在一些APP或者网页中,上述流程还可以进一步完善。

比如如果用户使用的是移动端,那么通过邮件接收验证链接、设置新密码的过程就会需要更多步骤。如果是手机验证码,那么如果用户更换了手机号码,或者其他人开始使用这一号码,那么就有可能出现账户安全的问题。

这些也是设计师们需要考虑和完善的地方。

2.404页面

图片来自Medium

404页面其实是非常难设计的,它常会体现出设计师强烈的个人风格。设计师们在404页面上的设计是相对自由的,我们现在也可以看到许多优秀的设计作品,有一些创意甚至是难以企及的。

我们当然可以在页面中间摆一个404符号,然后尽可能真诚地说明自己多么抱歉。但是更好的方式是在404页面中植入创意,令用户感到惊艳。比如Figma网页的404页面,我们可以拖动“404”字符上的定点,将这三个数字自由改成抽象图画。

3.骨架屏和旋转动画

左图为骨架屏,右图为旋转动画|图片来自Medium

需要解释一下,骨架屏(Skeleton)就是你在下拉页面、在内容未加载之前出现的板块。当你下拉Facebook的页面时,出现的灰色部分就是骨架屏。

另外一个概念是旋转动画(Spinner),旋转动画往往是一个圈,显示页面正在加载中。

当页面上一次性有太多图片、文字和其他信息时,或者当我们需要的信息加载需要一定的时间时,我们就需要用到骨架屏和旋转动画。有的时候,旋转动画比具体的加载进度更适合页面,尤其是打开照片或者APP的时候。

有的时候,这两个元素会叠加在一起,我们可能会在骨架屏上看到一个迷你版的旋转动画。

许多设计师会忽略这两个元素,直到有一天产品发展到一定程度,用户的不满倒逼他们加入这些设计。

4.检索无结果的页面

图片来自亚马逊页面截图

当你设计电商网页时,需要考虑搜索结果页面如何设计。具体来说,你需要考虑产品以何种方式罗列,页面如何安排。设计师往往会在这里花很大的功夫。

对于新手来说,可能会忘记“无结果”搜索页面也需要精心设计,另外用户在尚未购物的情况下,也要考虑“购物历史”页面如何设计。

5.付款未成功页面

图片来自Medium

在电商或者其他平台的页面上,设计师会精心准备“付款成功”的页面,却往往忽略了设计“付款失败/付款被拒绝”的页面。在这样的页面中,新手设计师往往会忘记添加付款失败的原因,比如用户卡里的余额不足,或出现其他技术类问题。

有的设计师甚至会忘记设计付款成功的页面,以至于用户在付完钱后自动跳转到首页。

6.移交材料

图片来自Medium

这种情况经常出现:在更换设计师或者交付产品时,新手设计师可能会忘记一并交付一些素材(如图标、照片等)。当后期出现问题的时候,这些新手设计师不得不被叫回去继续工作。

7.准备格式指南

作者为自己的项目设计的格式指南|图片来自Medium

有些新手设计师会忘记(或者觉得没必要)给APP或网页写格式指南。一些有经验的设计师会在开始设计之前先准备好格式指南,另一些会在设计之后总结出一份格式指南。我的经验是,这两种顺序都可以,重点是一定要有这样一份指南,防止你不经意间犯下错误。

8.Favicon(与网页相关的图标)

Favicon举例|图片来自Medium

与网页相关的图标是指网址左边的小图标。通常情况下,Favicon就是网址或APP的Logo,在比较少数的情况下,还可以用图片或其他符号表示Favicon。

新手设计师有时候会忘记设计Favicon,直到临到推广设计产品之前,经理等人才让他们临时加一个Favicon。但是为了能使风格保持一致,设计师最好能在一开始就添加这个小图标。

译者:Michiko

本文来自翻译, 如若转载请注明出处。

(0)

相关推荐

  • PPT怎么制作?新手如何制作PPT

    作为一个新手,初次接触PPT,肯定是很陌生的.如何去制作一份PPT呢?下面通过office2016给大家分享制作PPT的过程,希望这个教程可以帮助到你.如果你不想自己动手制作PPT,那么可以直接套用网 ...

  • 网站设计的10个误区

    现在越来越多的人认为人人都可以做网页设计师了,似乎在很多人看来设计网页是非常容易的事情.下载Adobe的Dreamweaver,简单做个导航栏,甩个Banner上去,随手画出几个功能区,放上图片文章就 ...

  • UI&UX设计师,作品集怎么做?

    我们是一群执着于设计的黑马 黑马家族 一群执着于设计的黑马,为你带来原创设计文章/教程/职场经验/专业拔高. 440篇原创内容 公众号 @你的军哥 授权黑马家族发布 https://www.zcool ...

  • 被99%设计师忽略的细节!住宅隔音降噪与声学设计

    每个人对于居住环境都有一套"安静"的标准,比如有人对声音很敏感,装修时就会特别注重隔音降噪这方面的体验.因为室内噪声无处不在,常常会被各种噪音侵扰得生无可恋,楼上的.隔壁的.窗外的 ...

  • 人人都可以是设计师:UI & UX 小技巧大全(一)

    神译局昨天 关注 小改动立马带来大改观. 神译局是36氪旗下编译团队,关注科技.商业.职场.生活等领域,重点介绍国外的新技术.新观点.新风向. 编者按:用户对产品的体验来自直观感受.所以UI/UX往往 ...

  • 人人都可以是设计师:UI & UX 小技巧大全(二)

    神译局昨天 关注 让"信噪比"最大化. 神译局是36氪旗下编译团队,关注科技.商业.职场.生活等领域,重点介绍国外的新技术.新观点.新风向. 编者按:用户对产品的体验来自直观感受. ...

  • 人人都可以是设计师:UI & UX 小技巧大全(三)

    神译局昨天 关注 运用粗细.大小和颜色来表示字体的层次结构. 神译局是36氪旗下编译团队,关注科技.商业.职场.生活等领域,重点介绍国外的新技术.新观点.新风向. 编者按:用户对产品的体验来自直观感受 ...

  • 人人都可以是设计师:UI & UX 小技巧大全 (四)

    神译局昨天 关注 预先定义好颜色调色板,这事很重要. 神译局是36氪旗下编译团队,关注科技.商业.职场.生活等领域,重点介绍国外的新技术.新观点.新风向. 编者按:用户对产品的体验来自直观感受.所以U ...

  • 人人都可以是设计师:UI & UX 小技巧大全 (五)

    神译局昨天 关注 重要的位置,要留给重要的元素. 神译局是36氪旗下编译团队,关注科技.商业.职场.生活等领域,重点介绍国外的新技术.新观点.新风向. 编者按:用户对产品的体验来自直观感受.所以UI/ ...

  • 人人都可以是设计师:UI & UX 小技巧大全 (六)

    神译局昨天 关注 不要随意选择字体大小.用用Type Scale吧. 神译局是36氪旗下编译团队,关注科技.商业.职场.生活等领域,重点介绍国外的新技术.新观点.新风向. 编者按:用户对产品的体验来自 ...

  • 地板送风静压箱设计,难倒了很多新手暖通设计师,今天我来帮帮你

    一.确定地板静压箱形式 二.确定地板静压箱高度 三.地板送风静压箱隔断与风道设计