🏠 Home      📖 Archives      🏷 Tags      🙈 Friends      👴 About Me     
ColorfulUI V3设计中的一些思想

交互

弹窗

我认为应减少页面间跳转的操作。因为这样会增加用户查看相关信息的难度。
在关联度较高的两个页面中,我认为可直接以弹窗、气泡等形式悬浮于原页面上方。例如macOS中的“快速查看”,如果用户想在目标页面进行进一步操作,也可以很方便地在新标签页中打开。

其主要意思就是:将页面跳转的下一个页面做为弹窗形式直接展示在原页面上。

注: 应该是关联度比较高的页面(如词条的注释等等)。

CUI-InteractivePopup.png

过渡动画

使用 贝塞尔曲线(Bézier curve) 使过渡更加平滑,体验更加真实。

Bezier1

可以看到,该动画从下至上有一个“缓>急>缓”的过程,慢放一遍:

Bezier2

ColorfulUI V3会提供一个动画库以供开发者更加方便地开发。

页面层次

强调“层次感”。

依次为:
背景层(Background Layer)、内容层(Content Layer)、遮罩层(Mask Layer)、子内容层(Sub Content Layer)。如图所示:

image

同层级内容也可以通过使用阴影、模糊、不同颜色来区分层次。

在一个页面中,层次不要太深,4层足够。

子内容层不可以覆盖整个页面。体现“子”的感觉,即宽、高均小于遮罩层宽、高。常见应用:弹窗。

响应式

一般的列表:宽屏为图标+文字(横);窄屏为单图标 / 图标加文字(竖) / 文字在图片上。

image

分栏式布局中的响应式设计

对于一般的网页来说,侧边栏所展示的内容无非是标签云、广告、快讯、相关阅读等等。而且首页与子页面所展示的内容也是不完全相同的。下面针对两种页面(首页和子页)的 移动端 进行细化。

首页侧边栏的响应式设计

将侧边栏的每一个 内容型 分块设计成独立的页面,在首页的顶部位置(菜单栏下方,Banner下方)制作一个分块,在卡片中以一般列表形式展示页面链接。

:卡片的内容型功能型区分:内容型的卡片目的是给用户展示内容,如快讯、相关阅读等;而功能型的卡片其目的是直接地实现某些功能,如广告、标签云等。

image

子页侧边栏的响应式设计

位置放到主内容下方,内容、样式基本不变。

image

总之

ColorfulUI V3提出了一套设计思路和规范,遵守规范可以更好地适配CUI V3的组件设计。