干货贴:Web 后台设计易被忽视的组件技巧

1489503473-2855-0314

1489503473-2855-0314

  尽管现在各家都将产品设计的重头放在移动端,但对于运营后台管理系统,仍然会将 Web 端作为自己的兵家必正之地。对于有着精细化管理,最小颗粒的维护自己平台商品、服务、企业信息的互联网产品来说。Web 端的大屏、易于录入读取数据等优势仍然是移动端不可取代的。那么在 Web 端产品设计中,是不是存在一些容易被我们忽视的技巧呢?

  后台系统的设计原则和前台系统的设计原则几乎一致,虽然页面的动效、配色方面可能不必像前台那般精益求精。

  产品的前端由于直接展示给用户,因此往往对于图片质量、页面配色等都经过 UI 的仔细打磨,后台产品则由于图片少、文字多;内容展示少、表格多而在界面上惨不忍睹。作为后台产品经理,虽说我们不用对每一处细节的仔细雕琢,但至少要审美在线。

1489503474-1900-0314

1489503474-1900-0314

  关于后台系统应该遵循的设计规范,如果各位有兴趣,我们下一篇我们再讲,本篇主要介绍在设计后台系统时诸位肯定会用到的组件及其使用技巧。

  一、基础部分

  基础组件包含:页面布局、颜色字体、图标按钮

  布局

  布局是前端工程师的分内职责,产品经理不必太多插手,但是对于布局有 2 个基本概念我觉得大家有必要了解。

  栅格式布局:通俗来讲就是在一个页面上用横向(水平线)、纵线(垂直线/参考线)将整个页面划分成有规律的格子。前端工程师以这些格子或它的边线作为基准线有规律的布局。

  响应式布局:就是指一个网站能够兼容多个终端。通俗来讲就是 Web 的内容根据预设响应式尺寸不同,可以在 IPad、手机等不同尺寸的设备上几乎不影响体验的看。一套优秀的响应式布局前端框架可以减少不少其他终端的代码,还可以为不同终端的用户提供更好更舒适的界面和用户体验。

1489503477-4048-0314

1489503477-4048-0314

  颜色字体

  为了给用户一个前后一致的产品使用体验,Web 后台的颜色字体设计和前台产品最好保持一致,也都需要 UI 确定颜色、字体相关的标准。

  颜色的使用技巧 :要定确定产品的主色、辅助色、中性色。

相关推荐
新闻聚焦
猜你喜欢
热门推荐
返回列表
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。