PC端到移动端UI设计需要注意的几点设计技巧

pc端与移动端适配 解决方案 目前流行的响应式网页开发方案 阅读详情

界面是可以让用户体验脱颖而出的一个重要因素。因此多平台用户界面设计的转换,需要UI设计师要基于小屏幕的交互来思考整个设计和优化的策略,而今天的文章,小编就为你分享8个移动端UI界面的设计技巧。

  1、更大的字体

  在小屏幕上显示的内容,应该适当地增加大小,让用户能够更轻松地阅读和消化。通常,在移动端上,每行容纳的英文字符的尺寸在30~40个最为合理,而这个数量基本上是pc端的一半左右。

  在移动端上排版设计要注意的东西还有很多,但是总体上,让字体适当的增大一些,能让整体的阅读体验有所提升。

  2、排版布局的尺寸和形式的优化

  从PC端到移动端,让用户更易于访问,形态也需要跟随着平台的变化而进行适当的优化和修改。对于整体尺寸和排版布局的设计,应该更有针对性。

  比如大量的大尺寸的图片需要跟着移动端的需求而进行优化,考虑到移动端设备上用户的浏览方式,图片最好被切割为方形,或者和手机屏幕比例相近的形状;比如选择尺寸更合理的图片,放弃不匹配移动端需求的JS动效等。所有的按钮或者可点击的元素都按照用户的手持方式,放到手指最易于触发的位置

  3、移除不必要的特效

  在PC端网页上,旋转动效和视差滚动常常会让网页看起来非常不错,但是在移动端上,情况则完全不同。内容在移动端与PC端展示时,效率和可用性始终是第一需求。快速无缝的加载和即点即用的交互是用户的首要需求,剥离花哨和无用的动效,会让用户感觉更好。

  作为UI设计师,你需要围绕着点击和滑动这两种交互来构建移动端体验,悬停动效要去掉。移动端上手指触摸是主要的交互手段,悬停动效是毫无意义的存在。

  4、精简优化导航体系

  当用户打开APP的时候,他们通常倾向于执行特定的操作,访问特定的页面,或者你希望他们点击特定的按钮,所有的这些操作能否实现,大多是要基于导航模式的设计。

  在PC端网页上,一个可用性较强的导航能够承载多个层级、十几个甚至20多个不同的导航条目,但是在移动端上,屏幕限制和时间限制往往让用户来不及也不愿意去浏览那么多类目。

  移动端的导航需要精简优化,不用沿用PC端的导航模式,可以采用侧边栏或者底部导航等更适合移动端的方式。搞清楚整个导航的关键元素之后,就可以有针对性地做优化和调整了。

  5、每屏完成一项任务

  虽然手机的屏幕越来越大,但是当你的内容在移动端设备上呈现的时候,依然要保证每屏只执行一个特定的任务,不要堆积太多的内容。

  用户的习惯和多样的应用场景使得移动端界面必须保持内容和界面与内容的简单直观,这样用户在繁复的操作中,不至于迷失或者感到混乱。

  那么怎样保证这种清晰的体验呢?让你使用的所有UI设计元素都用来帮助用户作出执行操作的决定就可以了!

  6、不要把网站的体验复制到移动端

  用户对移动应用的交互模式和界面元素有特殊的期待。在移动端设备上打开一个网页,结果加载的是PC端的版本,仅仅只是尺寸缩小了,没有什么比这个更令人尴尬的了。举个例子:比如带下划线的链接。你应该避免去使用带下划线链接的文字,这属于网页而不是移动应用(移动应用使用按钮不使用链接)。

  7、你的应用程序里不应该有“死胡同”

  用户体验设计本质上就是在设计流程,而流程在多数情况下是用来完成用户目标的。你应该避免在应用程序出现死胡同,因为这会给用户带来困惑并且导致不必要的操作。有时候,设计师会把错误消息和空状态作为空页面处理,但实际上这是一个提供有用信息的好机会。就拿Spotify的这种错误状态页面举例:

  死胡同空页面,它完全没有帮助用户理解情况,也没有回答用户:“我到底该做什么?”这个问题。

  空白状态(尤其是错误状态)不应该是一个死胡同的状态,它应该告诉用户需要怎样操作才能看到相应内容,从而使应用程序正常运行。

  Azendoo的错误状态有一个简单的“如何解决问题”的说明

  8、不要把用户引向浏览器

  用户在使用应用程序时,所有操作都应该在该应用程序中进行。如果应用程序缺少某些功能和内容,尝试使用一些嵌入应用的浏览器;但是不要调出手机的浏览器,这样会导致用户失去方向并无法返回原先的应用程序。这会提高用户抛弃应用的概率从而转化率会降低。

  Facebook安卓版app里的“忘记密码?”按钮

  提高用户体验不是一次性的任务,它是一个持续性的工作。当你从PC端到移动端的时候,设计过程中你需要对内容细节、交互模式进行深入的调整,作出和用户需求真正匹配的设计,最重要的部分是了解你的用户到底需要什么。希望分享的这8个技巧,能给你带来启示。

使用webSocket实现移动端与PC端传输图片 需求:我需要把移动端的一个base64图片传到PC端后,由PC端上传第三方接口,得到第三方接口返回的一个合成文件。 下面是我历经千辛万苦后得到的流程结果,我会按照下面如图顺序介绍每一个步骤 我好苦呀 下面开始介绍: 一.获取base64 这里实际是获取电子签名的base64,总之就是拿到一个base64 二.转文件流上传图片 里面的上传图片实际是调用接口,fd已经是可直接上传的formD... 阅读详情

相关推荐

unity中播放视频(PC端和移动端)

写在前面: 在unity中播放视频(MP4等)这是在很多游戏中希望实现(尤其是开场动画的播放);这里我分享一下最近两天我对于这个功能的解决办法;(中间有一些重复说明直接借助他人博客了,毕竟站在巨人的肩膀上) 首先说明,pc版的方法一般不适用于移动端;但是移动端的方法正常是使用于pc端的;

seriousliu的博客 9894

移动端与PC端设计的几项要点

现在移动端各种屏幕的出现,适应性就更加的强烈。根据分辨率的不同让html的字体大小变化。

tonysxiaobao的博客 1467

PC端页面适配与移动端布局方案

PC端页面适配 以设计图 1920 宽度为例: css中存在一种叫vw的单位,是针对浏览器宽度为基础的百分比单位,与%的区别在于,子元素%是相 对于父级元素的宽度来计算的,而vw则是针对浏览器的宽度来计算的。打个比方,浏览器宽度为 1920px,父级元素宽度为100px,子元素宽度写50%则是50px;而子元素如果写50vw,则其宽度则为 浏览器宽度的50%即960px; 弄清楚这点之后,我们可以计算得出: 100vw = 1920px; 1vw = 19.2px 1px = 1 / 19.2vw; 由此,

weixin_43502174的博客 1518

ttf字体包瘦身,ttf字体包提取指定字体,缩小ttf文件体积。

ttf字体包瘦身,ttf字体包提取字体

苛学加记事 1万+

webview腾讯x5内核离线安装

离线集成腾讯TBS浏览器服务,彻底解决官方下载限流问题,永久免费

观千剑而后识器,操千曲而后晓声。 7911

从ADC校准到精准测量:避开PY32F030小信号采样的那些坑

本文深入探讨了PY32F030微控制器进行ADC小信号采样时面临的挑战与解决方案。从硬件设计、软件滤波算法到系统级校准策略,详细分析了如何避开常见陷阱,实现精准测量,特别是在25mV以下小信号场景中的应用实践。

ujm567890的博客 759

移动端和PC端

一、PC端网页和移动端网页的有什么不同?一、PC端网页和移动端网页的有什么不同?1.PC端(1)屏幕大,网页固定版心(2)PC端浏览器繁多,更多考虑兼容性问题。(布局: 浮动+定位+标准流)2.移动端(1)手机屏幕小, 网页宽度多数为100%, 是适配手机屏幕宽度(2)移动端则基本不需要考虑兼容性问题,放心大胆使用CSS新特性3.分辨率:(1)硬件分辨率(屏幕出厂设置) 这种分辨率我们称为物理分辨率,不可更改。物理分辨率越大,显示的图片会约清晰。

qq_50260510的博客 1756

ubuntu20 安装px4、mavros、QGroundControl

首先安装一下ant,否则没法运行,同时因20.04的缺少动态库libawt_xawt.so无法被Java8给调用,我的解决办法是去18.04把18.04的相同路径下的动态库libawt_xawt.so移动到20.04的/usr/lib/jvm/java-11-openjdk-amd64/lib/路径中。用rosdepc的时候,你得确保你用的是鱼香ROS的提供的ROS安装方法,否则是没有rosdepc的。make px4_sitl gazebo之前,可以安装一下gazebo的 模型。二、安装MAVROS。

qq_58060770的博客 3349

屏幕分辨率:PC / 手机 屏幕常见分辨率,前端如何适配分辨率

注意:分辨率的数字表示水平像素点数和垂直像素点数,例如1920x1080意味着在屏幕上有1920个水平像素和1080个垂直像素。以上是一些较为常见的PC屏幕分辨率,还有一些非常规分辨率的屏幕也会出现,如3440 x 1440、2560 x 1080等。不同的分辨率在显示效果和硬件要求上都会有所差异。前端分辨率适配就是在不同分辨率的设备上,保证网页或应用程序的显示效果、布局和字体大小等元素能够相对合适的展示,以便用户能够更好的阅读和使用。

snow的博客 1万+

Xilinx差分原语-IBUFGDS与OBUFGDS FPGA

它将差分信号转换为单端信号,并将其输入到FPGA的逻辑片上。它将单端信号转换为差分信号,并将其输出到FPGA的引脚。在FPGA设计中,差分信号是一种常见的信号传输方式,用于提高抗噪性和抑制共模噪声。Xilinx是一家知名的FPGA供应商,提供了许多差分原语,其中包括IBUFGDS和OBUFGDS。通过使用Xilinx的差分原语,如IBUFGDS和OBUFGDS,可以实现差分信号的输入和输出。这些差分原语提供了方便且可靠的接口,使得在FPGA设计中处理差分信号变得更加简单和高效。是差分输入信号的端口,

git_database727的博客 2096

用Python绘制DCA曲线详解及示例代码

在这篇文章中,我们将详细解释如何使用Python绘制DCA曲线,并提供示例代码。通过使用上述的示例代码和解释,你可以自己尝试不同的投资金额、期数和增长率来绘制自定义的DCA曲线。通过运行上述代码,我们将得到一个绘制了DCA曲线的图表。该图表将显示出DCA投资策略在给定投资金额、投资期数和增长率下的投资价值随时间的变化情况。在上述代码中,我们使用一个循环来计算每个投资期的DCA曲线值。现在,我们可以使用上述函数来计算DCA曲线的值,并将其绘制成图表。最后,我们返回计算得到的DCA曲线值列表。

TechPr的博客 1410

【那些年做过的设计 · 纪念贴】UI设计中移动端和PC端之间具体有什么区别

其实在这之前,我一直都有一个标签:UI设计师。 偶然间翻出了这篇曾经发表在我们云顶官网上的文章,现在我决定把它重新编辑发布在优快云上,虽然这篇文章研究的主题在优快云的这群代码发烧友里显的另类。 但它也见证了我曾经自由设计的那段时光。 这是我有关设计的第一篇博客,也可能是最后一篇了。今后也要努力成为一名优秀的前端攻城狮啦~ 大家都知道UI设计主要分为移动端设计和PC端设计。 今天就跟你们聊聊这两种设计的具体区别。 首先在我看来一个好的设计一定是功能完备,交互友好,视觉美观的。其中最容易被大家忽略的一.

JZevin的博客 2438

第14.10章 高翔博士最新开源框架Lightning-LM源码解读(十):在线定位run_loc_online涉及到的核心模块总结

本文对Lightning-LM激光SLAM定位框架进行了全面剖析。该框架是一个轻量高效的激光雷达建图与定位系统,支持3D SLAM、动态图层管理等功能。文章首先介绍了项目概况和源码结构,包括核心模块如定位系统(loc_system)、激光匹配(lidar_loc)和位姿图优化(pose_graph)等。接着详细解析了各模块的关键函数和运行流程,如数据接收处理、NDT匹配和位姿优化等。最后总结了学习该框架所需的C++知识要点,包括智能指针、多线程编程等现代C++特性。该分析为SLAM开发者提供了实用的架构参考

行知SLAM 801

vue项目移动端、PC端适配方案

目录 vue项目移动端、PC端适配方案 一、第一步先安装 flexible和 postcss-px2rem(命令行安装) 二、引入lib-flexible 三、修改lib-flexible源码 四、配置postcss-px2rem 五、注意事项 vue项目移动端、PC端适配方案 vue项目移动端、pc端适配方案 lib-flexible 根据屏幕宽度,自动设置html的font-size postcss-px2rem 自动将px单位转换成rem 一、第一步先安装 flexible

weixin_59519449的博客 8036

芒果YOLO11改进23:主干Backbone篇GhostNet:原创改进高效 GhostNet 网络,华为出品,打造全新检测器

主干Backbone篇GhostNet:原创改进高效 GhostNet 网络,华为出品,打造全新检测器

包括YOLOv5、YOLOv7、YOLOv8等模型改进 406

AI人工智能领域持续学习:提升技术能力的关键

在当今科技飞速发展的时代,AI人工智能已经渗透到我们生活的方方面面。本文章的目的就是帮助大家了解在AI人工智能领域持续学习的重要性,以及如何通过持续学习来提升自己的技术能力。文章会涵盖AI的核心概念、持续学习的原理和方法、实际应用场景等方面,让大家对AI领域的持续学习有一个全面的认识。本文首先会介绍AI人工智能的核心概念,让大家对这个领域有一个初步的了解。然后详细讲解持续学习的原理和方法,通过代码示例展示如何在实际项目中实现持续学习。接着会分析AI持续学习在不同场景的应用,推荐一些学习工具和资源。

AI 原生应用开发的博客 1289

视频播放测试用例设计移动端PC端

移动端 UI测试: 返回键位置是否正确; 视频标题文字、颜色、大小、位置等要素是否正确; 视频播放器页面位置是否正确、宽高比例是否合理、显示内容(默认状态图)是否正确; 课程简介、课程目录栏目位置、比例是否正确; 课程简介中:讲师头像、姓名、课程时间、观看人数、简介等要素是否正确; 开始学习按钮颜色、位置、大小(圆角)等要素是否正确; 收藏按钮位置、大小、颜色等要素是否正确 课程目录中章节名称、文字、下拉按钮位置、大小等要素是否正确; 页面其他要素是否与UI设计稿一致; 功能测试: 返回按钮是否可以点击,是

weixin_51103262的博客 1656

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

vue项目移动端、pc端适配方案

vue项目移动端、pc端适配方案 vue项目移动端、pc端适配方案 lib-flexible 根据屏幕宽度,自动设置html的font-sizepostcss-px2rem 自动将px单位转换成rem 一、第一步先安装 flexible和 postcss-px2rem(命令行安装) npm i lib-flexible -S npm i pos...

青梅煮码 3654

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

vue项目经验:移动端、pc端适配方案(px转rem)

vue项目移动端、pc端适配方案 vue项目移动端、pc端适配方案 lib-flexible 根据屏幕宽度,自动设置html的font-size px2rem-loader 自动将px单位转换成rem 一、第一步先安装 flexible和 px2rem-loader(命令行安装) npm i lib-flexible -S npm i px2rem-loader -D 简要介绍这两个包...

weixin_45031595的博客 2万+

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

pc端ui图片尺寸_PC端UI设计尺寸规范?

对于刚入行的UI设计师,最容易犯的错就是在设计移动APP时,不懂什么尺寸或者用哪种屏幕的尺寸是最适当的?为了解决这个问题,今天我们就简单的为大家整理做UI时最基础的尺寸规范。现象首先说现象,大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920,而且还有传说中的2K屏。...

weixin_39531037的博客 4983

​vue项目移动端、PC端适配方案​

之所以设为37.5,是为了引用像mint-ui这样的第三方UI框架,因为第三方框架没有兼容px2rem ,将remUnit的值设置为设计图宽度(这里为750px)75的一半,即可以1:1还原mint-ui的组件,否则会样式会有变化,例如按钮会变小。我们都知道chrome的最小显示的字体是12px,如果字体用rem,计算出来小于12px,那么就也会以12px显示,而且我们不希望出现13px或者15px这样的奇葩尺寸,所以字体最好是用px来表示,至于适应,我们可以写媒体查询。那为什么你在这里写成了37.5呢?

Zhang_qishan的博客 3685

pc端和移动端适配

一. 移动端适配 1.安装两个插件库 lib-flexible和px2rem-loader flexible.js是淘宝官方H5移动适应解决方案 px2rem会在项目编译的过程中根据根结的font-size值将我们项目css中的px单位转成rem, 其中不需要转成rem的可以写成PX ,UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要配置相关样式,在style中需要" !important "进行样式覆盖。 2.操作步骤 第一步:安装l

qq_44688183的博客 2565

pc端 移动端适配rem插件方式

PC端 , 移动端适配

你要走就走的博客 3446

CSS常见单位:移动端与PC端的设计考量

本文将介绍CSS中常见单位的使用方法,并探讨在移动端和PC端设计时如何选择合适的单位,帮助开发者更好地实现响应式布局。CSS中有多种单位可以用来定义大小和间距,包括像素(px)、百分比(%)、视口单位(vw/vh)、相对单位(em/rem)、点(pt)、毫米(mm)、英寸(in)等。每种单位都有其适用场景和优势。CSS中常见单位的选择对移动端和PC端的设计至关重要。通过了解不同单位的特点和优势,开发者可以更好地实现响应式布局和精确控制。

你若盛开,清风自来 1354

vue移动端、PC自适应(配置postcss-px2rem)

现在配置postcss-px2rem移动端适配的方法大致有几种: 不管用那种方法配置,首先拉取依赖npm lib-flexible postcss-px2rem,或者npm lib-flexible postcss-pxtorem,两种配置的依赖是不一样的,要注意。这里没加–save是因为npm拉包默认就给你加到package.json的依赖里去了 然后以下配置方法任选一种使用 1.在postcss.config.js中配置(postcss-pxtorem) module.exports = {

qq_42031498的博客 2万+

手机端适应_vue项目移动端、pc端适配方案

vue项目移动端、PC端适配方案vue项目移动端、pc端适配方案lib-flexible 根据屏幕宽度,自动设置html的font-sizepostcss-px2rem 自动将px单位转换成rem一、第一步先安装 flexible和 postcss-px2rem(命令行安装)npm i lib-flexible -S npm i postcss-px2rem -S 简要介绍这两个包的用途:f...

weixin_39775976的博客 2722
上一篇: 聊聊APP最常用的9种状态设计
下一篇: 移动UI设计:移动应用UI中的导航设计内容
帅朋2013139121
博客等级 码龄12年 18粉丝 5原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值