# User visual design **Repository Path**: lujizhi/User-visual-design ## Basic Information - **Project Name**: User visual design - **Description**: 用尼尔森十大原则对“小绒宠物”app 进行分析 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-04-05 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # User visual design #### 介绍 用尼尔森十大原则对“小绒宠物”app 进行分析（简单分析） 序号 | 尼尔森十大原则 | 解释说明 -|-|- 1 | 系统可视化 | 淘宝货单物流 | 2 | 不脱离现实 | 使用用户熟悉的 | 3 | 用户有自由的控制权 | 引导用户控制 | 4 | 一致性 | 主色调等 | 5 | 用帮助性语言帮助用户 | 输入几位验证码 | 6 | 预防用户出错 | 输入正确登录账号 登录按钮亮 | 7 | 帮助用户识别，而非回忆 | 信息区别度高 | 8 | 灵活性和使用效率 | 可更改等操作 | 9 | 美观和极简设计 | 视觉设计 | 10 | 帮助，说明文档 | 关于产品的说明 | ## 对于“小绒宠物”APP的分析 :100: **用帮助性语言**帮助用户进行登录/注册，如“请输入手机号”“请输入验证码”等提示语，在点击“获取验证码”按钮时，按钮呈现灰色并提示“验证码已成功发送”和“60秒后重新获取”等提示语；而且对于新用户来说，登录下面的按钮有“未注册的手机号验证后将自动创建帐户”的提醒。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0405/153715_d587ccac_2237359.jpeg "6.jpg") :100: 在“服务模块”，**用户有自由的控制权**，自由地添加“爱宠”和“爱宠食物”以及添加“更多的爱宠食物”，有明显的按钮和提示语来**引导**用户进行操作和控制；同时，在“省钱”购物模块的导航中，提示用户如何“搜商品，领取优惠券，拿返现”，指导用户进行优惠购买商品。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0405/154506_48ed6986_2237359.png "6.png") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0405/154728_73a34b2f_2237359.jpeg "6.jpg") :100: 在“社区”模块中的“看一看”专栏中，用“瀑布流”的方式呈现相关帖子，以**极简的设计**让用户获得更多的信息，同时，让用户快速选择出自己感兴趣的帖子进行点击观看，方便筛选。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0405/155104_16d8d08f_2237359.jpeg "6.jpg") :100: 在“我”的模块中的“关于小绒”的专栏中，有着“小绒宠物”APP的**帮助和说明文档**，详细介绍了“小绒宠物”APP的相关信息，比如关于app的简介、愿景、使命、核心价值观以及经营理念，让用户快速了解APP的用处和功能等，更好地进行体验app。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0405/155605_e5eeb72e_2237359.jpeg "6.jpg") :100: 每个导航栏模块中，都以白色色调为主题颜色，让APP具有颜色上的**一致性**，让用户的视觉上有更好的观感。 :100: 在“消息”模块中，和其他社交和互动APP一样，有“赞和收藏”、“新的关注”、“评论”和其他消息模块，与这类APP消息功能相似，也是满足大多的体验用户和符合用户使用逻辑，**没有脱离现实**。 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0405/160021_396b4af3_2237359.jpeg "6.jpg") * * * * * * * * * * * * * * * * * * * * * :o: 以上是对“小绒宠物”APP的评价 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * # 产品界面日记（部分设计界面+功能） ## 在线视频类 ### bilibili ![输入图片说明](https://images.gitee.com/uploads/images/2020/0518/131023_3a74b1b1_2237359.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0518/131039_ec45d284_2237359.png "屏幕截图.png") * [bilibili小程序]登录界面 bilibili小程序登录界面保护用户的隐私。在输入账号时，顶部卡通人物为睁开眼睛；在输入密码时，顶部卡通人物为双手捂住眼睛。市场上大多数app或者网站的登录界面都采用这种方式，对用户隐私进行保护，密码作为重要的个人信息，以这种动态方式提醒用户。 ## MCN网红孵化器 ### 微念 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0506/125120_9411942d_2237359.png "weinian.png") * [微念]动态logo以及透明度导航栏 首页的logo设计独特，类似于印章型，更特别的是logo的动态呈现来凸显logo，缩小至消失到放大至呈现完整；顶部导航以一定透明度的设计，使其适应整个首页页面，同时更快能打开导航内的某一功能 ## 浏览器 ### bing ![输入图片说明](https://images.gitee.com/uploads/images/2020/0518/131435_a7b47558_2237359.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0518/131451_8d49ae5a_2237359.png "屏幕截图.png") * [bing浏览器]搜索框界面亮度显示 以搜索框界面亮度提示用户目前的操作。进入bing搜索界面，背景图片为全亮状态；当点击搜索框进行搜索，亮度中心在搜索框，背景图片渐暗。视觉的不同来表示操作方式的不同，让用户自身清楚目前的操作。 ### baidu ![输入图片说明](https://images.gitee.com/uploads/images/2020/0518/131829_a11f8248_2237359.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0518/131839_861845a3_2237359.png "屏幕截图.png") * [百度搜索]搜索边框颜色显示 以搜索边框颜色的变化提示用户的操作。进入baidu搜索界面，未触发搜索框前，搜索边框呈白色；当触发搜索框时，搜索边框呈蓝色。白色、蓝色的呈现提醒用户是否有无触发搜索功能，避免用户错误操作。 ## 视觉类网站 ### everylastdrop.co.uk ![输入图片说明](https://images.gitee.com/uploads/images/2020/0518/132237_7c9d06b4_2237359.png "屏幕截图.png") ![输入图片说明](https://images.gitee.com/uploads/images/2020/0518/132248_27ad1c70_2237359.png "屏幕截图.png") * [everylastdrop]白天黑夜的状态变化 模式的切换形成状态的改变。当白天时太阳升起，主人翁从睡梦苏醒；当黑夜时月亮升起，主人翁进入梦乡。 ## 设计类 ### ant-design ![输入图片说明](https://images.gitee.com/uploads/images/2020/0518/132615_8cc571e2_2237359.png "屏幕截图.png") ![](https://images.gitee.com/uploads/images/2020/0518/132619_32ea0531_2237359.png "屏幕截图.png") * [ant-design]logo细节变化 ‘表情包’logo。鼠标移动到首页logo，logo中的字母‘i’上面一点，以表情包的形式呈现，且循环变化。