ui设计手机端 PC端

网站页面的构成元素:文字  图形符号  图片  多媒体(动画声音视频)  色彩

 

色相

色彩感受

传递情感

红色

血气、热情、主动、节庆、愤怒

力量、青春、重要性

橙色

欢乐、信任、活力、新鲜、秋天

友好、能量、独一无二

黄色

温暖、透明、快乐、希望、智慧、辉煌

幸福、热情、复古(深色调)

绿色

健康、生命、和平、宁静、安全感

增长、稳定、环保主题

蓝色

可靠、力量、冷静、信用、永恒、清爽、专业

平静、安全、开放、可靠性

紫色

智慧、想象、神秘、高尚、优雅

奢华、浪漫、女性化

黑色

深沉、黑暗、现代感

力量、柔顺、复杂

白色

朴素、纯洁、清爽、干净

简捷、简单、纯净

灰色

冷静、中立

形式、忧郁

 

移动端设计流程:
一.出发点

  • 了解设计原则

  • 了解交互模式

  • 了解交互元素及其功能

二.分析(用户需求分析、用户交互场景分析、竞争产品分析)
三、设计(面向场景、面向事件、面向对象的设计方法)
四、开发
五、验证


功能性对照,实用性内部测试

移动端设计不用ps重字体加粗功能,常用苹方,STHeiti,Helvetica Neue等字体本身提供了粗细选择。

pc端


主体内容字体默认宋体(字体类型、配色不超过三种),一般12或14px。导航和标题可使用18px或更大,字间距一般1-1.5倍,正文颜色为深灰色(建议#333333或#666666)
页脚部分的内容,如许可证书、版权信息或备案编号等,各超链接之间统一用“|”或者空格,禁止使用加粗字体。

 

手机端字体:

 

  1. 导航栏标题34-42px,一般34或36

  2. 标签栏文字20-24px,ios自带应用都是20px

  3. 正文28-36px,正文样式在大字号下使用34,最小不小于22

  4. 一般情况下每一档文字大小设置的字体大小和行间距差异是2px,为区分标题和正文字体差异至少为4px

 

                                                                                                 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue 可以通过响应式布局和 CSS 媒体查询来适配不同的设备,同时也可以使用第三方库如 Vant、Element UI 等来实现更好的适配效果。在开发时,可以使用 rem 或者 vw/vh 单位来实现页面元素的自适应。同时,也可以使用 Vue Router 来实现路由跳转和页面切换的效果。 ### 回答2: Vue适配PC手机端的方式有几种。 一种常见的方式是使用响应式设计。Vue提供了响应式布局的特性,可以根据设备的屏幕大小和分辨率自动调整页面布局和样式。通过使用Vue的响应式设计,我们可以根据不同的设备,例如PC和手机,来显示不同的布局和样式。这样用户在不同设备上访问网页时可以得到最优的浏览体验。 另一种方式是使用Vue的动态组件。动态组件可以根据设备的类型动态加载不同的组件。比如,在PC端加载一个PC端特有的组件,而在手机端加载一个手机端特有的组件。这样可以根据设备的特性来提供不同的功能和交互。 Vue还提供了一些vue-cli的插件,例如vue-router和vuex,可以帮助我们更方便地进行PC手机端的适配。通过使用这些插件,我们可以根据设备的特性来决定加载不同的路由和状态管理。 总之,Vue适配PC手机端的方式有很多种,可以根据具体的项目需求和实际情况选择合适的方式来进行适配。这样可以提供更好的用户体验,同时提高网页的可用性和易用性。 ### 回答3: Vue 是一种用于构建用户界面的开发框架,它可以用于适配 PC手机端。为了实现 PC手机端的适配,我们可以采取以下几种方式。 首先,可以使用响应式布局来实现 PC手机端的适配。Vue 提供了许多响应式布局的工具,例如使用栅格系统来划分页面布局,通过媒体查询设置不同的样式等。通过合理地设置元素的宽度、高度、布局和间距等属性,可以使页面在不同尺寸的设备上均能良好地展示。 其次,可以通过使用 Vue Router 来实现 PC手机端的路由适配。Vue Router 是 Vue 的官方路由器,它可以帮助我们管理应用程序的路由。通过配置不同的路由规则和组件,可以根据设备的不同为 PC手机端提供不同的页面和功能。例如,在 PC 端可以显示导航栏和侧边栏,而在手机端则可以隐藏这些元素以适应较小的屏幕。 另外,可以使用 Vue 的移动端框架来适配手机端。Vue 提供了一些专门为移动端开发设计的框架,如 Vant、Mint UI 等。这些框架中包含了许多适用手机端的组件和样式,可以帮助我们快速地搭建出符合手机端界面设计标准的页面。 综上所述,通过响应式布局、Vue Router 和移动端框架的运用,我们可以很好地实现 Vue 在 PC手机端的适配。这些方法可以使得我们的应用程序在不同的设备上都能够具备良好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值