首页

什么叫细节控?看看Google问卷的设计

雪涛

什么叫细节控?看看Google问卷的设计吧

尤其是一些体验细节,比我平时用的腾讯收集表做得更到位些。感觉 Google 的设计师,确实是没少下功夫的。

什么叫细节控?看看Google问卷的设计吧

什么是 Google Form

国内通常网盘和在线文档是分开的两款产品,例如腾讯的微云和腾讯文档,就是不同的两个产品。

Google Drive 这个东西,相当于把在线文档和网盘整合到一起了,这就和国内的产品很不一样了。

什么叫细节控?看看Google问卷的设计吧

而 Google Form 就是 Google Drive 里面的问卷功能。

这次我拿腾讯收集表和 Google Form 这两款产品对比,就是因为它们定位比较相似:

都不是专业的问卷工具,而是在线文档工具中的问卷功能

相比之下,我觉得 Google Form 的体验细节做得更加到位,很多地方值得学习,尤其是这五点:

选项粘贴

一般做问卷,我们都会先弄一个文档,把内容确定了再往问卷工具里填。所以填写问卷内容时,通常不是通过输入,而是通过粘贴。往腾讯收集表里粘贴选择题内容,必须一条一条来,有多少个选项就贴多少次,选项多了会感觉自己在工厂做流水线工作。

什么叫细节控?看看Google问卷的设计吧

而 Google Form 可以把所有选项都一起粘贴,识别到换行就会自动贴到下一个选项中,方便多了。

什么叫细节控?看看Google问卷的设计吧

我觉得还可以优化一下的点是,希望能够让我把问题和选项都一起贴,这个目前 Google Form 还做不到。

切换问题类型

Google Form 创建一个问题之后,可以很方便地切换问题类型。

什么叫细节控?看看Google问卷的设计吧

这样样式挺好的,有时可以减少一些操作步骤。

快速创建问题

就是因为 Google Form 的问题类型可以快速切换,所以创建问题就很快速了。只有一个插入按钮,点击后立即插入一个跟上次所选类型相同的问题。如果想要换个问题类型,再点下拉框切换就行,交互很流畅。

一般创建问卷就是要尽量使用连续的同类问题,所以这种方式挺好的。

什么叫细节控?看看Google问卷的设计吧

而腾讯收集表因为不能切换问题类型,所以创建起来就比较麻烦了,还分了两个入口。

第一个是左侧的工具栏,刚开始用还真不知道是用来创建问题的,可能因为标题上的「添加问题」太不起眼了吧。第二个入口是,当前编辑的问题下,会出现一个「插入问题」的按钮。但是点击之后需要在菜单选择一下,这就没那么方便了诶。

什么叫细节控?看看Google问卷的设计吧

问题顺序拖动

Google Form 和腾讯收集表在创建了问题之后,都能拖动顺序,但是可拖区域不同。Google Form 的可拖区域在顶部一条,而腾讯收集表的可拖区域在侧边一条。

什么叫细节控?看看Google问卷的设计吧

按下拖动时,为了避免太长不方便,都会收缩变短,于是问题就来了!

腾讯收集表因为可拖区域在左侧,所以我点击左侧偏下的位置也能拖,但这次问题收缩,我点的地方就跑出问题区域了,于是拖动就出问题了。

什么叫细节控?看看Google问卷的设计吧

Google Form 因为可拖区域在顶部,所以不会出现这个 bug。

什么叫细节控?看看Google问卷的设计吧

但是,Google Form 往问题里插入图片后,问题长度就收缩不起来了,上下拖动可不就不方便了?

什么叫细节控?看看Google问卷的设计吧

好在,这个问题并没有影响拖动。

Tab 键

对于很多 PC 老手来说,Tab 键是个很方便的工具。

有了它,填写再多表单都不需要拿鼠标了,点一下就能自动把焦点从一个输入框移动到下一个。

什么叫细节控?看看Google问卷的设计吧

而 Google Form 把 Tab 键运用到位,基本上界面上的交互功能都能切换到。

什么叫细节控?看看Google问卷的设计吧

腾讯收集表里也能用 Tab 键,不过覆盖范围就少了一些,不能删除、添加选项或者添加“其它”。

什么叫细节控?看看Google问卷的设计吧

总结

其实要比视觉风格,腾讯文档可能更加符合国内审美。如果要比功能,Google Form……也还是比腾讯收集表强大,可以:生成图表、给问题和选项插入配图、插入视频、区分问题模块……

文章来源:优设   作者:ZoeYZ


分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


做好这4个细节,帮你快速提升卡片设计效果

前端达人

卡片的造型

1. 圆角

不同的圆角,所带来的气质是不同的。圆角很小,视觉印象是硬朗,高冷,具有攻击性的,多用于严肃、高端、冲突感强烈的设计中;而更大的圆角给人的感觉是有亲和力,柔软,安全的,多用于儿童产品、娱乐性强的设计中。

在设计的时候,根据自己的产品属性选择气质相符的圆角设计很有必要。

做好这4个细节,帮你快速提升卡片设计效果!

△ 常见的卡片弧度形式有4类:直接、小圆角、大圆角、特殊圆角

我一般喜欢用4的倍数来设置圆角,比如圆角大小为4px、8px、12px之类的。要注意的是,圆角越大,可用面积会越小,需要根据实际场景进行平衡,以视觉上舒服为宜。

2. 比例

卡片的比例,我习惯遵循一些美感规律,比如黄金比例(1.618),白银比例(1.414),青铜比例(1.732),正方形之类的比例。当然,实际设计需求中的比例,还是要结合内容的多少具体分析。

我的经验是,当比较接近这些美感比例其中之一时,就直接优化到这个比例。比如做了一个卡片,宽高比是1.5,比较接近于黄金比例,我就干脆让它等于黄金比例。

做好这4个细节,帮你快速提升卡片设计效果!

3. 异型

除了正常的卡片样式,还可以做一些异型的卡片设计。异型卡片具有较强的形式感和视觉冲击力,所以会比较多的用在游戏或者运营相关的界面中,吸引用户的注意力。缺点是批量化设计成本略高且因为过于风格化而不够耐看。

做好这4个细节,帮你快速提升卡片设计效果!

卡片的效果

1. 颜色

卡片的颜色搭配可以使用纯色和渐变色。这些颜色与文字之间的对比要符合界面对比度标准( https://contrast-grid.eightshapes.com/,这个网站可以直接查到可用性数值,只要不是DNP就是可以用的配色),以免影响内容本身的阅读。如果拿不准的话,可以多用一些白色,比较不容易出错。

纯色卡片设计会让界面显得冷静高级,但对配色的要求相对较高,用不好的话会显得单调,沉闷。如果你坚持要用这种卡片配色的话,建议搭配一些图形纹理,会更容易把控,还能提升画面细节。

做好这4个细节,帮你快速提升卡片设计效果!

△ 纯色卡片设计

渐变色的卡片设计目前较为常见,层次细节更加丰富,画面也显得更活泼一些。

做好这4个细节,帮你快速提升卡片设计效果!

△ 渐变色卡片设计https://dribbble.com/shots/12284120-Wallet-Design-App

有些朋友经常因为配色不好而发愁,其实是需要多去找一些参考来看的,实在担心配色不好,直接去吸优秀的配色方案也是OK的,但要注意搭配合理。

教大家一个方法,去dribbble上搜color或直接打开 → https://dribbble.com/search/color这个链接,就可以看到非常多的优秀配色方案了。

做好这4个细节,帮你快速提升卡片设计效果!

2. 图案

卡片的设计还可以结合辅助图形,以图案的形式与卡片进行结合。这些辅助图形可以来源于品牌符号的延伸,让品牌有更多的露出机会。

做好这4个细节,帮你快速提升卡片设计效果!

也可以是运用一些简单的图形,提升卡片的设计细节,以下是一些还不错的设计案例。这些卡片上的图形都有借鉴参考的价值,自己平时有时间的话,也可以多做一些作为图形的储备。强烈建议收藏,真的可以很有用。

做好这4个细节,帮你快速提升卡片设计效果!

△ 来源:https://dribbble.com/shots/10513966-Gradient-Bank-cards

做好这4个细节,帮你快速提升卡片设计效果!

△ 来源:https://dribbble.com/shots/10498737-Dark-Bank-Application-Design

做好这4个细节,帮你快速提升卡片设计效果!

△ 来源:https://dribbble.com/shots/11313260-Finance-App-Exploration

做好这4个细节,帮你快速提升卡片设计效果!

做好这4个细节,帮你快速提升卡片设计效果!

△ 来源:https://www.behance.net/gallery/84029601/100-Financial-Virtual-Design-Cards-PSD-XD

这里彩云给大家找了非常多的卡片设计形式,可以从中参考学习配色和纹理造型。

3. 图片、视频

卡片背景也可以用图片和视频的形式进行设计,图片和视频的选择一般会偏暗色,以不影响内容阅读为准。

做好这4个细节,帮你快速提升卡片设计效果!

做好这4个细节,帮你快速提升卡片设计效果!

△ 来源:https://dribbble.com/shots/5717917-Travel-Article-Application

卡片的内容

1. 文字

卡片上的文字不要太长,我的经验是横向不要超过42字(关于这个字数,有资料可以查,感兴趣的可以找找看),纵向不要超过5行。过多的文本不建议使用卡片形式。

做好这4个细节,帮你快速提升卡片设计效果!

其实这张卡片的设计中,我也用到了黄金比例来指导自己的设计,方便快速确定文字比例关系。

做好这4个细节,帮你快速提升卡片设计效果!

2. 间距(网格法)

卡片上的文字间距最好有一定的规律,这里可以按网格法来规划,比如8px网格,10px网格等等。网格的使用其实可以很灵活,比如我这里的卡片其实就用到了8px网格,各间距就会用8的倍数来做。大小比例就尽量用黄金比例来处理,这样做目的一方面是为了让界面有秩序,另一方面是提升决策效率。秩序产生美,而效率让你早点下班。

做好这4个细节,帮你快速提升卡片设计效果!

3. 减少线框

卡片中尽量减少线框,多用留白来进行内容划分。

做好这4个细节,帮你快速提升卡片设计效果!

4. 层次清晰

卡片中的内容层级要做好,标题和内容之间的差异要明显。这里的层次主要是通过对比拉开的,做好对比的关键就是对比效果要强烈,决不能模棱两可。

比如下图中左边的案例只是在文字的字号上有一定的对比,但字号间相差不大,效果不明显,就会让人第一时间不知道看哪。而右侧的案例则用了加粗,大字号,大留白等,让画面有了强烈的对比,从而产生更好的信息层级。

做好这4个细节,帮你快速提升卡片设计效果!

5. 内容出界

只在卡片的框框里做设计,有时候未免显得太呆板,破开卡片的边界可以让卡片本身更具形式感。如果被人说你的设计没啥亮点,那内容出界的设计就是一个很好的提升设计亮点的手法。

做好这4个细节,帮你快速提升卡片设计效果!

△ 彩云曾经做的一张banner就是运用了出界的手法

做好这4个细节,帮你快速提升卡片设计效果!

△ 来源:dribbble。界面上的天气图标也用了出界的手法,让画面显得更有亮点

卡片的细节

1. 光感

卡片中的光感细节能提升设计的质感。下面这张图是我最近做的一张会员卡的背景设计,大家对比下,在卡片顶部加了1px高光线和斜面反光的细节前后的质感区别。

做好这4个细节,帮你快速提升卡片设计效果!

这个小细节,我经常会用到,执行简单又容易出效果。

做好这4个细节,帮你快速提升卡片设计效果!

2. 投影

投影的细节,不要过重,但又要能与背景分离开。有2个小技巧:

  • 在取色的时候,可以选择背景颜色的色相,然后略微加深一些,不要用纯黑色来做投影,会显脏。
  • 投影的距离不要太小,太小的投影会显得不够自然;也不能太大,太大会很浪费界面资源。

做好这4个细节,帮你快速提升卡片设计效果!

3. 3D效果

3D卡片的设计,因为不便于内容编排和阅读,所以带透视的卡片在实际UI中并不太常用。但在作品集包装和运营页面中,则可以带来比较好的视觉冲击力,可以尝试运用。

做好这4个细节,帮你快速提升卡片设计效果!

△ 图片来自:Cradle

小结

以上就是今天彩云关于卡片设计的一些经验总结,卡片设计的应用已经如此广泛,我们有必要利用它来提升自己的界面设计细节。


转自:优设网

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

UI设计——细节决定成败

用心设计

良好的交互设计应该确保用户的每一次操作都能得到视觉反馈,无论成功与否,这会让用户体会到使用产品期间的一种安全感——一切尽在自己的掌控之中。视觉反馈的目的就是通过一种可视化、简洁的形式向用户展示操作的结果以及当前系统所处的状态。

UI设计——细节决定成败

做好这4个细节设计,让你的移动APP 用户体验脱颖而出

周周

启动页、空状态、动画反馈、框架界面… 今天提到的这4种状态,都是容易被忽视,而又能让移动App 脱颖而出的细节。如何做好这4个细节的用户体验设计?今天这篇好文总结了关键的几个原则。

启动页

当用户打开 app 时,最不能做的事情就是让他们等待。但是如果 app 的初始设置非常耗时,又不可能优化该怎么办?你不得不让用户等。如果他们愿意等,你得知道如何 吸引他们。启动页解决了等待的问题,让你有一个简洁有力的窗口来吸引用户。

uisdc-app-201609261 

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档