[fusion_builder_container admin_label=”Storie Title” hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”large-visibility” status=”published” publish_date=”” class=”” id=”” border_size=”” border_color=”” border_style=”solid” margin_top=”0px” margin_bottom=”” padding_top=”20%” padding_right=”3%” padding_bottom=”” padding_left=”3%” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”#181818″ background_image=”http://149.129.73.19/wp-content/uploads/2020/02/Jietu20200216-213303@2x.jpg” background_position=”center center” background_repeat=”no-repeat” fade=”yes” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ admin_toggled=”no”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ spacing=”” center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” border_radius_top_left=”” border_radius_top_right=”” border_radius_bottom_right=”” border_radius_bottom_left=”” box_shadow=”no” box_shadow_vertical=”” box_shadow_horizontal=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”6%” padding_right=”8%” padding_bottom=”” padding_left=”8%” margin_top=”0px” margin_bottom=”0px” background_type=”single” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”#ffffff” background_image=”” background_position=”left top” background_repeat=”no-repeat” background_blend_mode=”none” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_type=”regular” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ last=”true” first=”true”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”caption” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

阅读时长 — 15 分钟

[/fusion_text][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”center” size=”2″ font_size=”” animated_font_size=”” line_height=”” letter_spacing=”” margin_top=”30px” margin_bottom=”20px” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=””]

OS站点的用户研究与交互设计

[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”caption” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

文章快速导航

[/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

当前现状    用户研究   交互方案

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”Storie Title Mobile” hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility” status=”published” publish_date=”” class=”” id=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”” background_image=”http://149.129.73.19/wp-content/uploads/2020/02/Jietu20200216-213303.jpg” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ spacing=”” center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”http://localhost:8888/wp-content/uploads/2019/03/single-blog-post-feat.jpg” background_position=”center center” undefined=”” background_repeat=”no-repeat” hover_type=”zoomout” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”10%” padding_right=”” padding_bottom=”10%” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” first=”true”][fusion_separator style_type=”default” hide_on_mobile=”small-visibility,medium-visibility” class=”” id=”” sep_color=”” top_margin=”200px” bottom_margin=”” border_size=”” icon=”” icon_circle=”” icon_circle_color=”” width=”” alignment=”center” /][/fusion_builder_column][fusion_builder_column type=”1_1″ layout=”1_1″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” background_color=”#ffffff” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”6%” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” first=”true”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”caption” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

阅读时长 — 15 分钟

[/fusion_text][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”center” size=”2″ font_size=”52px” animated_font_size=”” line_height=”” letter_spacing=”” margin_top=”30px” margin_bottom=”20px” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=””] OS站点的用户研究与交互设计 [/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”caption” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

文章快速导航

[/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

当前现状    用户研究   交互方案

[/fusion_text][fusion_separator style_type=”single solid” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” sep_color=”#181818″ top_margin=”20px” bottom_margin=”10px” border_size=”2″ icon=”” icon_circle=”” icon_circle_color=”” width=”32px” alignment=”center” /][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”Intro” hundred_percent=”no” hundred_percent_height=”yes” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”10px” padding_right=”” padding_bottom=”4%” padding_left=”” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ admin_toggled=”yes”][fusion_builder_row][fusion_builder_column type=”1_6″ layout=”1_6″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” element_content=”” first=”true”][/fusion_builder_column][fusion_builder_column type=”2_3″ layout=”2_3″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” first=”false”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

一加OS站点是介绍OS功能的官网站点。开始的预期是作为独立站点存在的，配备独立的运营人员。大家都知道，在手机大战那些年，大家都努力基于Android打造具有自己设计和交互理念的OS系统。一加也是基于那时候打造了氢系统和氧系统，氧系统更接近原生Android，氢系统更接近IOS/MIUI/EMUI这一套。

一加作为手机厂商中的小公司，团队无法维系两套系统的发展，尤其在经历2016年一加2和X的滑铁卢之后，团队缩小，最终路线为氢OS、氧OS合并为一套系统。

[/fusion_text][fusion_separator style_type=”default” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” sep_color=”” top_margin=”30px” bottom_margin=”” border_size=”” icon=”” icon_circle=”” icon_circle_color=”” width=”” alignment=”center” /][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

OS站点只有国内有，且页面多年没有更新过，改掉老破旧是UX-team 2019年的重要目标。我们决定不再维护独立的OS站点，将介绍页面移动到手机专题页，将内容下载之类的页面移动到服务模块。2019年上半年，我们在7Pro专题页的时候，同时完成了这个设计改造。（这篇文章讲的是什么内容，围绕什么核心在讨论，不太清楚）

那么，这篇文章，讲述的就是一个后续的小版本迭代问题。

下图是页面开场效果的Demo展示。

[/fusion_text][fusion_separator style_type=”default” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” sep_color=”” top_margin=”30px” bottom_margin=”” border_size=”” icon=”” icon_circle=”” icon_circle_color=”” width=”” alignment=”center” /][/fusion_builder_column][fusion_builder_column type=”1_6″ layout=”1_6″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” element_content=”” first=”false”][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”开场视频” hundred_percent=”no” hundred_percent_height=”yes” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”no” video_mute=”yes” video_preview_image=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ admin_toggled=”yes”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ spacing=”” center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” border_radius=”” box_shadow=”no” dimension_box_shadow=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” background_type=”single” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”” background_image=”” background_image_id=”” background_position=”left top” background_repeat=”no-repeat” background_blend_mode=”none” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_type=”regular” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ last=”true” first=”true”][fusion_video video=”http://149.129.73.19/wp-content/uploads/2020/02/OS2.mp4″ video_webm=”” width=”” controls=”” preload=”metadata” loop=”yes” autoplay=”no” mute=”yes” preview_image=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” css_id=”” overlay_color=”” border_radius_top_left=”” border_radius_top_right=”” border_radius_bottom_right=”” border_radius_bottom_left=”” box_shadow=”no” box_shadow_vertical=”” box_shadow_horizontal=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” alignment=”” margin_top=”” margin_bottom=”” /][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”当前现状” hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”1″ border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”5%” padding_right=”” padding_bottom=”” padding_left=”” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ admin_toggled=”yes”][fusion_builder_row][fusion_builder_column type=”1_6″ layout=”1_6″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” element_content=”” first=”true”][/fusion_builder_column][fusion_builder_column type=”2_3″ layout=”2_3″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” first=”false”][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”left” size=”3″ font_size=”” animated_font_size=”” line_height=”” letter_spacing=”” margin_top=”” margin_bottom=”” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=””] 当前页面情况分析 [/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

既然这是一个现存的网站，我们首先需要考虑当前的数据流量情况，以便得到更多有效信息。

首先看下，来自Google Analytics的数据情况分析。

[/fusion_text][fusion_imageframe image_id=”4608|full” max_width=”100%” style_type=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]http://149.129.73.19/wp-content/uploads/2020/02/6个月H2OS数据.jpg[/fusion_imageframe][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

 

从数据上看，有两个指标不太好：

一是跳出率太高，竟然高达69.45%。这意味着页面没有太多的互动和操作，按经验，这种高质量内容展示页面 ，跳出率应该控制在30～55%才算合理。

二是页面流量效率不尽人意。（增加更多细节）

接着，我们来看下滚动图和热力图： [/fusion_text][fusion_separator style_type=”default” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” sep_color=”” top_margin=”30px” bottom_margin=”” border_size=”” icon=”” icon_circle=”” icon_circle_color=”” width=”” alignment=”center” /][fusion_imageframe image_id=”4611|full” max_width=”” style_type=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]http://149.129.73.19/wp-content/uploads/2020/02/OS-热力图.jpg[/fusion_imageframe][fusion_separator style_type=”default” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” sep_color=”” top_margin=”30px” bottom_margin=”” border_size=”” icon=”” icon_circle=”” icon_circle_color=”” width=”” alignment=”center” /][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

从滚动图来看，50%的用户都浏览到最后三屏的位置。这说明，该页面访客质量极好。

一般热力图往往都会好于滚动图；热力图展现的是用户和页面点击的情况，也就是页面的互动性 。愿意发生点击的用户，质量都是高于纯滚动查看的用户的。

你可以回忆一下淘宝购物的时候，你感兴趣才会点击加入购物车或者点击领取券之类的，不感兴趣的，滚动看下就走了。如果滚动用户都看到了后面，就说明访问页面的内容质量很好。

相对的，从这个页面来看，页面点击率很。这就意味着，页面没有合理的引导点击。我们在交互设计中，合理的创造点击事件，是为了让用户看到更深层次的内容；同时，也给用户加强这部分内容的印象。毕竟用户有互动的内容，比纯粹浏览下页面，印象会更加深刻许多。

所以总结来说，该页面访客质量很高、但流量效率差、互动性低，且没有出口。 [/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_6″ layout=”1_6″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” element_content=”” first=”false”][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”用户研究” hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”2″ border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”5%” padding_right=”” padding_bottom=”” padding_left=”” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″][fusion_builder_row][fusion_builder_column type=”1_6″ layout=”1_6″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” element_content=”” first=”true”][/fusion_builder_column][fusion_builder_column type=”2_3″ layout=”2_3″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” first=”false”][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”left” size=”3″ font_size=”” animated_font_size=”” line_height=”” letter_spacing=”” margin_top=”” margin_bottom=”” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=””]用户研究[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””] 接下来 ，我们需要从用户的角度出发去分析设计内容。要设计好一个页面，最重要的一个部分是我们要了解用户的目标是什么。作为设计师，我们得先摆脱从细节着手的习惯，不要一开始就沉浸在局部的页面设计上，去画某一个图标、一直在这个页面好不好看的问题上纠结。 清晰地了解用户目标，才能够发现真正的问题所在 ，能够知道设计的方向有没有错，不会浪费投入时间。

访客分类

在这个页面中，分类访客的指标在于用户对OS的了解程度。所以，我们进行了访客分类。在访问OS页面的用户中：

1、氢OS用户（什么意思，之前有说过氢系统和氧系统，这里为何就成氢系统了），占比26%；

2、Android的用户（非氢OS用户），占比50%；

3、iOS用户，且从不了解Android，占比24%；

最多的是非一加系统的 Android用户，占比50%，这部分人群是我们标准的转化人群。其次iOS用户中，了解Android的iOS用户也是转化目标之一（没有体现这部分的数据）。 [/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””] 我们通过访谈发现 ，了解Android的iOS用户更在意的是权限控制、隐私和安全之类的，他们认为Android存在不安全、消息乱、广告多、APP乱启动等情况。但Android用户在意的是独特功能、新功能。

在Android 10的更新中，最重要的一点是权限和隐私的改变，对每个APP的各类权限都可以单独授权，即使拒绝APP弹出获取定位等权限的请求，APP依旧可以使用。一加是最先更新到Android 10的厂商。

[/fusion_text][fusion_separator style_type=”default” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” sep_color=”” top_margin=”30px” bottom_margin=”” border_size=”” icon=”” icon_circle=”” icon_circle_color=”” width=”” alignment=”center” /][fusion_imageframe image_id=”4613|full” max_width=”” style_type=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]http://149.129.73.19/wp-content/uploads/2020/02/User-personal.jpg[/fusion_imageframe][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

用户目标

接下来，我们必须要知道用户为什么来访问OS页面，他们的目标是什么？为了知道用户目的，我们回收了近500份问券，得到了以下答案： · 想全面了解系统功能，占比48%； 无论上面哪种类型的用户，大部分都希望了解全面的功能，然而我们的运营诉求是只展示新功能，这一点和用户诉求是相违背的。他们计划在下个版本的站点介绍中实现这部分。 · 查看H2OS独特功能，12%； 这部分诉求大部分都是Android和H2OS用户，他们对折腾和猎奇的心态比IOS用户更强。 · 了解新功能，占比4%； 我们运营的主要诉求，但实际占比很低； · 和其他手机系统做对比，占比19%； 这部分用户基本都是转化预备役的用户，他们可能考虑换机，但想知道H2OS的能否依旧满足自己的需求； · 没有目的，随便看看，占比17%； 嗯…可能只是在了解新品介绍的时候顺带过来的访客。 [/fusion_text][fusion_imageframe image_id=”4614|full” max_width=”” style_type=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]http://149.129.73.19/wp-content/uploads/2020/02/User-aim.jpg[/fusion_imageframe][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””] 通过问券，我们得到了用户目标是什么，这些会直接告诉我们页面应该展示哪些内容。很多公司的内容是直接由运营或相关岗位给出的，如果他们没有通过用户研究而直接给出，当然是极其不科学的。 我们在一开始，就会做出角色诉求图；通过公司内部的角色访谈，运营的给出的策略是：只展示新功能。很显然，这并不符合用户目标。 [/fusion_text][fusion_imageframe image_id=”4616|full” max_width=”” style_type=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]http://149.129.73.19/wp-content/uploads/2020/02/OSpage-actor.jpg[/fusion_imageframe][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

用户行为

用户目标很清晰了，理论上来说，我们页面的框架内容可以得出来了。比如这样的导航： [/fusion_text][fusion_imageframe image_id=”4617|full” max_width=”” style_type=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]http://149.129.73.19/wp-content/uploads/2020/02/OS-navigation.jpg[/fusion_imageframe][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””] 但是，我们既然是改进当前页面，就应该要去观察下当前用户是如何浏览的；为此，我们进行了大量的用户录屏。 下面的视频是个典型用户的录屏；我 [/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_6″ layout=”1_6″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” element_content=”” first=”false”][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”录屏” hundred_percent=”no” hundred_percent_height=”yes” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”no” video_mute=”yes” video_preview_image=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ admin_toggled=”yes”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ spacing=”” center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” border_radius=”” box_shadow=”no” dimension_box_shadow=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” background_type=”single” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”” background_image=”” background_image_id=”” background_position=”left top” background_repeat=”no-repeat” background_blend_mode=”none” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_type=”regular” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ last=”true” first=”true”][fusion_video video=”http://149.129.73.19/wp-content/uploads/2020/02/OS-recording-.mp4″ video_webm=”” width=”” controls=”” preload=”metadata” loop=”yes” autoplay=”no” mute=”yes” preview_image=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” css_id=”” overlay_color=”” border_radius_top_left=”” border_radius_top_right=”” border_radius_bottom_right=”” border_radius_bottom_left=”” box_shadow=”no” box_shadow_vertical=”” box_shadow_horizontal=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” alignment=”” margin_top=”” margin_bottom=”” /][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”用户研究” hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”5%” padding_right=”” padding_bottom=”” padding_left=”” admin_toggled=”yes”][fusion_builder_row][fusion_builder_column type=”1_6″ layout=”1_6″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” element_content=”” first=”true”][/fusion_builder_column][fusion_builder_column type=”2_3″ layout=”2_3″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” first=”false”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””] 从录屏中，我们得出，用户最感兴趣的界面是UI界面部分。用户目光和光标路线始终聚焦在OS界面部分。 [/fusion_text][fusion_imageframe image_id=”4619|full” max_width=”” style_type=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]http://149.129.73.19/wp-content/uploads/2020/02/OSpage-userfocus.jpg[/fusion_imageframe][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””] 我们的问券调查也同样反应出了一样的答案。 [/fusion_text][fusion_imageframe image_id=”4620|full” max_width=”” style_type=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]http://149.129.73.19/wp-content/uploads/2020/02/OSpage-userintersting.jpg[/fusion_imageframe][/fusion_builder_column][fusion_builder_column type=”1_6″ layout=”1_6″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” element_content=”” first=”false”][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”交互方案” hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”3″ border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”5%” padding_right=”” padding_bottom=”” padding_left=”” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ admin_toggled=”yes”][fusion_builder_row][fusion_builder_column type=”1_6″ layout=”1_6″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” element_content=”” first=”true”][/fusion_builder_column][fusion_builder_column type=”2_3″ layout=”2_3″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” first=”false”][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”left” size=”3″ font_size=”” animated_font_size=”” line_height=”” letter_spacing=”” margin_top=”” margin_bottom=”” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=””]交互方案[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””] 用户研究部分我们已经讲完了。如果想了解更多的设计思路，请访问UX方法。 可能很多人觉得这些会花费很长时间，得不偿失，不够实际。但实际上，调研访谈花费我们多少时间呢？这是我在用户研究部分的步骤和花费的时间。

用研所花费的时间

· 早上上班，开启Hotjar的热力图、转化漏斗；去GA截取相关数据 ； · 上午花费一小时设计好问券，并在官网投放，25%的访客将收到问券邀请； · 同时考虑访谈对象； · 下午花费1-2小时，访谈4-5个目标用户； 第二天上班，我们将回收到约500分问券，得到热力图，其他相应的数据资料都有了。前后投入约1人/天的工时。 由此可见，用户研究其实有很多简单可行的方法。当然，我上面的方法肯定不够完美，但是却是性价比最高的可行性路径。如果需要更完整的调研，也要节省投入，参见临阵磨枪的用研究方法

流程

交互设计，众所周知的是流程，页面之间的跳转关系。大家牢记，一定要把所有流程都要画出来。页面的流程关系隐藏着很多潜在的导航陷阱和之前研究所体现的问题。原来的OS页面导航就存在巨大的陷阱。 下图是单一的导航，只考虑了用户的正向流程：从首页-手机页面-OS介绍页面。

[/fusion_text][fusion_imageframe image_id=”4621|full” max_width=”” style_type=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]http://149.129.73.19/wp-content/uploads/2020/02/OS-oldnavigation.jpg[/fusion_imageframe][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””] 如果用户是从服务页面过来的呢？难道也是这个导航？很显然，不行。下图是页面流程图，用户存在两种访问路线，实际上，还存在直接访问的路线。

[/fusion_text][fusion_imageframe image_id=”4623|full” max_width=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]http://149.129.73.19/wp-content/uploads/2020/02/OS流程.jpg[/fusion_imageframe][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””] 所以我们的导航方案如下图，需要处理成动态的导航，总共有两种状态，依据访客来源而展示不同的导航内容。

[/fusion_text][fusion_imageframe image_id=”4624|full” max_width=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]http://149.129.73.19/wp-content/uploads/2020/02/OS-nav-f.jpg[/fusion_imageframe][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

结构内容

OS站点的流程相对简单。接下来，我们需要重点考虑的是结构内容层。依据之前的用户研究部分，我们可以得出以下结论： · 首先，一个良好的开场动画，而且是体现用户最关系的界面部分； · 尾部需要有出口内容； · 首屏需要将各个用户关心的内容展示：下载、H2OS设计理念、数据迁移等； · Android10需要体现安全隐私的内容； · 增加弹窗解释，以增加互动率； 最终框架内容如下图：

[/fusion_text][fusion_imageframe image_id=”4626|full” max_width=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]http://149.129.73.19/wp-content/uploads/2020/02/OS-structure-scaled.jpg[/fusion_imageframe][/fusion_builder_column][fusion_builder_column type=”1_6″ layout=”1_6″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” element_content=”” first=”false”][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”交互方案” hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”4″ border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”5%” padding_right=”” padding_bottom=”” padding_left=”” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ admin_toggled=”yes”][fusion_builder_row][fusion_builder_column type=”1_6″ layout=”1_6″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” element_content=”” first=”true”][/fusion_builder_column][fusion_builder_column type=”2_3″ layout=”2_3″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”false” first=”false”][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”left” size=”3″ font_size=”” animated_font_size=”” line_height=”” letter_spacing=”” margin_top=”” margin_bottom=”” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=””]高保真Demo[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””] 整个页面的改进部分在于内容的结构的调整；都是属于微改进部分。新增的内容部分，需要做高保真的只有开场和5G模块。 最开始画的开场动画稿如下图：

[/fusion_text][fusion_imageframe image_id=”4625|full” max_width=”” style_type=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]http://149.129.73.19/wp-content/uploads/2020/02/animation-start.jpg[/fusion_imageframe][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””] 如果实现出来的话，效果如下：

[/fusion_text][fusion_video video=”http://149.129.73.19/wp-content/uploads/2020/02/OS-Demo.mp4″ video_webm=”” width=”” controls=”” preload=”” loop=”yes” autoplay=”no” mute=”yes” preview_image=”” overlay_color=”” box_shadow=”no” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” css_id=”” /][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]   最后，我们实现的效果如下，报5G部分。

[/fusion_text][fusion_video video=”http://149.129.73.19/wp-content/uploads/2020/02/OS-0213.mp4″ video_webm=”” width=”” controls=”” preload=”” loop=”yes” autoplay=”no” mute=”yes” preview_image=”” overlay_color=”” box_shadow=”no” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” css_id=”” /][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””] 以上，就是我们整个这次改进方案的设计过程。 最终Demo会导出为APP格式给前端用于开发查看，整个效果还是以文件流为核心的页面效果。

[/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_6″ layout=”1_6″ spacing=”0″ center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”true” element_content=”” first=”false”][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container][fusion_builder_container admin_label=”QR” hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”3%” padding_right=”” padding_bottom=”” padding_left=”” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ admin_toggled=”yes”][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ spacing=”” center_content=”yes” link=”” target=”_self” min_height=”none” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” hover_type=”none” border_size=”4″ border_color=”#181818″ border_style=”solid” border_position=”all” border_radius_top_left=”” border_radius_top_right=”” border_radius_bottom_right=”” border_radius_bottom_left=”” box_shadow=”no” box_shadow_vertical=”” box_shadow_horizontal=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”30px” padding_right=”12%” padding_bottom=”30px” padding_left=”12%” margin_top=”” margin_bottom=”” background_type=”image” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center” linear_angle=”180″ background_color=”#ffffff” background_image=”” background_position=”left top” background_repeat=”no-repeat” background_blend_mode=”none” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_type=”regular” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ last=”true” first=”true”][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”center” size=”4″ font_size=”” animated_font_size=”” line_height=”” letter_spacing=”” margin_top=”” margin_bottom=”” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=””] 勾搭我们 [/fusion_title][fusion_imageframe image_id=”4538|medium” max_width=”” style_type=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”center” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]http://149.129.73.19/wp-content/uploads/2019/03/QRcode-Mobile.jpg[/fusion_imageframe][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]