手机网页应该怎么设计 (手机网页应该设置什么)

本文目录导航：

• 手机网页应该怎么设计？
• 如何对网站导航启动优化设计
• APP如何启动视觉优化设计？

手机网页应该怎么设计？

设计要针对显示设施的实践状况来详细设计。

手机网页设计，要针对手机屏幕小，竖屏观看，手指操作，网速慢这3个特点启动优化设计。

1.针对手机屏幕小

由于屏幕小，所以要正当优化页面内容，把重点内容优先显示，不糜费用户时期查找他要的内容。

2.竖屏观看

手机基本上都是竖屏观看的，所以内容排版尽量竖着排版，繁难用户观看。

3.手指操作

由于手指没有鼠规范确，所以要把按钮加大到正当大小，繁难用户手指操作。

4.手机网速慢

尽量优化紧缩网页的大小，优化网页加载速度，优化用户体验。

临时想到这么多，不免遗漏，多多指教。

如何对网站导航启动优化设计

日常中阅读一个网站的时刻，能够吸引一点就是这一个网站的导航设计得如何。

网站的导航作用能够十分好的疏导用户极速阅读到自己想要阅读的内容，普通来说好的网站导航设计可以极大的提高用户在网站页面的逗留时期，缩小客户在经常使用环节当中的跳出率，可以作用是很大的，那么如何来优化一个网站的导航设计，就成了广阔网站制造者们所独特谋求的指标。

上方咱们就来和大家一同讨论一下这个疑问，要想优化网站的导航设计，可以从以下的这几个方面来做起。

一、栏目和结构要明晰

网站的主导航栏目的结构和称号要尽或许的明晰，普通来说，主导航是一个网站导航设计当中十分关键的一个模块，是网站的一级目录，因此为了使咱们所制造的网站全体愈加的扁平化、链接的档次愈加的少，咱们就必定要应用好主导航栏目的层级目录的长处来启动规划，要做到尽或许的明晰，了如指掌。

二、包括关键词

网站的主导航设计的时刻必定要包括关键词，这一点也是十分关键的，网站的导航系统当中的链接普通是分类页面取得外部链接的一个为关键的起源，因此咱们在选用导航关键词的时刻，要尽或许的选用蕴含长尾关键词，然而要求留意不要经常使用与网页指标不相关的词汇作为关键词，这样做反而容易惹起用户的反感，反而愈加的得失相当。

三、经常使用面包屑导航

在优化网站的导航设计的时刻可以更多的经常使用面包屑导航，很多人或许不了解什么是面包屑导航，深刻点来说面包屑导航十分无利于咱们提示用户的所在位置，在导航设计当中多经常使用它，可以协助更多的用户识别以后的网站与全体网站之间的相关，而不容易出现网路迷路的现象。

当然，优化网站导航设计的方法还是十分的多的，以上的这几个方法是咱们在通常当中经常使用的多，也为有效的方法，大家无妨多多去尝试一下。

网站树立

APP如何启动视觉优化设计？

视觉优化设计是什么：

视觉优化的不凡性在于已有设计基础启动再设计。

这象征着很少数据评估可以从原有版本中取得，同时用户对以后原有视觉设计是有态度的，或青睐、或习气、或厌倦，这些都是做优化时要求思索的点。

为什么要做视觉优化：

1. 产品定位及配置出现转变（产品角度）2. 优化用户体验（用户角度）3. 经营及盈利性需求（公司角度）

要素不是繁多的，间接要素通常是产品或用户，基本要素永远都是公司盈利。

剖析明白视觉优化的关键要素是产品还是用户，有助于咱们启动下一步设计的思索。

假设是由于产品定位及配置出现转变，这时APP的视觉优化设计应该重新产品定位、指标用户、经常使用场景登程配置的变化则要求思索与原有配置页面的视觉一致性。

咱们以微信读书1.5.6与微信读书2.0版本为例来剖析：

1.5.6版本：让阅读不再孤独

配置简介：基于微信相关链的官网阅读运行，在提供极致阅读体验的同时，为用户介绍适合的书籍，并可检查微信朋友的读书灵活、与朋友讨论正在阅读的书籍等。

2.0版本：这一次性试试用耳朵读书

配置简介：新增“听深度解读”、“定制读书电台”配置

新版在【读书】的基础上削减【听书】配置，而听书配置的指标个体基数有限、并且不是高频刚需，所以新的页面视觉设计应缩小对原有配置的影响，不应太抢视觉，并留意一致性。

以下左侧为旧版本，右侧为新版本。

【发现】

1. 线性图标在旧版的基础上启动加粗，使得重量感变大，更容易识别与点击。

同时导航栏的字体颜色也启动了相应的加深、更易于识别。

2. 参与了读书电台配置；

读书电台页面沿用入口【发现】页面的卡片式设计格调，坚持一致性。

3. 三分钟讲述] 与 一分钟朗诵] 的图标设计只管颜色和繁复的格调与过去坚持了分歧，然而新的图标图底相关不明白，可识别性较弱。

【我】

1. 图标由线性-转为有深浅变化面性，更具共性化,但相比旧版识别性削弱。

2. 敞开宰割线，强化大距离色调，画面愈加繁复有力；

3. 将“”“朋友排名”归为一栏，更具备社交属性；

4. 通知]与设置]图标转为彩色，之前的蓝色有激活形态的意思，容易经常使用户曲解。

【书架】

依据用户持书量、搜查框点击量，收起搜查栏，采取下拉时激活的模式，使得用户愈加专一集中于眼前的图书封面。

想法：

1. 参与转发配置、转发配置样式与原有评论样式相联合，一致性强。

2. 书写评论按钮转为彩色，之前的蓝色有激活形态的意思，容易经常使用户曲解。

微信读书优化总结：

1. 新版设计设计在坚持原有旧版格调的基础上，删去了过弱的宰割线，强化了过弱的线性图标、大距离，使得全体格调对比度可识别性增强，性淡薄格调削弱。

2. 新的听书配置，由于其定位关键是对读书配置的补充，低频非刚需，所以设计优化战略以一致性为主。

假设是为了优化用户体验，那么应该剖析原有体验的毛病，充沛应用现有数据，来启动优化设计。

一、什么是用户体验？

用户体验，即用户在经常使用一个产品或系统之前、经常使用时期和经常使用之后的所有感触，包括情感、崇奉、喜好、认知印象、生理和心思反响、行为和成就等各个方面。

深刻的讲，就是我在经常使用一个新的物品（比如：APP）时，用着爽不爽，比如：颜色好不难看，跳转页面流利度等一系列体验 。

二、用户体验分类

1、感观体验：出现给用户视听上的体验，强调温馨性。

普通在色调、声响、图像、文字内容、网站规划等出现。

2、交互用户体验：界面给用户经常使用、交换环节的体验，强调互动、交互特性。

交互体验的环节贯通阅读、点击、输入、输入等环节给用户发生的体验。

3、情感用户体验：给用户心思上的体验，强调心思认可度。

让用户经过站点能认同、抒发自己的外在情感，那说明用户体验成果较深。

情感体验的升华是口碑的流传，构成一种高度的情感认可效应。

感观体验、交互用户体验、情感用户体验是递进相关，用户有力感官上的体验才会继续经常使用，继而有了交互体验，最终发生情感用户体验。

经过以上对用户体验定义和分类的了解，为了优化用户体验，咱们在对一个APP启动视觉优化时，就有了明晰的思绪，知道改如何下手了。

那么就应该先剖析原有体验的毛病，充沛应用现有数据，来启动视觉优化设计。

作为一个视觉设计师，咱们关键的义务是视觉设计，当然视觉设计的同时，交互体验和情感用户体验也都是要思索出来的。

视觉设计的目的其实是要传递一种消息，是让产品发生一种吸引力。

是这种吸引力让用户感觉这个产品可恶。

产品其实就有这样一个概念，就是能够让用户在视觉上遭到吸引，爱上这个产品。

视觉能发明出用户黏度。

就比如：当你见到一团体，你首先是经过这团体的外貌，才想去了解一团体的外在。

咱们就以互动性比拟强的KEEP软件为例，在用户体验上是如何视觉优化的。

「Keep」是一款低劣的社交型健身 App，曾成为「App Store 2015 年度精选」。

笨重、傻瓜化、随时随地是Keep的特点，不同档次、不同需求的用户都能找到合乎自己需求的视频课程，获取相关的系统性指点，对入门者来说可以防止走很多弯路，迷信且兽性化的训练机制则可以协助用户更好地坚持下去。

这是Keep v4.2.0和v4.5.0的视觉优化前后的对比

在视觉上关键优化了以下几个中央：

首页数据展现优化饮食页面和饮食指南概略页面优化首页的【今天】模块跑步页面优化

以下左侧为老版本，右侧为新版本。

【首页】

1. 老版本的本周静止时长和本周朋友静止排行榜是扩散的，影响阅读，也有优先级陈列，规划比拟凌乱。

2. 新版本做了规划调整，也有所并重，本周静止和本周朋友静止排名并排放在一同，关联性更强，显示愈加直观分明；

3. keep关键是以周为计算的，新版本参与周总静止时长，并突出显示，能让用户分明的知道目前所静止状况，已实现自己设定的指标，时辰提示用户；

4. 指标达成天数也显示从4个参与到7个，刚好可以显示一周的静止指标达成状况，了如指掌，不用左右或许高低滚动，也缩小了开发的老本。

【首页-今天模块】

新版本【今天】模块，内容愈加丰盛，提示用户静止的共事让用户了解并留意更多有用的消息；视觉上用图标来分类显示更明晰条理，也更友好。

【跑步】

为坚持配置分歧性，思索到用户心思，跑步参与了指标设置和排行榜显示，让用户随时知道自己以后所在的档次；跑步按钮-老版本的纯色长方形按钮变为主色突变圆角按钮，整个keep用的圆形比拟多，

比如：首页的指标达成天数，总公里数，icon用的都是圆形，经常使用圆角按钮更合乎规范，给用户带来更好的视觉分歧性，也运用了最近比拟盛行的弱突变，显得更时兴。

【饮食】

新版本间接放了搜查按钮，和老版本相比，更繁复有力，左侧的“发现”能让那个用户分明地知道以后所在位置；新版本为了缩小阅读累赘，重新启动了消息归类整合，分类更明白，从老版本的四个icon缩小为三个icon，早中晚餐到饮食指南中，分类菜谱内容更丰盛，按各种类型分类，比如：依照场景、菜式、类型、介绍，提高了用户的处置效率。

【菜谱分类】

分类菜谱外面菜的列表做了优化，在消息显示上新版本加了关键词和配置；视觉上驳回了惯例版式，但洁净清爽，跟食物定义无关，团体感觉老版本看着更矮小上，彩色衬底+红色字体，可以在老版本格调上再优化。

【饮食指南】

老版本早中晚餐是三个按钮，要求点击进入不同的界面能力了解一天需求的菜谱，交互体验上不好；新版本把早半夜餐，下午加餐和晚餐整合到一个页面，只有要来回切换，处置起来繁难方便，头部还可以明晰看到一天要求进入体内的热量，每餐中都有饼状图对热量的多少显示，用户关心的数据显示直观明晰。Keep优化【总结】

新版本的优化关键处置了以下几个疑问：

优化界面消息规划，繁难用户极速找到想要的消息，提供阅读效率交互上愈加繁难快捷给用户带来更好的视觉分歧性

视觉优化的关键要素不是产品需求扭转就是用户体验的疑问，搞分明为什么优化，有助于咱们更好地设计产品，当然要素也可以是共存的，最终的目的都是为了公司盈利。