手机qq浏览器怎么调页边距(使用场景与设计方法)

首页教程更新时间:2023-05-22 02:42:44

从使用场景和设计方法来看,App与Web的设计有什么区别?

手机qq浏览器怎么调页边距,使用场景与设计方法(1)

早前,总是遇到问“Web设计”和“UI设计”分别做了多久?之类的询问,文章开始之前,我们先来聊聊什么是UI设计。

UI=Ueser Interface,直译“用户界面”。也就是说UI设计就是用户界面设计。所以只要是用户,也就是人机交互得体验中会用到的界面,都叫做“UI”,对于这些“UI”的设计,我们都统称为“UI设计”。

界面有很多种,我们主要介绍Web与App界面,由浅入深,通过使用场景与设计方法、开发环境与适配要点,两两结合来看一下他们的区别。

关于使用场景,2012年移动互联网元年至今,越来越多的小伙伴将网瘾道具,从电脑改为移动设备。以前聊的是,我配了个XXX的显卡跑游戏,现在越来越多的是,某果的发布会看了吗?

越来越多的用户“道具”,促使我们要去画更多的,用户的“道具”皮肤,也就是我们“俗称”的界面。

在设计不同的“皮肤”时,我们可通过考虑以下几点设计方法,来区分他们。

1. 交互方式的不同

1.1 操作媒介

手机qq浏览器怎么调页边距,使用场景与设计方法(2)

Web网站 – 鼠标操作 VS 移动App – 手指场景的局限造成了,使用电脑成本会高一些,相对按钮位置的精确度会更高(在触摸大屏还没出现的时代,我们操作鼠标来实现点击)。

而移动设备,随时随地动动手指就可以了。

我们要注意预留点击区域,控制可点击内容的艰巨性。

1.2 设计要点

(1)使用场景不同

两端的阅读范围及内容长度偏重的也因此不同。

(2)文字大小

Web设计 :比较随意,文章正文字体12px/14px;页面安全区域1080px~1280px为宜(一些展示页面字体会做到16-20px或更大)。

手机qq浏览器怎么调页边距,使用场景与设计方法(3)

App设计:正文30-34px,最小可用28px;注释及提示行文字20-24px,最小不小于20px。(具体字数根据24px-36px的字体大小,以及页边距来定~)。

(3)Banner

手机qq浏览器怎么调页边距,使用场景与设计方法(4)

2. 反馈方式的不同

手机qq浏览器怎么调页边距,使用场景与设计方法(5)

相对PC端的位置固定,用户会在一个相对平缓的环境浏览页面,状态也会更为专注。误点击的概率小,更多的会讲究反馈速度和信息的精确度,用户比较多的是收藏正页面而不是单独的段落。而移动端用户因为场景多变,很多时候会利用走路,坐车的实际去浏览界面,更容易产生误操作,也更容易对页面内容产生疲惫感。

Web设计:一般对于界面的通知中心,位置相对固定,但较为隐蔽,用户使用的不多,很难主动唤起用户。

这里设计师需要做的,是将自动呼出的弹窗提示和漂浮窗口这类的“强制”、“粗鲁”的提示形式。(经常被运营要求加个活动飘窗,价格在线客服,这类令人反感的交互方式。)

通过一些,相对“隐蔽”、“固定”、“委婉”的方式及摆放位置,在不影响用户阅读的前提下进行提示交互。

手机qq浏览器怎么调页边距,使用场景与设计方法(6)

App设计:最常见的是系统自带的推送通知,用户可主动关闭通知,当然也有嵌在页面内的,因为屏幕限制,所以相对网页更加突出,设计师需要思考如何让用户更容易“开启通知权限”。

手机qq浏览器怎么调页边距,使用场景与设计方法(7)

3. 侧重的不同

针对不同设备用户的不同习惯,我们在定义两端的交互内容时也要有所侧重,我们会选择性的对一些内容进行隐藏,也会针对设备区分同一功能的交互方式。比如:两端同样的收藏动作,Web用户比较多的是收藏整页,而不是单独的段落;因此用户会较多使用“收藏夹”、下载等方式。

而对App用户因为切换应用容易被打断操作及阅读环境的限制,除了选择一些App自带的“稍候阅读”功能外,“截屏”保存或长按收藏就比较实用了。

手机qq浏览器怎么调页边距,使用场景与设计方法(8)

3.1 藏功能

平台,会在两端分别给用户不同的功能侧重。就好像工作时间会更优先pc端去处理事情,这是因为,PC端能够更好的拆解我们的需求,因为需求不同界面的侧重功能也会不同。

比如:我们会有在平台编辑文章并配图、排版发布平台的需求,但是在两端同时体验操作后发现,App任务发布的复杂程度让用户难以理解。往往一个Web页面就能完成的事情App端需要2-3个页面才能完成,加上大段的文字内容需要编辑,以及网络状态原因,让发布任务变得很艰难。

因此,很多App就会拆分两端的用户需求,将商家更多的引导去Web去上架货物;消费者则侧重于App,同时界面会根据不同端“藏”去一部分的功能。

3.2 藏内容

因界面分辨率的差异化,我们也会隐藏一些需求度较低的内容元素。比如:我们常说的面包条菜单,其实就是把Web上常规的Menu,适应智能手机的操作和显示特性而做出的变化。

Web网站:以鼠标或触摸板为操作媒介, 常用交互方式有左击、右击、hover鼠标滑过几个操作方式,对应这些操作的web端可以将隐藏的元素,(比如解释类文字,及子菜单等)可以在鼠标hover时或是点击后才展示出来。

手机qq浏览器怎么调页边距,使用场景与设计方法(9)

移动App:因为实际面积更手指触控的关系,App常用的交互方式有,手指点击、滑动、捏合等各种复杂的手势。同时在App设计时,多遵循用选择代替输入,因此设计师需要更多整合信息,并隐藏一些焦点外的内容。

手机qq浏览器怎么调页边距,使用场景与设计方法(10)

3.3 “藏”的设计方式

(1)提示

通用-小红点、提示气泡、文字字重及变色、展开收起常用提示性符号。

手机qq浏览器怎么调页边距,使用场景与设计方法(11)

(2)内容收起Web网站

点击下拉、hover下拉。

手机qq浏览器怎么调页边距,使用场景与设计方法(12)

移动App:滑动拖出内容

手机qq浏览器怎么调页边距,使用场景与设计方法(13)

4. 功能侧重的不同

手机qq浏览器怎么调页边距,使用场景与设计方法(14)

Tips:我们在“藏”的时候要注意,移动App以单手操作为主,界面上重要元素需要在用户单手点击范围内,或者提供快捷的手势操作。

5. 网络环境的不同

Web使用的是Wifi或是电缆等无限量的高速网络,而App则是移动网络或是Wifi,网络环境相对复杂。应对这些不同网络环境对应的网络速度,我们可以通过分页区别化和加载区别化来提高用户的体验。

Web网站:一般都是点击进入链接后从0开始加载,也因为网络稳定的“先天”优势,读用翻页符号来解决分页问题,也有一些以支撑的网站选择使用“瀑布流”的方式替代分页。

手机qq浏览器怎么调页边距,使用场景与设计方法(15)

比如,花瓣、蘑菇街这类“看图”的网站,因为搜索后的数据格式相同,用户对同一内容兴趣关注度大,停留对比时间较长,所以优先使用“瀑布流”。

移动App:因用户使用环境复杂(可能在移动过程中从通畅环境到封闭的信号较差的环境,网络可能从有到无、从快到慢)。所以和网站有区别的是,我们一般通过用户主动下载、更新的方式来加载主要框架;实时的数据信息则是在用户打开App后通过当前网络加载,也因为网络不稳定的劣势,很少有翻页符号来区别每页,反复刷新加载会造成等待时间较长。

Tips:注意图片大小 -加载图片是对数据流量和网速的“巨大”考验,因此,我们在一些运营类的项目或者是商场图片时,尤其是App图一定要记得压缩。我们可以用到tinypng.com等在线压缩图片的工具进行压缩,也要提醒开发小哥哥发版前记得压缩图片。

总结

最后是网络环境,因为两者各自网络环境的优劣势,我们在做页面布局设计的时候也要作出相应的调整。

虽然现在Web端的网站等在慢慢的被弱化,连鹅厂都放弃了Web端的QQ,但是作为UI设计师,对于Web端的基本工还是不能放弃啊~至少App战胜不了后台系统!

参考链接:

本文由 @Quines 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

,
图文教程
相关文章
热门专题
推荐软件
奇热小说
奇热小说
下载
QQ2019手机版
QQ2019手机版
下载
王者荣耀
王者荣耀
下载
百度浏览器迷你版
百度浏览器迷你版
下载
2345浏览器手机版
2345浏览器手机版
下载
网易邮箱
网易邮箱
下载
爱奇艺
爱奇艺
下载
网易云音乐
网易云音乐
下载
WPSOffice
WPSOffice
下载
优酷
优酷
下载
谷歌浏览器(Chrome)
谷歌浏览器(Chrome)
下载
迅雷看看播放器
迅雷看看播放器
下载
UC浏览器
UC浏览器
下载
QQ音乐
QQ音乐
下载
阿里旺旺买家版v9.12.10C官方版
阿里旺旺买家版v9.12.10C官方版
下载
360安全卫士v12.1官方版
360安全卫士v12.1官方版
下载
猜你喜欢
晨龙捕鱼手机版
晨龙捕鱼手机版
下载
转一转拼图
转一转拼图
下载
百智通线上教育
百智通线上教育
下载
朋友农场
朋友农场
下载
拼兔掌柜卫士v21.72免费版
拼兔掌柜卫士v21.72免费版
下载
王者荣耀去图p图
王者荣耀去图p图
下载
时空军团
时空军团
下载
XData病毒解密工具v12.5.18768官方版
XData病毒解密工具v12.5.18768官方版
下载
节拍少女ios版
节拍少女ios版
下载
图种生成神器1.0绿色免费版
图种生成神器1.0绿色免费版
下载
天气吧实时天气预报
天气吧实时天气预报
下载
精卫之心
精卫之心
下载
步多
步多
下载
一键之旅
一键之旅
下载
满江红飞升版
满江红飞升版
下载
模拟游戏盒
模拟游戏盒
下载