无线视觉规范
手机端页面的设计有许多的规范,大到涉及整个页面的排版呈现方式,小到一个icon的尺寸大小,这都关系到视觉页面的美观程度以及用户体验设计。所以应该积极主动去分析深入了解并研究出可行的解决方案,同样的,无线端页面设计存在许多雷区陷阱,这个需要设计师去避免出现错误的。
一、无线端视觉规范

(一)、无线端页面尺寸规范随意缩放

无线端页面一般来说是延续pc端来进行更改调整的,所以很多小伙伴直接在pc端的基础上直接进行收缩,然后变形,大部分操作就会失效,这样的话就会影响到无线端文字的可读性以及整个视觉画面的布局,造成整个视觉布局的不协调性。

(二)、解决方法:

针对无线端与pc端存在的差异,首先应该不能直接在pc端的原基础上进行修改,而是应该对无线端的页面进行“再设计”,针对手机端的规范尺寸进行适配,比如:应该调整按钮大小,以更加适合无线端用户的视觉可读习惯、文字大小,一般18px的字号是刚好可以清楚的程度,而24px是比较舒服的一个状态,30px是用于想到重点突出的大标题,不过一般在页面中出现频率不高,因为如果一味用大标题字体的话,尽管可读性比较好,但是页面也需要加长,用户会没有耐心。

类似这些页面的无线端就是进行过“再设计”的:

(网上素材)

2无线端页面呈现内容

(一)、pc端内容信息量大,一字不漏照搬到无线端
由于pc端的页面尺寸比无线端大很多,所以pc端承载的信息内容相对比较全面,但无线端尺寸相对小很多,如果把所有pc端的内容原封不动地搬到无线端的话,就会显得拥挤不堪,导致整个页面布局看起来太过于糟乱,重点信息不能够很好地展示。

(二)、解决方法:手机端尺寸相对手机端很小,所以让页面看起来简单有层次是比较重要的,这个点对于手机端页面布局是很重要的,因为没有对比就没有重点,不能每个都是重点,每个都想突出,这样反而没有重点了,其实现在简洁风是很多大牌只要的营销手段,可能是因为苹果简洁风当下比较盛行,看起来比较有高级感,但是并不适合所有的页面,因为类似一些食品类还有一些促销类页面,需要重点突出信息部分,这个事根据自身品牌店铺定位来决定的。一些品牌的简洁风页面:

(网上素材)

3用户体验(一)、按照pc端的用户体验操作习惯延续到无线端页面上
首先pc端一般用户习惯是点击鼠标左右滑动浏览banner图或者向上下滑动鼠标浏览页面,而无线端一般用户的操作习惯是一直向上下移动浏览页面,而且操作环境的选择也会有所区别,在PC端上,点击店铺内容的方式更加直接,用户只需要通过鼠标来操作,而在无线端,直接用手指和屏幕之间直接接触,很多人会直接把pc端的页面展示方式直接搬到无线端上, 但是现在手机端以轮播的形式展示的点击率越来越低了,很多重点信息内容都在banner图上展示,这样就会造成店铺点击率降低。

(二)、解决方法:

因为目前无线端的店铺比重占据了很大的一部分,所以还是要注重无线端的用户体验设计,首先应该积极主动引导用户行为,所以不是很有必要的话尽量避免以轮播图的形式展现,因为用户已经习惯了上下的浏览操作习惯,所以一般都不会主动左右滑动。

类似这些很好的无线端用户体验设计:

(网上素材)

4总结:对于无线端页面的设计,用户体验是非常重要的,尽管现在无线店铺设计是处于弱势,一般都是直接照搬pc端的页面,但是从现在电商的发展趋势来说,无线端的用户越来越多,所以相信大家很越来越重视无线端页面的设计,设计师也要深入去学习无线端的设计规范、理念等。

图上上传页面设计_无线端页面设计“三大雷区”相关推荐

  1. 怎么把一个控件放到tab页面上去?_移动端页面内容切换

    # 移动端页面内容切换 上周做了一个和页面切换相关的需求,为了探寻在需求场景下最符合用户心理模型的交互方式,当时一共输出了有四五种方案.总结一下各种切换页面内容的方式的特点和他们适用的场景.## 一. ...

  2. 基于java智能家居,基于JAVA的智能家居控制系统的设计(信息控制端的设计)-论文二稿...

    基于JAVA的智能家居控制系统的设计(信息控制端的设计)-论文二稿 PINGDINGSHAN UNIVERSITY毕业论文 (设计 )题 目:基于 JAVA 的智能家居控制系 统的设计(信息控制端的设 ...

  3. 餐饮管理系统 mysql数据库设计分析_终稿课程设计_餐饮管理系统数据库设计.docOK版(样例3)...

    <课程设计_餐饮管理系统数据库设计.doc>由会员分享,可免费在线阅读全文,更多与<(终稿)课程设计_餐饮管理系统数据库设计.doc(OK版)>相关文档资源请在帮帮文库(www ...

  4. 电商无线页面设计手机移动端的设计模板

    因为在手机端设计中,横向的构图空间狭小.拓展性很弱,而竖向构图则更灵活,可塑性更强,也更符合我们的浏览习惯.这类一屏一个制作单位的形式比较适合详情页的制作. 如何做好手机端设计? 1.竖屏构图 一屏. ...

  5. 蓝牙耳机测试用例_移动端测试用例设计总结,这些你得懂!

    一.前言 作为移动互联网产品最后一公里的守护者,我们必须要清楚的知道自己该做什么.怎么做.但从版本迭代速度.需求量级.测试人员不断变动等方面综合来看,我们很多人都没有做好充分的准备.测试方法落后.测试 ...

  6. html怎么设置子页,京东移动端新建的自定义页面如何装修?无线端设置二级子活动页面图文演示...

    京东店铺装修手机端如何添加自定义页面?京东自定义页面怎么自定义代码装修?JD二级页面怎么做自定义模块装修?无线端怎么新建一个页面做为活动页面,京东手机店铺越来越多人注重装修了,如果手机移动端首页装修完 ...

  7. uni-app上传视频在手机上上传失败,在web端上传成功

    最近在写uni-app,上传视频的时候在web端电脑上没有链接手机调试,正常 但是!!当我打包在手机上上传视频的时候上传不上去,当我用手机连接电脑调试的时候(手机和电脑一定要在同一个局域网)发现上传视 ...

  8. vant 软键盘_移动端页面输入底部被软键盘遮挡问题

    概述 近期有个移动端页面的项目,存在需要用户输入的表单信息.因为页面不存在滑动(通过overflow设为hidden的方式),所以在点击input标签输入信息时,在安卓机下键盘会遮挡页面底部内容,当点 ...

  9. Java电子书平滑翻页效果_移动端页面平滑翻页的解决方案

    随着近几年移动营销页的火爆,催生了一个中国式的名词「H5」.而 H5 最常见的形态就是类似幻灯片翻页效果. 我们需要制作 H5 的时候,最快的办法就是使用一些滑动插件库,如 iDangero.us 出 ...

最新文章

  1. node--CommonJS
  2. python并发编程之多进程理论部分
  3. 互联网协议 — STP 生成树协议
  4. 微博开发笔记上(未完待续)
  5. centos7.0配置php环境,如何在centos7中配置一个php开发环境
  6. 最早设计计算机的目的是进行科学计算,其主要计算的问题面向,北京师范大学计算机试题1答案...
  7. SCARA机器人matlab仿真
  8. HIKSDK/大华SDK协议视频融合平台EasyCVR移动侦测录像功能无法在后台显示优化过程
  9. uptool u盘量产工具 v2.093
  10. xp系统打开sql服务器不可用,xp系统安装sql2000个人版无反应
  11. 【APICloud系列|34】上架华为应用市场缺少免责函?
  12. 即时通讯开发移动端弱网络优化方法总结
  13. php vip卡,vip.php
  14. java excel 数据有效性_Excel设置数据有效性实现单元格下拉菜单的3种方法
  15. 啊,CET6----六级高频词2
  16. 【最详细的Hexo教程,没有之一】03 - Github + Coding 部署Hexo站点
  17. 锁模块之当前读和快照读
  18. 安卓应用商店上架从入门到精通到放弃
  19. DEV C++编写程序出现 [errror]Id returned 1 exit status报错可能出现的原因及解决办法
  20. springboot(二)自动化配置源码解析

热门文章

  1. 有道难题第一题非OO解,极端记录160ms
  2. epoll 性能分析(解决占用CPU 过高问题)2
  3. 关于解决运行sql文件时,找不到MySQL默认编码utf8mb4的问题
  4. 2022年引领全球增长的60大技术:机会、增长、投资、洞察
  5. 浙大 PAT b1018
  6. 跨境商家为什么要建自己的独立站?
  7. 海外仓储系统有哪些功能?
  8. linux中改localhome名称,修改 /var/lib/locales/supported.d/local 文件(使用 locale -a 命令查看系統中所有已配置的 locale)...
  9. Leetcode每日一题:1095.find-in-mountain-array(山脉数组中查找目标值)
  10. ROS入门-14.参数的使用与编程方法