首页 > 建站资源 > 网站运营 > 分享:移动设计之视觉设计

分享:移动设计之视觉设计

时间:2018-08-10    来源:人人都是产品经理

作为一个直接响应式的功能平台,第一个手机网站只是一个“试验品”,而不是“成品”。在今天,如此多的智能设备的确给了我们机会去做更多的视觉设计,但这不仅能激发和吸引用户,而且增加了用户体验。当然伴随着机会就以为着更多的挑战。

本文是做出总结,即通过探索视觉设计解决方案和相关的最佳实践来研究移动设计,从而做出既美观又好用的应用。

首先我们来看看移动端设计上的物理限制,其中包括最佳实践案例;然后我们将着眼于通信设计,用视觉设计为移动站和应用的内容提供支持。

在束缚下做设计

移动设备和平板设备的外形和可触控性,给我们带来了一些基本的可用性方面的思考。在桌面端,用户所面对的是更大的显示区域和更多的内容(相对于移动端),或者将鼠标悬浮在某个元素上时能够获得更多的信息。

但是移动端的用户则只能将视线集中在一块较小的屏幕上,而且必须以各种不同的方式来与设备进行交互。通过记住定义一个移动端布局和移动端交互规范的细节,我们可以在移动端上创造一个直观的体验。

1. 可用的布局

移动端屏幕的空间局限性,给设计工作带来了一个有趣的限制——如何在有限的屏幕上以最优的方式,显示内容以及提供最好交互方式。具体来说,布局要既精简又能让用户集中注意力。

(1 )布局的结构

为了给设计打好基础(造房先打地基,设计页面先设计布局),我们需要考虑如何最有效地使用屏幕空间。”栅格系统” 1(Grid System)有助于设计师做到这点:均匀分布的垂直线结构可以作为放置内容根据。

用这个方法,能让设计师更容易将按钮、标题或图像放在最有效的地方。将页面组件放在网格上有助于引导正在“使用”页面的用户,同时创造一个干净美观的视觉体验。

滚动和滑动的空间:用户在浏览页面内容时,不应该有任何与浏览页面无关的操作被用户“激活”,在用户尝试滚动页面时不应该“打开一个链接/页面”,这一点很重要。

换句话说就是,元素之间要有足够的间距来允许用户轻松地浏览页面。

2. 人性化的交互

在移动设备上的触摸屏界面,也意味着视觉设计必须加强交互。换句话说,元素的大小和位置应确保其易用性,并指出动作之间的重要性和相关性。

按钮点击区域:足够的按钮尺寸和间距将确保它们可以被轻松地激活。,理想情况下,标准屏幕上的按钮应该在44px到57px之间,在高密度(视网膜)屏幕上按钮应该在88px到114px之间。 这允许均匀的指尖有足够区域去更容易地激活一个按钮。

可触及的和显著的控件:如果相关连的交互模块彼此之间很容易点击,它将允许用户更快地在它们之间转换。 这将有助于减少用户在交互连接方面的困惑,并加快更复杂的流程。

为通信而设计

物理条件限制这方面只是我们为移动设备设计时所面临挑战的一半,另一半则是在信息传达方面。“移动第一”(mobile first),这个理论提示我们,移动用户应该从网站上获得与桌面用户相同的信息价值。考虑到这一点,为移动通信而设计影响了这个方式——所有设计师需要接触他们正在交流的消息。

为了加强通信,我们需要充分利用我们对信息的理解和解读。人脑解读视觉信息要比文字信息快得多,这就意味着使用视觉和图像来加强通信是非常有价值的。 良好的视觉样式能够增加价值,支撑内容或者交互的主体,并改善整体的用户体验(移动端和桌面端)。

垂直排版规律

我们优先考虑使用垂直排版来传达信息,信息结构创建了一个合理的内容流,而可视化设计可以进一步明确区分内容的层级。在内容排版上使用合适的尺寸和间距,可以创建一个良好的垂直方向的视觉流,更清晰的传达不同层级的内容。

除了前面提到的垂直网格系统,基线网格(baseline grid)可以在垂直方向上创建一个良好的的排版,使用户更容易阅读和理解内容。

具体来说,基线网格是通过行高的规范来创建的一种网格结构。它在排版上明确的规定了行距和尺寸,同时也有助于确定垂直方向上不同的内容组之间的间距。遵循这些规则可以确保内容段落的可读性,并且可以使用户清楚地区分一段内容和整体内容的差别。

基线网格在HTML和CSS中很难精确地实现(implement accurately) ,但是它在设计过程中可以为开发尺寸和确定间距提供良好的指导。

相关推荐
13个国内知名互联网公司的产品设计团队博客网址
网页设计师须知的一些前端设计基础知识
网站登陆框设计如何根据用户需求做不同的表现形式
向用户清晰表达信息是视觉设计的主旨
20大UI设计原则 设计师必备宝典
APP应用设计教程:设计元素的应用条件
如何简化网页设计让重点内容更突出?
设计完美的界面排版10个要点分享
网站设计技巧:针对不同年龄阶段用户的设计思路
16条PS网页设计经验技巧分享
让UI设计显得更简约的小技巧分享
Dribbble:最具影响力的平面设计师社区
前端开发之16进制颜色代码揭秘
揭秘QQ登录封面设计背后的故事
扁平化交互设计让用户体验更棒
9个最新网页设计趋势分享
用户界面设计教程:UI设计六要素分享
为什么英文要比中文在设计中显得高大上
站长实践:如何设计出符合优化要求的网页
好看好用?UI设计师不可不学的易用性原则
电子商务网站设计分析系列之二:首屏设计
这是个看脸的世界 即便你是APP也是如此
再见METRO!WINDOWS 10通用应用设计趋势分析
超实用干货!视觉设计师的五项技能修炼方法
简约之道:极简风格界面设计的起源与发展
移动设计指南一:如何理解移动信息架构?
想让界面优雅易读?聊聊移动端字体7个准则
百度官方出品!2015-2016交互体验趋势
移动界面设计:为什么你用的App 菜单都放在底部
暖岛网:小而美的创意类电商网站
互联网产品设计理念:产品即有机生命体
创意设计电商:追随者少 被看好的潜力市场
Fab追随者稀品网:创意设计电商的变身样本
Quirky:以社区众包的力量快速实现创意
Win8之父辛诺夫斯基:如何培养创新思维

精彩推荐

热门教程