Best UI - 在实际项目中发现 UI 灵感

 

 

目标

设计没有绝对的原创,优秀的设计都来源于灵感的重组,渴望进步的 UI 设计师更需要收集和消化大量的优秀作品。然而网上充斥的大量飞机稿只是设计师为了自嗨,并不能应用在实际工作中。因此,实际项目中经过大量的妥协诞生的优秀 UI,具有更大的参考价值。Best UI 旨在帮助设计师,甚至是产品经理发现优秀的项目,从中汲取视觉、交互和商业上的灵感。

成果

考虑到移动端的局限性,只对网页端的 Best UI 进行了设计。在设计的过程中兼顾了 3 种典型的使用场景,用简单高效的瀑布流方便用户浏览信息,并考虑到了用户的沉淀和社群的发展。

负责内容

  • UI 设计
  • 交互设计

工具

  • Sketch
  • Ps

要解决的问题:怎样帮助设计师寻找开箱即用的 UI 灵感?

为什么现有的网站和工具无法满足 UI 灵感的需求?

1、Dribbble 和 Behance 充斥的飞机稿

Dribbble 和 Behance,这两个网站的名字基本上是人人皆知的。

但大家会慢慢知道一个名词,「飞机稿」。所谓的「飞机稿」,简单来讲就是不考虑实际场景,纯粹炫技的设计作品。尤其是 Dribbble 上,充斥着大量这样的作品。

Dribbble 代表着对未来可能性的探索。正因为这样,如果真的尝试把 Dribbble 上炫酷的效果和技法用到实际项目中的话,就要好好掂量一下了。

所以,在大部分情况下,Dribbble 和 Behance 是提高审美的地方,上面的 UI 界面并无法对实际的项目产生巨大的帮助。更致命的是,绝大部分的作品都是英文的,替换上中文后效果并不是很好。

2、Pinterest 和花瓣网的大杂烩

Pinterest 和花瓣网瀑布流的方式肯定会让你忘记时间。

在 Pinterest 上搜索 UI 的关键词,会发现,结果中的绝大部分依然是从各大设计网站 Pin 下来的,很多也是飞机稿。

在花瓣上搜索 UI 的内容,很惊喜的发现了很多在用的 APP 的界面,但即使这些画板有好好的分类,这些热心的收集者不可能满足设计师的所有需求,可能是所处的行业不同,也可能是感兴趣的点不一样,很多页面你还是找不到想要的。

3、过时的 UI 素材包

某些设计网站上诸如「40G UI 界面素材打包下载」、「1000G 优秀 APP 页面免费下载」的内容,大部分都是过时的,无论风格还是使用场景,都无法满足实际应用。更可况要从这 1000G 的内容中找到想要的页面,谈何容易?

4、Pttrns 的水土不服

有些专注于 UI 灵感的网站,比如 Pttrns,上面是实际项目的页面,并且对场景进行了分类,比如发现页、 404 页面等等。

不过,既然是国外的网站, 界面也必然是英文的,很多场景都无法套用到国内的应用中。

5、手动整理费时费力

手动截图 → 上传电脑 → 按一定规则整理,这样的步骤我想没有多少人会坚持下来吧。


算了,自己做一个吧

我想跟我有相同困境的人肯定有一大批。

这时我遇见了一个国外的网站 Mobbin.design,这个网站完全符合我工作和提高上对页面的需求,不过页面是英文的。

我发现国内根本没有类似的网站, 所以,不如自己做一个吧。

Best UI 从两种场景帮助设计师

在工作的过程中有两种很常见的场景,每种场景产生的需求有所区别:

1、对 APP 的整体改版:我需要参考竞品的整体风格;

2、对部分功能和页面的改动:我需要参考别的 APP 如何设计这些具体功能。

针对场景1,用户产生的行为是:按照类别(如电商、音乐等)发现优秀的 APP,下载后把玩和参考。针对 APP 整体。

针对场景2,用户产生的行为是:随便打开几个 APP,看看这个功能(比如导航栏、弹窗等等)是如何设计的。针对 APP 的某个页面或模块

因此,在 Best UI 中,设计了 3 种选择方式帮助用户寻找想要的内容:找应用、找页面和找组件。每种方式下有相应的标签供用户筛选。

页面采用了瀑布流的展示形式,便于在 PC 端浏览。

 


后台开发:如何最低成本开发 MVP ?

像这种需要大量数据的网站,需要后台的支持,这里就涉及到是否需要后台的页面

起初是想准备后台页面的,因为种类划分很多,前台需要大量的标签,这些标签需要在后台进行操作,而且每个 APP 也需要在后台进行管理。

为了简化设计和前端开发成本,选用了阿里的 Ant Design 的框架,并设计了满足基本需求的后台页面。

不过,由于我使用的是 Eagle 来管理收集的截图,Eagle 可以导出特殊的素材包。既然可以在 Eagle 里打标签,那么素材包中也应该带有标签的参数吧?

把这个设想跟后端的小伙伴沟通后,导出了一个素材包,发现里面确实带了标签的参数。这样根本就不需要后台页面了,在 Eagle 中打好标签,后端就可以直接入库了,这在前期可以节省大量的时间


页面展示


总结

由于是用爱发电的项目,这个项目仍在开发中,通过这小项目,学到了很多。

1、有问题的地方就需要设计

设计不是为了自嗨,而是要解决一个问题。只要有人的地方,就会遇到问题。在生活中多留心多发现,就能找到这些问题,并用设计来解决。

2、获得流量需要主动推广和维护

每个用户都不是刮大风送的。有了网站后就需要考虑怎么推广网站,比如如何在知乎、豆瓣以及其他设计社区上推广,如何写文章吸引用户等等。

网站是解决用户的问题的,有了用户之后,如何收集用户的使用数据和反馈,如何建立社群来维系用户等等,都是需要考虑的事情,这些都是设计的一部分。

3、下一步

下一步的计划有两个:

  • 历史版本:每个 APP 页面风格变动较大的版本,方便用户查看历史风格;
  • 在线收藏:在线建立画板,分类和收藏想要的页面,类似于 Pinterest 和花瓣。

如有兴趣,欢迎扫码加微信或下载「简历」