设计我了解得并不多,因此这里主要是晒图。

优良的设计不仅让用户体验愉悦,还能更好展示信息,更重要的是能得到信任感加成。

项目前后主要有三位设计师参与,第一位是朋友介绍的兼职甲,第二位是工科出身转行乙,待的时间较短,第三位是圣马丁的背景丙。中间也得到了一些其他设计师朋友们的帮助。对于他们的工作,我个人都十分满意。

我们非常期望用最精良的设计快速赢取信任,但最终发现确实过度设计,导致花费了更多的时间和人力去完成非核心功能,顾此失彼。

原则

相关资源:

规范

规范制订后可制作 UI 组件库,容易保持一致性,减少冗余沟通,也方便开发。

初版

UI Guide

by 甲

真不是我们抄 Airbnb 的色调,是我们设计完之后,Airbnb 就改版了…

UI Guide

VI Guide

by 乙

VI Guide

第二版

by 丙

色彩

Style Guide Colour

字体

Style Guide Font

间距

Style Guide Spacing

按钮及下拉

Style Guide Button&Dropdown

文本

Style Guide Article

装饰规范

扩展

Extended Style Guide

标题

Headline Style Guide

案例

视觉

Logo 这种东西可大可小,可以直接挑个字体或者用小写缩写,也可以像乔帮主花 10 万美元重金设计一个不同凡响的视觉符号。 当时我们还比较重视 Logo,想赋予其更多的含义,前后找了至少三位设计师进行设计。 其实现在我觉得真的没太大所谓,初始产品能看得过去就行了,用户的记忆真的很差,一旦换了视觉,很难再有人能回忆起产品以前长什么样。

我们的 Logo 最后是 ”随便“ 找了个朋友引荐的 Freelancer 做的。没啥毛病,但也没啥特点。 Livety Logo

文档:

另外,这里是一些自动生成 Logo 的小工具:

邮件

邮箱验证

邮箱验证

订单

订单邮件

海报

我个人更喜欢丙的风格,成熟稳重。乙的设计更加年轻活跃。 我当时还煞有介事地在朋友圈里发起投票,结果喜欢两款海报的人数大致持平。

海报乙 1

海报乙 2

海报乙 3

贴纸 贴纸

海报丙 1

海报丙 2

海报丙 3

相关资源

交互

推荐 What is a Good User Interface,非常棒的 75 个 UI 设计原则,好的 UI 与坏的 UI 对比。

以下展示的均为设计师原稿,实际实现中有部分变化

首页

初版

by 甲

首页初版

移动端 移动端首页初版

第二版

by 丙

主要改动是提供更短路径以呈现房源结果

首页

个性化首页 个性化首页

移动端 移动端首页

搜索实体确认页

如果不确定用户搜索的实体,则显示此页面以得到确认。第二版引入。

by 丙

搜索实体确认页

移动端 移动端搜索实体确认页

房屋结果页

初版

by 甲

房屋结果页初版

堆叠模式

使用特别样式表示此为 cluster

房屋结果页堆叠模式

第二版

by 丙

主要的改动是显示 Cluster 结果时,一并显示符合条件的房间

房屋结果页

移动端 移动端房屋结果页 移动端房屋结果页堆叠

Cluster

初版

by 甲

Cluster 页初版

第二版

by 丙

主要的改动是让过滤器从搜索结果页延伸到 Cluster 页

Cluster 页

移动端 Cluster 页面

房间页

初版

by 甲

房间页初版

1.5 版边栏 > by 丙

五种库存

Coming soon Coming Soon

Not Available Not Available

Last Few Last Few

Limited Availability Limited Availability

Available Available

第二版

by 丙

房间页

边栏 边栏

移动端 移动端房间页

Dashboard

初版

by 甲

初版 Bookings 初版头像 1 初版头像 2 初版设置 1 初版设置 1

第二版

by 丙

Profile Bookings Listings Favourites

房源发布页

此设计尚未完成。

by 丙

发布 0 发布 1 发布 2 发布 3

移动端 移动端发布 0 移动端发布 1 移动端发布 2

FAQ

by 丙

FAQ 0 FAQ 1 FAQ 2 FAQ 3

博客

by 丙

首页 博客首页

文章 博客文章

移动端 博客首页移动端

相关资源

系列索引

其他资源