Alice

设计工作不是单纯的只有好看,好用也同样重要,设计的时候多思考才能有既好看又好用的设计。最近工作上接到一个需求,为商户开放资讯评论的功能,所以就要在C端显示出各级的评论。现在就以我接到的这个需求为例,讲一讲接到需求之后的工作流程。

 

第一步:竞品参考

了解基本的需求,知道具体要做一个什么东西之后,我们首先可以去看看竞品是怎么做的,因为我们做设计不是凭空想象的,在市场已经有一定的规范之后,我们去了解这些规范可以避免很多的坑,也可以降低用户的学习成本。

那如何选择竞品呢?选择竞品不要限制在同类别的思维里,我们可以发散的去找一些不同类型的竞品。以我接到的需求为例,因为我接到的需求是要设计资讯的评论,所以我就从几个不同的角度去选择一些竞品。

图片

比较传统的资讯类APP如今日头条、腾讯新闻、网易新闻等,这一类是用户量比较大的产品,所以设计的规范也是大众比较熟知的。

图片

比较小众一点的资讯类APP如36氪和爱范儿,这一类的APP在设计上往往会让人眼前一亮。

图片

因为我的项目是涉及党政类的,所以也看了比较类似的APP如学习强国和人民日报,这些产品在目标用户上会和我的需求更加接近。

图片

因为只看资讯类的会比较局限,我还看了社交类如小红书、微博的和视频类的如优酷、腾讯视频评论区是如何设计的,也会发现意外的设计灵感。

图片

 

第二步:设计执行

了解基本样式之后就开始正式设计,在设计过程中也是要带着思考去设计。

遵循规范

有了大致的框架之后就开始正式设计,首先要遵循项目中本来就有的设计规范,比如间距、字号、颜色等等。我这个项目的设计规范是以8的倍数为间距,分割方式基本以大间距留白的方式分割,主题色以蓝色为基调,在此基础上设计评论的基本样式。

图片

 

考虑场景

基本样式设计完成之后,要思考具体的需求,比如需求有后台可以置顶评论,所以C端要相应展示置顶的标签,为了区分置顶评论和普通评论,用分割线来区分两种不同的评论。

图片

 

极限数据

极限数据也是要考虑的,微信昵称最多是16个中文字符,点赞数据最长数据是9999,这个时候就要考虑,微信昵称最多显示多少字符,超过之后用“…”表示。

图片

 

交互状态

已点赞和未点赞的状态区分,图标样式的变化颜色的变化。

图片

 

第三步:设计评审

这一步是看设计稿上有没有开发实现不了的地方和交互方式等等。这一次就出现了一个我不了解的地方,我看的竞品都是APP类的,所以在字数限制的展开操作都是紧跟着正文的。但是我这个需求是基于小程序平台的,无法做到展开操作紧跟着文本,用开发的解释就是小程序的文本溢出属性只能在文本的最后一字,不能往前缩进一个“展开”文本的宽度。要实现这种样式的解决办法就是弄一个假的图盖在文本最后。综合考虑之下,将展开的操作放在了整段评论的下面,方便开发,也不会显得太突兀。

图片

 

第四步:切图交付

这一步如果在设计的时候注意的话就会很简单,切图标的时候同类型的图标要切同样的大小,所以切图的时候要预留出空白,控制图标的大小。等检查完切图之后,就可以将标注和切图交付给开发了。

图片

以上就是我从设计到交付的全过程,其实开始设计之前还有重要的一步需求分析,这个可以去翻阅我之前的文章,里面有详细讲解如何进行需求分析。《做项目的时候感觉无从下手吗,来看看大厂都在用的分析法则

 

原文地址:Leo设研所(公众号)

作者:设研_仓仓君

转载请注明:学UI网 » 工作这么多年,才发现原来这样做设计能够一稿过!

登录收藏
 
你可能喜欢的:
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
最近访谈了海外用户,总结几点意外收获最近访谈了海外用户,总结几点意外收获
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!这个练习虽然已经不错了,但我觉得还可以有以下几点能优化!
如何高效地进行网页设计?重点关注这些要素如何高效地进行网页设计?重点关注这些要素
工作经验| B 端产品组件设计细节及经验分享(三)工作经验| B 端产品组件设计细节及经验分享(三)
作品集别用这几个设计目标了,太老套作品集别用这几个设计目标了,太老套
iOS 规范与 Material Design 哪里不同?官网总结了这几点iOS 规范与 Material Design 哪里不同?官网总结了这几点
项目总结|红包设计测试,驱动裂变数翻三倍项目总结|红包设计测试,驱动裂变数翻三倍
设计师如何高效沟通需求设计师如何高效沟通需求