Skip to content

card based UI design

· xieyuheng

问题 ​

我想要一个「设计语言」来辅助 UI 设计, 「设计」在于选择,所谓「设计语言」就在于把选择规范化, 把连续的选择变离散,并减少可选择的分支。

正如 LISP 的语法框架, 可以帮助我在设计语言时, 避免浪费时间在语法选择上。

正如「偏正」结构之类的汉语构词法, 可以帮助我选择函数和类型的名字。

卡片式设计语言 ​

网站由页面组成,我们经常需要「给出列表」和「进入页面」之类的操作。 因此可以采用一种卡片式设计语言:

  • 卡片与页面的关系: 卡片像是打开页面之前的「缩略图」。 列表的时候可以列出缩略图卡片, 点击卡片进入具体页面。

  • 卡片工具栏与页面工具栏的关系: 页面可以有工具栏,来承载所需要的功能。 因此作为缩略图的卡片,可以带有小型工具栏, 其小型工具栏可以拥有页面工具栏的工具。

    • 卡片上可以少显示一些工具。
    • 卡片上的工具栏,不用点开卡片就可以用,因此可以保留那些常用的操作。
    • 有一些特殊的页面,为了保持简洁,其页面内可以完全没有工具栏, 这时卡片工具栏可以作为主要工具栏,承载很多功能。
  • 有些卡片只在列表中,没有对应的页面,类似叶子节点。

与 sexp 的相似性 ​

每个 card 都有 tag,这与 sexp 的 tag 很相似。

甚至可以用 sexp 的语法来快速描述想要设计的页面, 利用纯文本来看看页面的效果。