tfs客户端开发(tfs搭建)

　　题记：2016年12月末，乐居（www.leju.com）互联网集团新房PC/触屏首页，全面改版。昨日，乐居设计中心微信公众号推出《设计背后的思考》，从心诠释乐居全新改版的思路。

　　莫京客此篇算是为公司打一次不收费的广告吧。也希望对各位有所帮助。看房、买房、卖房、装修，都记得要找乐居哦！

　　新浪乐居PC首页 ：www.leju.com

　　新浪乐居触屏首页：m.leju.com

　　乐居直播：https://m.live.leju.com/house/bj/index.html

　　乐居航拍：https://m.leju.com/touch/aerial/index.html?city=bj

　　码上专车免费看房：https://m.leju.com/house/bj/zc/

　　二手房交易：https://m.leju.com/touch/esf/bj/

　　装修抢工长：https://m.7gz.com/

打破固有观念不重复，以设计视角重新梳理业务、优化交互、重构页面

　　由于PC与触屏产品几次改版迭代遗留了很多历史问题，所以在设计前期我们结合产品部门输出的改版方案(ue), 以设计的角度重新梳理了整站的逻辑图和每个页面，欲求在本次改版中将之前存在的问题一并解决.

　　围绕以上的优化原则，我们优化了PC与触屏产品共计 16多个流程 80多个页面的交互结构，保证了产品价值，提升了乐居品牌的用户体验。

　　秉承着简洁、高效的原则简化视觉表达，追求极致的设计细节与创新的视觉表现手法

　　根据设计前期对整站逻辑与页面交互的梳理，我们基于栅格系统制定了整套布局规范。使用栅格系统的好处在于允许按比例设计，可以组织不同元素之间的平衡感，还具有一种结构分明的设计感。有了详尽的布局规范可以更好的驾驭内容，保持整站的一致性。

- 选取定位 -

- 基础元素色 -

乐居品牌的红色是最强有力的色彩之一，它能展现爱的炙热 也能反映战争的惨烈。红色关键词：危险，重要，激情

- 二级色 -

　　所以在选取辅助配色时， 我们取了一些可以跟红色互补的颜色，通过对比度、协调度唤醒用户情绪，降低视觉疲劳，构建出视觉重心和焦点。元素之间用色的高对比度让文字更容易被识别，引导用户注意到更关键的信息。

- 基础色 -

- 色彩关系 -

- 文字颜色 -

　　关于文字颜色，我们运用了部门独创配色方法“穷举法”对文字进行了色彩选取，提高文本与周围色彩的对比，不同层级文本之间的对比，引导用户注意到更关键的信息，提高用户获取信息的效率。

　　- 字号&颜色 -

　　什么样的字体大小是符合用户需求的? 我们分析了大量行业内优秀的竞品,统计其中的数据进行比较,最后得出最优的结果。

　　制定文字的字号大小，间距，颜色规范，通过字号的大小增强信息层级的对比，通过文本间的距离控制信息密度与用户阅读节奏。通过文本颜色规范引导用户理解操作语义。

- 频道LOGO字体 -

　　为了提高产品细节传递乐居品牌价值，我们这次也进行了相应的字体设计，例如频道logo字体，主栏目字体，副栏目字体。并制定相对应的字体设计规范，为后续的产品迭代做到有规可循。

- 副栏目字体 -

- 其他字体 -

　　根据以上原则配合新版视觉风格，我们设计了全新的“简化微写实”的icon system。从概念、效率、表意、情感、统一等方面定义新版图标规范，通过对图标进行分类，在图形、色彩等多个维度建立了完整的体系，将触屏与PC两款产品共计106枚图标进行了重新设计。

- 定义形状 -

- 定义颜色 -

- ICON样例 -

　　在设计一款产品不同平台客户端的时候，首先要保证品牌的统一性。虽然在页面结构上两端并不一致，但是在视觉上，我们求同存异，尽力保证在logo、品牌色、字体、icon、风格上的统一调性、例如:两端的导航、icon、标签等

- 遮罩标签 -

- 属性标签 -

- 标签统一色 -

　　在设计进行的同时，我们将本次框架性内容进行整合梳理，沉淀出设计规范，有了规范体系，后期在设计师接收需求时可以减少重复设计的成本，提高效率，尤其是在快速迭代时可以缩短周期，同时能保证质量

　　为了保证视觉的还原和完美适配，我们安排专人专项跟进，保证设计可以快速走查审阅

　　这次PC和触屏改版，无论在功能上还是在视觉上，我们都秉着以用户体验为中心的原则，不断打磨每个细节。接下来在后期的迭代中，我们会一直不停的前进，更好地服务于产品和业务

标签： tfs客户端开发