常用的8个设计Web app的技巧

操作方法

  • 01

    随着网页浏览器的流行和普及,为了方便的用户体验市场上出现了一种轻薄客户端,即Web app。于是引发了Web app发展的热潮。酷蜂科技解释:webapp的制作更加注重的是功能性,但是我们也不能忽略其本身的设计性。 对于Web app设计来说,主要是在与用户界面设计,为了在与桌面应用程序的竞争中展现其优势,web app需要提供简洁、直观、快速响应的用户界面,以便于用户在任务操作中节省精力和时间。其主要的技巧体现在: 1、使用上下文情境导航 在既定的情境下考虑用户希望看什么、需要什么是非常重要的。不需要在每一个地方都放置相同的导航控件,因为用户不是在任何情况下都需要它们。Web app可以从这种上下文情境导航中获益,仅展示用户需要的、而不是所有可用的功能,从而保持用户界面的整洁清爽。 2、Button状态积极反馈 许多web app拥有自定义样式的按钮。默认的输入按钮可能不适合某些情景,文字链接有时候看起来又太含蓄。需要注意的是,把链接做成Button样式的时候,它们就应该有button的表现形式。比如,在点击button的时候它们应该会出现被“压”过的样子。这不仅仅是纯粹的视觉变化。及时反馈给用户,可以使web app感觉起来更灵敏,与桌面应用程序的用户体验更接近。 3、界面元素随需而变 力求简洁明了是用户界面设计的重要原则。在同一时间给用户展示的功能越多,用户需要寻找和思考的时间也就越多。同样,界面中存在的选项越少,可用功能就越明显、越容易浏览。不过简化界面并非轻而易举,尤其是你不想减少应用程序功能的情况下。酷蜂科技认为,将高级功能隐藏起来是一种有效的简化方法。搞清楚在界面中用户最经常用的是哪些功能,然后把其他功能隐藏处理。这些可由下拉式菜单和控件完成。例如,搜索栏中的高级过滤器可以做成尾部的特殊下拉菜单样式。当用户需要这些过滤器的时候只需要几次点击就可以使用。 4、为模态窗口增加边缘阴影 弹出式菜单和窗口周边的阴影不仅仅是为了视觉美观。阴影一方面增大了菜单或窗口的尺寸,有助于将菜单或窗口从背景中区别开来;另一方面通过灰度化的边缘阴影可以屏蔽背景内容的噪音干扰。 这个技巧根植于传统桌面程序,帮助用户将注意力集中在弹出的窗口。由于很多模态窗口不容易从桌面程序内容页面中凸显出来,阴影可以使它们看起来具有立体效果、仿佛悬浮于其他内容之上,于是拉近了模态窗口与用户的距离。 5、让升级或降级的提示简洁、不扰民 在很多互联网产品中都会有不同权限的用户账户存在,比如邮箱、空间、网盘存储、SNS产品等。在用户拥有了一个账户后,他们可以对账户进行升级或降级。如何设计界面来提示用户他们可以升级而不去干扰用户的工作流程呢?设计师肯定不愿意在应用程序之外完成这件事情,这样的提示应该是和app是无缝连接的,而且最好是让用户感觉方便。因此升级账户的提示最好放在app内完成。 6、嵌入视频 虽然图片和文字是向用户介绍应用程序功能的很好的方式,但如果资源允许的话,视频将是一个更优方案。近年来视频在网络上的使用越来越频繁。Web app的截屏视频经常被使用在营销网站中来展示产品的功能;然而这并不是视频使用的唯一方式。 当然,Web app的设计细节远不止上文中提到的这些,还有很多细节性的问题需要我们注意。这就要求我们在设计时需要多进行总结,从更多优秀产品中发现更多思考的触发点,然后在实际工作中可以为我所用。

(0)

相关推荐

  • 五款帮你在线搞定配色的WEB APP

    配色弱福音!今天来一组超实用的配色神器,第一个不仅能直接帮你生成配色方案,还可以按照配色方案生成网页Demo,绝对是懒人必备!除此之外还有在线的配色方案参考,渐变色方案和随机色列表等,以后再也不愁没有 ...

  • WEB APP着陆页(PSD免费下载)

    小编:今天给大家带来的是由saptarshionline分享的web app着陆页.这款PSD是一个免费的应用程序的着陆页.简洁明了的设计,扁平化的风格.这是一个社交APP的概念设计,希望会对大家的工 ...

  • 如何在兔展制作免费的web app ?

    兔展是一个免费创建webapp的在线工具,是在手机.平板电脑上传递场景信息的利器.兔展创作界面简洁明了.功能强大,不懂设计不懂程序也可以轻松地创作出满意的webapp,可以用于企业品牌宣传,商家的商品 ...

  • 百度正式推出PC浏览器 打通Web App入口

    腾讯科技讯(利康)7月18日消息,百度PC端浏览器正式进入公测阶段,即日起,用户可以立即访问 http://liulanqi.baidu.com/进行下载。最新推出的百度浏览器打通了WEB APP的入 ...

  • 用ps怎么设计手机app登录页面教程

    下面小编教大家怎么用ps设计手机app登录页面,手机软件登录的时候都有登录界面的,该怎么使用ps设计一个手机app登录界面,下面我们就来看看详细的教程,需要的朋友可以参考下. 操作方法 01 1.开P ...

  • 访问在线Office Web App最新版的方法

    Office Web 应用程序有两个版本:Windows Live 中的 Office Web 应用程序(用于家庭用户.学生和小型企业);SharePoint 中的 Office Web 应用程序(用 ...

  • 微车软件好用吗?微车违章查询app使用技巧

    微车软件怎么用,好用吗?下文将告诉大家微车违章查询app使用技巧,《微车》支持违章查询、行车记录、违章主动通知、违章预警诸多高大上功能。下文主要讲解使用微车查找周边的停车场该如何操作。 微车违章查询a ...

  • axure怎么设计手机app的侧边栏原型?

    axure想要设计一款手机app的侧边栏,该怎么设计呢?下面我们就来看看详细的教程. 1.我们先打开我们的axure软件,点击新建,然后将我们的手机模型拖拽进我们的axure,点击我们的“动态面板”将 ...

  • 高德地图app怎么关闭不常用按钮?高德地图关闭上报按钮的技巧

    为了让高德地图界面干净简洁,方便新手使用,我们可以将一些不常用的按钮关闭,下面我们就一起来看看高德地图关闭上报按钮的技巧. 1)打开高德地图APP,首先点击地图界面中的“用户”图标,然后点击屏幕右上角 ...