首页

UI设计中圆角与直角该如何使用？

博博

在当今数字化时代，UI设计已成为创造引人入胜的用户体验的关键要素。一个成功的UI设计不仅需要技术知识，还需要对细微之处的深刻理解。本文将探讨两种基础但极为重要的图形元素：圆角和直角。它们如何影响用户的感知和互动，如何在设计中恰到好处地应用它们，以及它们在实际案例中的运用。
一、圆角与直角的特性
在介绍“圆角与直角”前，先给大家分享一个心理效应“bouba/kiki效应。”
这个效应最早由德国心理学家沃尔夫冈·科勒在1929年提出。
“kiki”这个词的尖锐、快速的音调与尖锐的星状图案相呼应
“bouba”这个词的圆润、流畅的声音则与圆润的云状图案相呼应
最早在1929年沃尔夫冈·科勒做了一个实验，该实验展示了两种形式，并询问读者哪种形状被称为“takete”，哪种形状被称为“maluma”。尽管没有明确说明，科勒暗示人们强烈倾向于将锯齿状形状与“takete”配对，将圆形形状与“maluma”配对。
在2001年的另一组实验中拉马钱德兰和 爱德华·哈伯德使用“kiki”和“bouba”这两个词重复了科勒的实验，询问美国大学本科生和印度讲泰米尔语的人，“这些形状中哪个是bouba，哪个是kiki？” 在两组中，95% 到 98% 的人选择弯曲的形状为“bouba”，锯齿状的形状为“kiki”，这表明人类大脑以某种方式一致地将抽象含义附加到形状和声音上。
这个效应主要讲述的是“人脑如何以一致的方式将抽象含义附加到视觉形状和语音上”
那么我们不妨扩展一下，把这这种效应延展到角色上就拿我们最熟悉的“喜羊羊与灰太狼”举例，我们只听名字“羊”和“狼”就可以潜意识的认为“喜羊羊”就相当于“bouba”、“灰太狼”相当于“kiki”，“羊族”一听就是温和的族群，而“狼族”就是较为凶猛的族群。那么我们可以再回顾一下，“可可爱爱的卡通人物”大部分就是以圆形为基础“小黄人、葫芦娃、维尼熊、大头儿子等”，“超级大反派”更多是以“直角”为主“女巫、蛇精、吸血鬼”，这就是“将抽象含义附加到视觉形状和语音上”。
如果听完这些你还是不懂，那么最简单的例子一个堪比吴彦祖的帅哥叫“文轩没有大脑袋”，那当你见到他时一定会去观察这个人到底有没有“大脑袋”
圆角与直角该如何使用？
 
 
那么回归正题，我们将“圆角与直角”代入这种思考方式并将其进行UI思考，就可以大致了解“圆角与直角”大致的特性
圆角
1.定义
  •  
    圆角指的是元素边角被设计为圆滑的形状，而非尖锐的直角。
  •  
    它通常通过设定一个半径来实现，半径越大，角越圆滑。
2.特性
  •  
    视觉友好
    「圆角被认为更温和、更友好，因为它们缺乏尖锐的边缘，给人一种安全和柔和的感觉。」
  •  
    现代感
    「在现代设计中，圆角被广泛使用，它们通常与新颖、时尚的设计理念相关联。」
  •  
    提高注意力聚焦
    「圆角可以引导用户的视线流动，帮助减少视觉干扰，使用户更容易聚焦于界面的关键部分。」
  •  
    适用性
    「在移动应用和网站设计中尤其流行，特别是在按钮、输入框、卡片和其他交互元素中。」
直角
1.定义
  •  
    直角是指元素的边角以90度角的形式呈现。
  •  
    它是最基本的形状之一，在许多传统和经典的设计中常见。
2.特性
  •  
    专业感
    「直角通常给人一种更加正式、专业的印象。」
  •  
    清晰界定
    「直角在视觉上提供了清晰的界定，使元素的边界更加明确，有助于信息的组织和分隔。」
  •  
    传统感「
    在某些情况下，直角与传统、经典的设计风格相联系。」
  •  
    适用性
    「直角在各种应用中都很常见，尤其是在需要传达清晰、直接信息的界面中，如表格、列表和布局结构。」
那么回想一下“bouba/kiki效应”，今后在设计中当我们看到某个产品大量的使用“直角/圆角”我们就可以分辨这个产品的大致风格，同样字体搭配也是相似的效果，通过不同的banner可以大致看出运营活动的大致目的。
圆角与直角该如何使用？
 
 
二、圆角、直角的使用场景
在实际的使用场景中，我们就从最常见的“按钮、卡片”两个场景来举例分析“圆角、直角”的作用。
按钮
我们首先具体聚焦在UI设计中对于“按钮”这一元素的圆角和直角的使用：
圆角按钮
  •  
    用户友好性「圆角按钮通常看起来更加友好和容易接近，它们给用户一种温馔和舒适的感觉，适合于鼓励用户交互的场景。」
  •  
    移动设备适应性「在移动设备上，由于屏幕尺寸较小，圆角按钮更易于触控，尤其是屏幕边缘的按钮。」
  •  
    减少视觉冲击「圆角可以减少视觉上的尖锐感，使界面看起来更加柔和，适合于寻求轻松视觉体验的应用。」
直角按钮
  •  
    专业和正式感「直角按钮给人一种更加正式和专业的感觉，在一些传统的或者保守的设计风格中，直角按钮更为常见，例如一些服装品牌（Yohji Yamamoto、CONFIRMED）、学校（各学校官方网站）等。」
  •  
    内容和功能区分「直角按钮在视觉上更加突出，能够有效地区分不同的功能和内容，尤其是在需要用户做出明确决策的界面上。」
那么这里我们会有一个疑问，那就是“移动设备适应性”，这里我们可能会想到“直角按钮”的面积看起来要比“圆角按钮”的触控面积更大，那为什么“圆角按钮”更易于触控呢？
我们从两个方面来解答
1.触控面积
  •  
    实际上，无论是圆角还是直角，按钮的触控面积通常是由其外接矩形决定的。这意味着，即使按钮的视觉元素有圆角，触控面积实际上仍然包括了这些圆角区域。
  •  
    在实际应用中，操作系统或应用平台通常会为按钮元素提供一个默认的“触控目标大小”，这个大小是为了确保良好的触控体验而设计的，无论按钮的视觉样式如何。
2.视觉感知与触控体验
  •  
    圆角按钮在视觉上看起来更加柔和和亲切，这可能使得用户更倾向于触摸和与之交互。这种心理效应可能会导致用户觉得圆角按钮更“容易”触控，即使实际的触控面积与直角按钮相同。
  •  
    在移动设备上，圆角按钮的另一个优势是它们的形状与设备的圆润边缘相协调，这在视觉上创造了一种和谐感，可能会无形中增加用户的触控舒适度。
圆角与直角该如何使用？
 
 
通过这两方面，我们是不是又能联想到“bouba/kiki效应”，介于“圆角本身的属性”我们会更容易去点击他。
卡片
对于卡片我们还是先对比，在进行详细的分析。
圆角卡片
  •  
    视觉风格「圆角卡片提供了一种柔和、友好的视觉感受。它们的圆润边缘可以减少视觉冲击，创造出更轻松和亲切的外观。」
  •  
    用户体验「圆角的设计通常被认为更加现代和用户友好。它们可以使界面看起来更轻松、更易于接近，这在提高用户的互动意愿方面很有效。」
  •  
    适用场景「圆角卡片通常用于需要提供温馨、轻松体验的应用中，例如社交媒体、娱乐内容展示、个人博客，或者任何强调用户友好和易用性的设计。」
  •  
    功能效果「在功能上，圆角卡片可以帮助区分不同的内容模块，同时保持界面的整体一致性和流畅性。」
直角卡片
  •  
    视觉风格「直角卡片提供了一种清晰、专业的视觉效果。它们的直线和锐角创造了一种结构化和有序的外观。」
  •  
    用户体验「直角设计传达了一种正式和权威的感觉，适合于需要展示专业性和准确性的应用。」
  •  
    适用场景「直角卡片通常用于更正式或专业的环境，如企业网站、在线商务平台、教育平台，或任何需要清晰展示大量信息的界面。」
  •  
    功能效果「直角卡片在功能上有助于清楚地区分和组织内容，特别是在数据密集或信息密集的应用中。」
这里更要值得注意的一点是视觉效果方面的“圆角对于用户的视觉效果要强于直角”，巴罗神经学研究所对角落进行的科学研究发现，“角落的感知显着性随角落的角度呈线性变化。锐角比浅角产生更强的虚幻显着性”，这里角越尖，看起来就越亮。角落越亮，就越难看。
通过上述对比我们可以得到一个结论“圆角比直角更亲和”，那么可以接着推论“圆角卡片更容易使用户接受卡片内信息”这是因为圆角向内指向矩形的中心。这会将焦点放在矩形内的内容上。当两个矩形彼此相邻时，还可以轻松查看哪条边属于哪个矩形。尖角向外，从而减少对矩形内部内容的关注。当两个矩形彼此相邻时，它们还使得很难判断两条边属于哪个矩形。这是因为每个矩形边都是一条直线。圆角矩形的边是独特的，因为线条朝着它所属的矩形弯曲。
圆角与直角该如何使用？
 
 
三、案例分析
那么对于“直角、圆角”的使用我们以“CONFIRMED、汽水音乐”这两个产品来分析看一下这两个产品对于“直角、圆角”的应用。
圆角与直角该如何使用？
 
 
CONFIRMED
CONFIRMED（Adidas旗下网站，这里懂球鞋的朋友我们可以把它理解为Nike的SNKRS）
作为Adidas旗下产品发售平台，CONFIRMED更多的是发售一些潮流类的服饰最近有“Y-3、CLOT、FEAR OF GOD”等一些潮流服饰，这个应用程序旨在为Adidas的高需求和限量产品提供一个更加公平和直接的购买渠道，通常涵盖了品牌与设计师和艺术家的合作款，以及特别版的运动鞋。
那么我们从“产品定位、用户群体、主要功能流程”来分析一下
产品定位
  •  
    独家发售平台「CONFIRMED 专注于提供 Adidas 的独家发售和限量版产品，特别是鞋类和高端服装。它的目标是成为品牌与其最忠实粉丝之间的直接连接点」
  •  
    品牌营销工具「通过这个平台，Adidas 能够加强其品牌形象，特别是在时尚和高端运动装备领域。CONFIRMED 作为一个专门平台，也强化了 Adidas 在潮流和限量产品市场中的地位。」
  •  
    市场分析和消费者洞察「CONFIRMED 还可能被用作市场研究工具，通过分析用户行为和购买模式来更好地理解目标市场。」
用户群体
  •  
    潮流爱好者「对最新潮流和设计保持关注的消费者，他们追求限量版、独家合作系列。」
  •  
    Adidas 忠实粉丝「品牌的忠实支持者，对于品牌的新产品和特别发售保持高度兴趣。」
  •  
    运动鞋收藏家「对于限量版运动鞋有收藏价值的消费者，这些人往往愿意为独特和罕见的设计支付高价。」
主要功能流程
  •  
    产品预览和信息「用户可以在应用程序中浏览即将发售的产品，并获取详细信息，如价格、设计特点、发售日期等。」
  •  
    注册和参与抽签「对于感兴趣的产品，用户需要在特定时间内注册参与抽签。这通常涉及填写个人信息和选择购买尺码等。」
  •  
    抽签结果通知「抽签结束后，用户会收到是否中签的通知。如果中签，用户将有机会购买这些限量产品。」
  •  
    购买和支付「中签用户可以在应用程序内完成购买流程，包括支付和选择配送选项。」
  •  
    社区互动和内容「CONFIRMED 还可能提供与品牌相关的内容，如设计师访谈、品牌故事等，以增强用户参与和品牌忠诚度。」
这里我们先从“CONFIRMED”卡片元素分析（本文只讲述的直角卡片的用途，不过多讲述App功能）
每款产品可以在一个直角卡片中展示，其中包括产品图片、名称和一些基本信息。这里在App的“首页、发售信息、会员权益”这三个模块最为突出，这种布局有助于用户快速浏览和识别不同的产品
圆角与直角该如何使用？
 
 
功能展示
这里“CONFIRMED”不同的卡片可以承载不同的功能，如显示即将发售的产品、已经发售的产品、品牌故事等，帮助用户快速定位他们感兴趣的内容。这里使用通过卡片元素的方式来详细展示产品，会使整个产品的调性保持一致，大卡片的元素传递给观众的浏览体验会更直观的感受产品（这里会发现一个很有趣的细节，貌似好的国外、跨境电商的App都会采用这些大的直角卡片）
接下来我们就讲述关于“CONFIRMED”按钮元素使用的分析：
突出的功能
直角按钮通常用于突出最重要的操作，例如“购买”、“注册抽签”或“查看详情”。这些按钮因其鲜明的边界和直接的设计而容易被用户注意到。
圆角与直角该如何使用？
 
 
风格统一
使用直角按钮可以与应用中其他直角设计元素（如卡片）保持视觉一致性，为用户提供一致且简洁的视觉体验。
视觉引导
这些按钮通常配有“CONFIRMED”的颜色（蓝色），用于引导用户的注意力，帮助他们快速识别应用程序中的不同功能。
这里我们可以看到“直角卡片"“直角按钮”在 CONFIRMED 应用中的应用可能主要体现在其用户界面的设计上，通过清晰、有序的布局和直观的用户交互，提升用户的体验。
汽水音乐
提到“汽水音乐”大家都不陌生，前段是时间各大“rapper、流行歌手”发歌都在汽水，这个App是可以和抖音联动的，所以播放音乐的模式没有采用大家常见的“点歌、切歌”操作，而是换成随机曲子和“抖音”向下滑动切换一样，这样既新颖又能容易使用户养成操作习惯，不至于一下子新的交互方式无法适应。那么我们同样从“产品定位、用户群体、主要功能来分析”
产品定位
  •  
    汽水音乐是一款音乐流媒体应用，旨在与主要竞争对手如腾讯音乐和网易云音乐抗衡。
  •  
    它不仅是一款单纯的音乐播放软件，还与抖音紧密结合，使得用户可以在两个平台之间无缝切换音乐播放列表，显现出对社交媒体和音乐流的综合运用。
用户群体
  •  
    汽水音乐的主要用户群体是中国市场上的年轻用户，尤其是那些已经使用抖音并寻求更丰富音乐体验的用户。
  •  
    考虑到字节跳动在短视频领域的强大影响力，汽水音乐会吸引那些对新兴、流行音乐以及个性化推荐感兴趣的年轻群体。
主要功能流程
  •  
    个性推荐「这里“汽水音乐”通过算法推荐“个性电台”、“歌单推荐”、“3个榜单”」
  •  
    与社交媒体的整合「能够与用户的抖音账号同步，提供跨平台的音乐体验。用户可以在抖音中发现音乐，并在汽水音乐中继续播放，反之亦然。」
  •  
    播放「汽水音乐的播放方式与抖音同步营造区分于其他音乐App不同的交互体验」
那么我们从卡片开始分析，卡片主要应用在“歌曲、专辑”、“播放列表”、“歌单推荐”、“音乐盲盒”
那么他们起到的作用分别是
  •  
    提高用户体验
    「圆角卡片的设计通常比直角设计更柔和、更易于接受。这种设计能够减少视觉疲劳，使应用界面看起来更加友好和现代化。」
  •  
    增强视觉吸引力
    「圆角卡片因其流线型的外观，在视觉上更加吸引用户。这有助于提升用户对应用的整体印象和兴趣。」
  •  
    组织信息
    「圆角卡片可以有效地将信息分组，如将不同的歌曲、专辑、播放列表等内容区分开来，使得用户浏览和选择时更加直观和方便。」
  •  
    提升操作便捷性
    「在触摸屏上，圆角卡片可以提供更好的触摸目标，使得用户在进行选择和导航时更加方便。」
  •  
    增强内容的层次感
    「圆角卡片可以通过阴影、边框或颜色的变化，为界面添加层次感，使得内容更加突出和易于阅读。」
  •  
    提升品牌形象
    「现代的界面设计往往倾向于使用圆角元素，使用这种设计可以使应用看起来更加时尚，从而提升品牌形象。」
圆角卡片在提升用户体验、美化界面、优化信息展示和操作便利性等方面发挥着重要作用。这些设计元素有助于提高应用的整体吸引力和用户的使用满意度。
圆角与直角该如何使用？
 
 
“圆角按钮”对于“汽水音乐”的作用有
  •  
    视觉焦点「圆角按钮可以作为视觉焦点，吸引用户的注意力，特别是对于重要的功能，如播放按钮或搜索按钮。」
  •  
    界面美观性「圆角按钮增加了界面的美观性，与整体设计风格协调一致，提升了应用的整体视觉效果。」
  •  
    一致性和标准化「在应用中使用标准化的圆角按钮可以提高界面的一致性，使用户更容易理解和使用不同的功能。」
其实通过对比，我们会发现“圆角”在社交、音乐等偏娱乐方向采用的更加多，因为这些产品属性需要“产品与用户”、“用户与用户”之间拉近距离，圆角不仅更容易我们的眼睛处理，而且还使信息更容易处理，圆角很有吸引力。那么“直角”就偏向专业领域、正式的场合以及一些小众的产品。

作者：交互设计师张楚
来源：站酷

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司、银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

 

评论(0) 浏览(973)

如何为用户提供正确的键盘输入类型？

博博

Android和iOS系统都设计了针对特定表单字段的指定键盘输入类型。但大多数开发人员未能在他们的代码中指定正确的键盘输入类型。这会导致移动设备上的表单完成效率变慢。本文以Android平台为例。
一、输入类型并不总是“文本”
大多数开发人员错误地将每个表单字段的输入类型设置为“文本”。这存在问题，因为每个表单字段的输入并不总是纯文本。通常都有一些字段要求输入带有数字或字母和数字组合的信息。当用户尝试填写这些字段时，他们应该看到一个数字或字母和数字组合的键盘。
不幸的是，当每个字段的输入类型都设置为“文本”时，它会强制用户使用文本键盘来输入数字或字母和数字组合，输入时举步维艰，不是误点，就是需要频繁切换，输入体验十分糟糕。
因此，请务必为每个表单字段指定输入类型，以便系统能够显示相应的键盘。除了指定输入类型，我们还应指定相关行为，例如输入法是否提供拼写建议、是否将句子的首字母大写，以及是否使用“完成”或“下一项”等操作键替换“回车”。
输入类型、行为、操作键整理如下：
如何为用户提供正确的键盘输入类型？
例一. 邮箱地址字段
表单要求用户提供他们的邮箱地址是很常见的。当我们将输入类型设置为“邮箱地址”时，它会为用户提供一个针对邮箱地址输入的键盘。这个键盘不仅显示字母，还可以显示“@”和“.”，用户可以轻松地输入他们的邮箱地址。
如何为用户提供正确的键盘输入类型？
例二. 姓名字段
英文名是专有名词，英语中专有名词的第一个字母要大写。我们将输入类型设置为“人名”，并且设置单词首字母大写。用户无需对英文字母进行大小写切换。
如何为用户提供正确的键盘输入类型？
二、每个键盘对输入类型的反应可能不同
案例一：登录页面的密码输入
钉钉将密码框输入类型设置为“密码”。假定密码为 z0h0a0n0g。
  1. 百度输入法显示密码键盘，完成密码输入仅需点击 9 次。
  2. 搜狗输入法显示文本键盘，用户需在字母和数字之间切换，完成输入需点击 17 次。也支持长按第一行的字母输入数字。
  3. 微信输入法显示文本键盘，完成密码输入需点击 17 次。不支持长按字母输入数字。
如何为用户提供正确的键盘输入类型？
 
案例二：登录页面的手机号输入
钉钉设置电话号码键盘右下角为“下一项”按钮。
  1. 百度输入法的键盘右下角显示“回车”，用户完成手机号输入后需手动获取密码文本框焦点。
  2. 搜狗输入法的键盘右下角显示“下一项”，用户完成手机号输入点击下一项，密码文本框自动获取焦点。
  3. 微信输入法的键盘右下角显示“下一项”，用户完成手机号输入点击下一项，密码文本框自动获取焦点。
如何为用户提供正确的键盘输入类型？
三、Input Type 助力产品输入体验的提升
通过应用 Input Type 你可以正确的为每个文本字段设置特定的输入类型，以及看到每个输入类型（以及输入类型的组合）如何影响键盘。
我最初开发此应用是为了促进工作中跨部门高效协同，但我希望通过此应用能够赋能给更多的人，提升协同效率的同时更好的提升产品输入体验。你可以在这里免费下载：
https://www.pgyer.com/vT29
Input Type这个工具需要安装在安卓手机上，如果没有安卓手机可以电脑上安装一个网易MuMu安卓模拟器就可以用。
应用截图
 
作者：交互设计师张楚
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(696)

雪球金融社区平台表情图标升级全纪录

博博

在社区平台语境里，表情无疑是很重要的组成部分。一套丰富且定位准确的表情可以帮助用户更清晰地表达自己的感受，增进沟通的准确性，同时增添社交互动的趣味性，拉进用户之间的距离。带有平台特性的表情更能彰显平台自身的独特性。
雪球作为金融社区平台，表情自然也是重要的元素。我们通过数据调研，发现雪球社区互动中表情的渗透率达到18%，表情的使用率比较高。而现有的表情年久失修，存在几个比较明显的问题，首先视觉风格陈旧辨识度低；再有，表情中原本存在一些股票梗的表现力较弱，画风不够有趣。第三，雪球诞生了新IP“呦呦”，非常适合在表情中应用来推广雪球品牌特性。
基于以上背景我们展开了对于表情翻新改版的项目。
 
XDC干货｜雪球表情升级全纪录
 
 
现状&问题
通过对当前状况进行系统梳理，我们发现了一些存在的问题。
 
XDC干货｜雪球表情升级全纪录
1.设计风格陈旧，不易识别表现力弱：
目前线上雪球表情风格老旧，视觉表达不符合当下设计潮流趋势；由于表情是白色在行文中表现力不足且不易被用户识别，因而趣味性表达的作用不够凸显。
XDC干货｜雪球表情升级全纪录
2.缺乏股票基金场景的情绪表达
社区场景中有大量的股票基金的讨论和相关内容的情绪表达，而目前表情体系中缺乏此类表达或表达不够生动。
比如「关灯吃面」和「割肉」，在行文中一眼能识别到视觉主体是表情脸，而“吃面”和“割肉”的语义没有生动的体现出来；还比如「跳水」又太具象和写实，少了表情的趣味性。
XDC干货｜雪球表情升级全纪录
3.没有将雪球的新IP融入表情
雪球诞生了新的IP“呦呦”，表情的体系非常适合融入IP向的内容，将IP表情化也更利于IP的推广和品牌的传播。
XDC干货｜雪球表情升级全纪录
 
 
 
XDC干货｜雪球表情升级全纪录
视觉风格探索
1.雪球用户特征
设计风格需要根据平台用户特征进行确定。开始设计之前，我们先看看雪球用户大概是什么样的。
XDC干货｜雪球表情升级全纪录
雪球的主要用户为男性且集中在30-50岁左右，所以在视觉表现上尽量避免女性化或低龄化的风格。
2.视觉风格探索
风格确定
旧版的表情苍白，虽然细节很多但在行文中难以识别，本次改版重要任务之一是改版新的视觉风格。emoji是最被用户熟知的表情体系，我们决定新版向传统黄脸emoji表情靠拢。大方向定了，但还需要确定视觉感受符合雪球的emoji。最后在两种视觉风格中我们选择了视觉感受偏中性、风格扁平的这个方向，这个风格和雪球用户特征更契合。
XDC干货｜雪球表情升级全纪录
提升辨识度
表情在交流中作为非文字的“语言”，其辨识度至关重要。表情在行文中的尺寸相对较小和单个文字差不多，那么如何保证在文字中依然能一眼读懂表情？
在对表情整体风格的把控下，需要通过对细节的打磨和反复实验，得出更有辨识度的设计方案。保持视觉扁平，尽量使用简洁的几何图形，加强颜色对比度，减少颜色数量，放大表情特征。通过以上手段有效的提升了表情的一致性和在行文中的辨识度。
XDC干货｜雪球表情升级全纪录
 
 
 
XDC干货｜雪球表情升级全纪录
发现股民讨论语境下的“梗”
本次表情升级除了对现有表情进行改造升级，还针对雪球社区特色进行挖掘。
1.挖掘“梗”
前面我们说到雪球用户是集中在30-50岁左右的男性，那么这类人群在社区中有怎样的表达特点呢？
通过观察我们发现，在面对股市的波动和不确定性，雪球用户更喜欢用幽默诙谐的论调来调侃市场以宣泄心中的无奈和负面情绪，同时在波动面前展现出一种坚韧和自嘲的心态。我们可以在这种“戏谑调侃”中挖掘可以视觉化的情绪和表情。以此作为本次表情升级的一个重要方向。
戏谑调侃的表情有哪些呢？我们挖掘了当下网络社交流行的表情包和热词。回想一下我们是否也经常使用类似“地铁老人看手机”“黑人问号脸”等网络热图来表达内心的复杂情绪呢。
XDC干货｜雪球表情升级全纪录
在变幻莫测的股市中，面对现实的无力和不确定，祈福求平静成了股民表达情绪舒缓心情的一种方式，比如“敲木鱼”“祈求大涨”等仪式感的情境以表情的方式呈现，也能一定程度上引起用户的共鸣。
XDC干货｜雪球表情升级全纪录
2.让表情“淋漓尽致”
  • 微表情尽显“内心戏”
一个表情里往往蕴含不只一种情感，短暂而难以察觉的面部变化最能传达个体真实的情感状态，一个眼神、嘴唇微动等细微变化，常常表达出个体内在的真实状态。
在设计“大哭”这个表情时，我们挖掘到大哭背后可能是某种“绝望”，那么观察下人们绝望时最大的面部特点是不是空洞的眼神和僵硬的脸？用这样的微表情和大哭结合在一起，感受大哭情绪的同时也传递了绝望的内心戏。
XDC干货｜雪球表情升级全纪录
  • 赚了、亏了一目了然
股票社区中涨跌是永远的话题，市场的涨跌背后牵动着的是股民们真金白银的账户。“亏大了”和“暴富”这两个表情很生动的表达了用户盈亏的两种处境，但原有表情的视觉表达过于保守和隐晦。要让用户一眼看到就产生共鸣，红绿色是最直观的涨跌信号，我们把这种语义和表情结合，“亏大了”除了表情沮丧还得加点绿色烘托氛围，“暴富”的喜悦中再加上红包加持情绪。
 
XDC干货｜雪球表情升级全纪录
  • 戏剧化表达
在某些极端情绪上我们还尝试打破旧表情的禁锢，用更加生动夸张的方式呈现。比如“绝望”，只靠面部表情似乎无法充分的表达，所以我们营造了简单的环境和肢体动作， 一个瘫在墙角双目无神的小黄脸，绝望的形象跃然纸上。
XDC干货｜雪球表情升级全纪录
3.股票专属“梗”
雪球社区里有一些独特的表情，比如“关灯吃面”，它是雪球老用户传承的经典梗；还有诸如跳水、割肉、抄底、满仓等股票术语梗也颇受欢迎。升级优化这类表情的同时我们小开脑洞在原有基础上增加了“好基友”等新梗，让股民表达更丰富有趣。
XDC干货｜雪球表情升级全纪录
 
XDC干货｜雪球表情升级全纪录
IP表情化
去年雪球诞生了自己的IP“YOYO”，此次表情升级正好可以将IP表情化，在平台应用和传播。
YOYO所代表的品牌语义
1.福禄寿：因其原型是驯鹿，取福禄寿之意，代表财富；
2.温暖陪伴&服务感：驯鹿具备天生的陪伴和服务感，与雪球强调的品牌服务感相契合。
XDC干货｜雪球表情升级全纪录
YOYO品牌语义表情化
根据YOYO的两种品牌语义，我们分别开脑洞。
哪些意向和财富相关呢？我们找到“锦鲤”“招财猫”“金元宝”，这些元素和表情相结合形成财富类表达；那么陪伴和服务感我们使用“抱抱”、“打call”这类温暖鼓励意向的肢体语言来和YOYO结合传达。
XDC干货｜雪球表情升级全纪录
 
 
作者：雪球设计中心XDC
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

 

评论(0) 浏览(660)

从单车上锁聊聊任务链路优化设计的思路与技巧

博博

 一般来说做交互链路优化的核心价值或是目标就那么几个；
一、更好用
即更加高效便捷好用的意思，这短短三个字就直接包含了大家常挂在嘴边的易用性、可用性啥的了，好的交互就应该是尽可能的为用户提供简单好用的交互，举个例子，近期在使用阿里云Flow的流水线，期间我也用过其他家的CI/CD服务，相比之下我觉得阿里云Flow的流水线编排反馈就做的更胜一筹，“更方便”加一分
  
二、更准确
意味着为用户提供正确的服务、流程、功能、组件、信息反馈乃至视觉效果，为的是提升产品的可理解与易用性，从而达到降低学习成本提升效用，减少跳失率或出错等负面情况
从单车上锁聊聊任务链路优化设计的思路与技巧
 
三、提升意愿
嗯！花费那么多心思让产品体验变得更方便更准确就是为了提升用户的使用或付费意愿，算是任务路径优化设计的底层价值吧。
从单车上锁聊聊任务链路优化设计的思路与技巧
 
 
阶段流程与焦点
整体我们可以划分为优化前、优化中、优化后三个阶段，对应到三个阶段中，对应的工作流程基本由问题定位、优化目标、方案构思、方案验证、持续改进构成，然后根据阶段与流程我会把相关的优化焦点与链路优化的关系交代清楚，算是清晰一下链路优化工作整体思路与每个阶段的工作事项。
从单车上锁聊聊任务链路优化设计的思路与技巧
 
 
优化前的焦点
以我们B端SaaS产品的优化设计为例，焦点可以简单的锁定在用户、产品、业务场景三大层面，我们会关注这三个因素中带来的反馈来找到和定位问题，最终解决掉用户痛点或是触成业务目标，具体点可以拆分出以下焦点事项；
目标用户
需要关心产品目标用户的特征，他们是收益的来源也是市场构成的部分，作为产品的经理或业务设计师，肯定是对预期的目标用户有所了解才对，特别是初期型产品；当积攒了一定用户量后，就会开始关注基于数据或定性研究得到的用户画像信息，并通过这些更准确的用户画像来了解目标市场和进行业务设计决策，而不只是对着市面上竞品抄作业罢了。
这过程中你至少要弄明白五个问题；
1、用户的需求是什么？
2、用户使用的场景跟行为大致如何？
3、我们的用户有何偏好或特征？
4、用户通常还会用到哪些竞品？
5、用户有哪些反馈值得注意？
 
服务体系
主要是产品本身的服务体系或业务逻辑相关，前面提到了用户画像或分层的一些概念，
实际上现在的互联网产品中，服务体系或是用户角色都不会很单一，用户角色、权益身份、服务场景等等都有差异，设计前的差异化背景或权重厘清就很重要，至少要清楚当前优化的服务线路是为那些人，他们有哪些差异、有哪些状态情景、有哪些交互要兼容或避错。
从单车上锁聊聊任务链路优化设计的思路与技巧
 
业务场景
我们关注产品、关注用户，同时也关注他们之间发生了什么样的化学反应，所以业务场景必定是本阶段中的一大焦点，通过业务场景可以洞察到更多用户实际遇到或潜在的痛点，以及线上线下等环境带来的微小差异性，至于如何实践了，我们可以通过观察不同类型的用户是如何使用产品，或是与用户对话分析来获取优化指引，哪里用户卡住了或是吐槽了那就表明有优化空间，这应该算是任务链路优化的基础焦点了吧。
实际业务场景中我们常关注的点
1、用户：用户本身有什么特征属性值得我们关注？
2、情景：用户出于什么背景原因或目标在什么时机进入该场景？
2、行为：用户进入场景后要做什么或做了些什么？是否做的顺畅？
3、结果：用户是否达成目标？未达成或达成受阻的原因是什么？
4、反馈：用户吐槽或建议了些什么，我们获取了哪些有效的改善讯息？
 
优化中的焦点
这个阶段中，我们的主要工作可以概括为分析问题、解决问题、验证问题，其中焦点可能会比较多，这里我挑了一些说一下；
需求分析
结合前面阶段中的场景化来还原问题是什么情景下怎么发生的，产生了什么样的负面影响，这很重要，我们需要知道用户的业务诉求是什么，造成出错原因是什么，产生了多大的影响，以及用户期望的是怎样，然后就是如何更好的满足用户诉求，同时保障企业的利益，这就是需求分析要做的事情；
交互媒介
主要是考虑复杂且涉及多方媒介的业务场景，要思考这些媒介或端怎么配合用户完成任务，以什么样的形式进行交互。就例如哈罗单车的，不仅是要经过手机的交互，还有单车的传感器与数据交互等，事实上一套完整的服务正是由这些媒介之间的不断交互，才使得哈罗的租赁服务可以如此灵活，所以在整个服务流程中让媒介之间更智能、自动、高效的完成衔接与交互，就成了必要的焦点了，如果说你认为这是多余或无效的部分，那么很有可能说明你所处在的产品服务构成还不算复杂，但这不能否定掉交互媒介的重要性。
这个过程中，你至少要清楚服务完成要经过哪些端、那些人、哪些条件、哪些信息构成。
从单车上锁聊聊任务链路优化设计的思路与技巧
 
 
信息构成
几乎进行任何服务都离不开特定的构成信息交互；举个最简单的例子，晚上你来到街边摊，想要一份烤冷面，那么你除了要掏钱以外，你还要跟老板确认口味、加料、价格这些信息，这些就是构成任务进程的信息，这些信息可以通过问答式确认，也可以提供招牌信息给食客确认
从单车上锁聊聊任务链路优化设计的思路与技巧
总之将这些信息更简练准确的进行交互或传达，就能实现任务链路的优化，事实上应用程序本身就是由各种各样的信息交织在一起所构成，所以“做任务链路优化不仅是减少操作步骤而已”。
 
业务模型
可以简单易懂的帮助我们理解和消化业务，以及更好协同，面对复杂的任务流程，可以更好的表达或梳理业务概念与全局结构，在做复杂的任务优化时，就不容易被局部问题牵着鼻子走，而忽略其他影响面，说的直白点，就是这个业务的整体过程你脑子里要有个概念，制作方法其实就是将各个业务或任务拆解成多个单元的形式，并将单元之间的包含或层级关系表达出来
从单车上锁聊聊任务链路优化设计的思路与技巧
 
 
研发能力
需要考虑技术实现的周期与成本，即开发是否可以实现，需要研发多久，要投入多少成本，我相信产品经理都会关心这个问题，其实就是投资回报率与可行性的问题，产品生产研发的本质是赚钱不是亏钱，不是吗？
例如说你看见了一个很酷炫的交互效果，也准备应用到自家的产品中，但实际开发的难度大不大，要投入多少时间精力，这个酷炫的交互又能带了多少产品收益？所以研发实现能力在方案设计的过程中还是要考虑的。
 
测试反馈
方案落地前，进行一定的内部测试或评审是很有必要的，介于还没有完成开发上线，可以在优化方案出来后通过Demo的方式找人进行测试反馈，一般自测走查只是第一环，有不确定的一定要拉上其他人一起研讨评审一番，如果要找人测试的话，其实只要设定好合适的任务与目标，还原出真实用户碰到问题的任务过程即可，接着就是观察测试者是如何使用Demo的，你的新方案是否奏效我想你知道怎么去衡量，就不赘述了。
 
优化后的焦点
优化后阶段我们主要关注是否优化了个寂寞，是不是又优化出了新问题，优化后还有哪些收尾工作，关联的需求池与迭代规划怎么安排。
数据采集准备
当一个方案被投入到生产环境中，我们却无法得知是否比旧的方案更好，这种情况是很糟糕的，故我们在新的方案推出的同时，一定要保障有办法收集到有效的用户反馈，这个过程我们可以是采用AB测试、数据埋点监测、灰度采样、用户使用性测试等，这都是我们实际工作中采用的有效手段。
效果对比
始于数据采集，采集后自然是与原始版本的效果进行比对，确认新的版本是有效可靠的，能被用户认可采纳的，同时也能发现新的问题反馈，这需要进一步的跟进与规划，这是个重点环节。
需求规划
原始问题是否圆满结束，是否有新的问题待解决，是否需要分批开发上线或验证，调整后其他部分是否需要配合改造，这一系列问题将迫使我们持续改进，并将流程再一次的接轨到优化前阶段。
 
AI告诉我的焦点˜
从单车上锁聊聊任务链路优化设计的思路与技巧
 
 

作者：泡泡_PAO
来源：站酷

 

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计

软件qt开发、软件wpf开发、软件vue开发

 

评论(0) 浏览(700)

向用户请求权限的正确方式

博博

 

权限的目的是保护用户隐私，那么在何时以及用什么方式请求用户权限会是比较合适的？本文将详细介绍Android的运行时权限模型，并展示设计一个UX来请求你的应用程序所需的权限，希望对你有所启发。
从Android 6.0开始，没有在安装时请求所有权限，而是引入了运行时权限模型，开发者可以控制应用何时以及如何请求权限。这如同你想邀某人出去约会，过早、过频繁或以错误的方式对你来说并不好。
本文我将详细介绍Android的运行时权限模型，并向你展示如何设计一个UX来请求你的应用程序所需的权限。权限的目的是保护用户的隐私，但当你请求权限时，你是在要求用户放弃一点隐私，因此，你需要提供明确且平等的利益以换取访问。运行时权限允许你在用户更了解你请求权限的原因和授予权限的好处时选择合适的时间请求权限。Android实现它们的方式使得以正确的方式请求它们变得十分重要。
运行时权限模型有利于保护用户的隐私，当你的应用程序请求权限时，Android会显示一个对话框让用户接受或拒绝它，第一次请求权限时对话框不会显示“不再询问”复选框，只会在用户至少一次拒绝权限请求后显示它，你可以检查之前是否被拒绝过，并明智的决定在何时提供更多教育。
向用户请求权限的正确方式
从Android 11开始，如果用户在使用应用的过程中多次拒绝某项特定的权限，那么在你的应用再次请求该权限时，用户将不会看到系统权限对话框。该操作表示用户希望“不再询问”。
你无需过度防御，例如在实际请求权限之前你始终通过预许可（预授权）来衡量用户授予权限的可能性，本质上是请求两次，这种双重提示可能是不必要且烦人的，你可以通过在正确的时间以正确的方式询问来达到同样的效果。
Material Design分解了在两个维度上请求权限的不同方法。首先权限对你的应用程序的运行有多重要？其次，你请求它的原因有多清晰？根据这两个因素，建议你采用不同的方法来请求权限。
向用户请求权限的正确方式
预先请求权限（Ask up-front）
如果某项权限对应用程序运行至关重要，并且显而易见为什么需要请求它。例如日历应用，拒绝日历权限会使应用程序无法运行，并且用户显然知道日历应用的用途以及请求日历权限的原因，因此
不需要用任何不必要的解释来打扰用户，只需在用户首次启动应用时立即请求它即可。
向用户请求权限的正确方式
预先教育（Educate up-front）
如果某项权限对应用至关重要，但请求它的原因不是很清晰。例如信贷应用，为了准确评估用户的信贷资格、偿还能力和防范反欺诈，通讯录权限、通话记录权限、位置权限对于风控而言非常重要，建议请求权限之前对用户进行教育。
向用户请求权限的正确方式
使用场景中请求权限（Ask in context）
如果应用中的某项次要功能需要权限，但请求它的原因很清晰，建议你在使用场景中请求权限。例如笔记应用允许用户使用语音或音频创建笔记，那么很明显为什么此功能需要麦克风权限，无需过早的请求它，以免用户负担过重，最好等到用户尝试使用该功能时，因为用户更有可能允许符合其预期的权限请求。
向用户请求权限的正确方式
结合使用场景进行教育（Educate in context）
如果应用中的某项次要功能需要权限，并且请求他的原因不是很清晰，建议你结合使用场景进行教育。例如笔记应用允许用户与朋友协作，那么请求联系人权限可能是合理的，但它不是显而易见的，当用户调用该功能时，解释应用获得联系人权限后可为用户提供哪些好处，比如自动填充邮件地址，然后才请求联系人权限让用户授予它。
向用户请求权限的正确方式
处理权限请求遭拒情况
通过使用正确的方法，用户应该清楚应用请求权限的原因以及应用获得权限后可以为他们提供哪些好处。然而，这并不意味着用户一定会授予权限。如果用户拒绝了权限请求，建议采用以下做法：
  • 在应用界面中突出显示因为没有获得特定权限而受限的功能所在的具体部分，例如在原本用于显示该功能的结果或数据的位置显示一条消息，让用户知道因缺少权限而无法使用该功能，帮助用户在权限和功能之间建立心理联系。
  • 不要阻止界面显示，不要全屏警告消息，让用户根本无法继续使用应用。即使在权限请求拒后，应用也应尽可能提供最佳的用户体验。例如即使麦克风使用权限请求遭拒，仍应全面提高文本功能的易用性。
  • 用户可能已经选中了“不再询问“复选框，应用可能会在用户未看到权限请求对话框的情况下受到拒绝，此时应用应该提供一个链接，链接到设备设置中用户可以打开权限的具体位置。
尽量减少权限请求
在应用中声明权限之前，请先考虑是否需要这样做，或者是否有替代方法可以在应用中支持该功能。因为如果应用声明权限，那么每当用户使用需要运行时权限的功能时，应用便不得不中断用户的操作，请求相应权限。然后，用户必须做出决定。如果用户不能理解您的应用为何请求特定权限，可能就会拒绝授予该权限，甚至卸载应用。
下面介绍几个可以在不声明任何权限的情况下实现的用例：
拍摄照片/录制视频
Android为应用提供了相互通信的功能，让你可以将任务委托给其他应用。例如，如果你希望允许用拍照，但它不是应用的核心部分，可以考虑使用Intent请求相机应用拍摄照片并将其分享给你的应用，这样就不需要CAMERA权限。
自动输入动态短信验证码
双因素身份验证流程中，动态短信验证码作为第二校验因素时，使用SMS Retriever API（短信检索器）可以让应用自动执行用户身份验证，不需要用户手动输入验证码，不需要READ_SMS权限。  
 
作者：交互设计师张楚
来源：站酷
 

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计

软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(732)

如何提高设计还原质量和验收效率？

博博

最近我们做了一次全新改版的项目。作为此次项目的设计师，从项目的前期分析、设计、交付开发、验收上线，整个流程，在项目走查验收阶段我们设计师投入了30人/天！占了设计师整体投入的50%！在我们觉得应该设计投入最少的阶段，却占了我们大量的工作 且最后还原度也远不达预期。
在这个项目中我遇到了哪些问题：
通用组件更改困难
验收过程反复、低效
技术设计没有达成共识，技术对交互体验层面和视觉层面的问题敏感度很低
还原问题反馈不及时，有些问题项目后期验收的时候才暴露
前期对还原度工作评估不准确，导致后期发现问题 来不及修改
还原问题不单单是设计师把设计稿做的多精准，标注的多仔细，这么简单就能解决的。是设计和开发，团队之间的合作共识问题。我把整个和开发对接工作分为前中后三个阶段，在这里从头来梳理一下，聊一聊设计师和开发如何高效对接，也是对自己的一次复盘总结。
如何提高设计还原质量和验收效率？
一、评审/排期
1.1、设计师对还原的要求宣讲
在评审环节，设计师本人一定要将自己的设计稿进行宣讲、帮助开发理解。注意给技术讲述一些适配要求、设计规范、交互状态及动效等，同时解答技术同学的一些疑问，这样就能将一些可预见的问题解决掉，解决后期的沟通成本。
有一些地方有多种实现方式，如果前期没有跟开发沟通清楚，就会导致最终实现的效果存在误差，比如：下方这个tab项，单给一张图，开发根本不知道设计师想要的实现方式是什么，固定间距还是固定菜单宽度，还是每项平分宽度，最后很大可能就会按照自己的理解去做了，导致出现重复返工的现象
如何提高设计还原质量和验收效率？
再比如一些点击热区，如果不手动标明，有可能就做的很小
下图是我们手动标注的热区
如何提高设计还原质量和验收效率？
1.2、实际开发者要参与评审
每个开发负责的具体页面模块不一样，别人对具体了解程度也不会不一致，所以在评审会议上，一定要具体开发者在场，如果对应开发没有发表意见，设计师可询问，确保他已经理解需求。
1.3、开发充分评估还原工作问题
设计师在讲解自己的要求后，开发也要及时反馈是否有还原困难，如：是否有技术限制？是否有组件改动困难（牵一发而动全身）？实现成本过高（投入产出的性价比不够）？等意见和原因，设计师也可抛出之前是否遇到过类似的阻碍，帮助开发去了解。
1.4、认真记会议纪要
评审过程的问题和重要讲解点，一定要记录下来，会议中开发提出的一些问题及解决方案、或者没有达成共识的地方，记录下来等领导决策，在会议结束后以邮件形式、或wiki文档发送前端们，抄送产品，确保会议内容的传达到位。后面也好跟踪。
还有一点就是，我们之前遇到的情况，在宣讲会上 讲解的一些要求，开发在做的时候可能就忘记了，让开发改他认为设计没有明确要求、会有点难推动，就会搞得双方都有抱怨。有会议记录也可避免此类情况发生
二、开发阶段
2.1、还原有问题及时反馈
在前面我们做了详尽的沟通和评审，但有时也避免不了在开发过程有些问题才发现暴露。这个就需要开发同学能重视还原问题，积极沟通反馈，和设计确认商议 是否有其它可替代方案，切勿自己发挥，等到后期验收的时候才说出问题可能会影响进度。
​2.2、开发完成后对齐设计稿自查
开发者在完成自己负责的模块界面时，可自己对齐设计稿自查一遍，参考【3.1验收标准】的表格，可帮助判断问题，在此阶段也可发给设计者确认效果。
三、验收阶段
如何提高设计还原质量和验收效率？
3.1、测试同学确保交互和视觉还原度至少在70%左右
这里可以提前在项目排期阶段，设计师将所需的验收工时同步给技术和测试，将验收时间考虑进去
为什么要求测试同学保证还原度至少在70%呢？
因为如果不要求测试走查还原度，设计验收的时候就会有大量的问题，最后变成设计在测试界面而不是验收。设计师不像测试对整个流程的测试配置那么熟悉方便，反复验收需要测试和设计不断配合，双方的工作量都会加大。
理想的状态应该是测试整个流程走通，视觉和交互还原问题也要着重测试，设计和产品在测试没什么大问题后再进行验收。
参考【验收标准】的表格，可帮助判断还原问题
如何提高设计还原质量和验收效率？
3.2、明确知道模块的开发者
最好是提前知道模块的开发者，这样验收的时候一对一进行模块的打版验收效率更高
3.3、设计走查问题标注优先级
技术对功能上的BUG，可以自己很好的判断哪些是严重的紧急的，但对于视觉和交互层面的感知就比较低。在提问题单的时候，我们可以帮他标注出优先级，告知开发哪些是比较严重的需要优先修改的，不然 开发自己很难判断，可能就会挑一些比较好改的先改了，重要的问题反而被搁置了。尤其在项目时间比较紧张的时候，有优先级标注 开发能够看出哪些是可以为项目进度做出妥协的，哪些是必须要修改的。
如何提高设计还原质量和验收效率？
3.4、BUG单
设计提BUG单的不能简单的说这里出错了，请参考设计标注重新调整。要直接给出正确的尺寸、增多少、减多少、这样可帮助技术提高更高效率，也能避免开发自己去看又出现误差、又要返工修改。
如何提高设计还原质量和验收效率？
3.5、遗留问题有记录
如何提高设计还原质量和验收效率？
四、结语
设计师在验收过程中容易遇到的一个比较头疼的问题就是，技术和产品小伙伴可能因为项目上线时间紧，觉得视觉还原和页面交互体验上的问题不重要不给予修改，优先保障功能上线。
除了这些原因，设计侧也在检讨总结，自己有哪些做的不足的地方，所以 以上文档也是对接下来工作的优化方案。设计还原度也是日常考核之一，需要大家重视，好的产品要严格把控精心打磨，希望这次的总结、相关流程和经验，在接下来工作中能够提升设计验收效率和还原度。

作者：考思考
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(806)

如何为用户提供正确的键盘输入类型？

博博

Android和iOS系统都设计了针对特定表单字段的指定键盘输入类型。但大多数开发人员未能在他们的代码中指定正确的键盘输入类型。这会导致移动设备上的表单完成效率变慢。本文以Android平台为例。
一、输入类型并不总是“文本”
大多数开发人员错误地将每个表单字段的输入类型设置为“文本”。这存在问题，因为每个表单字段的输入并不总是纯文本。通常都有一些字段要求输入带有数字或字母和数字组合的信息。当用户尝试填写这些字段时，他们应该看到一个数字或字母和数字组合的键盘。
不幸的是，当每个字段的输入类型都设置为“文本”时，它会强制用户使用文本键盘来输入数字或字母和数字组合，输入时举步维艰，不是误点，就是需要频繁切换，输入体验十分糟糕。
因此，请务必为每个表单字段指定输入类型，以便系统能够显示相应的键盘。除了指定输入类型，我们还应指定相关行为，例如输入法是否提供拼写建议、是否将句子的首字母大写，以及是否使用“完成”或“下一项”等操作键替换“回车”。
输入类型、行为、操作键整理如下：
如何为用户提供正确的键盘输入类型？
例一. 邮箱地址字段
表单要求用户提供他们的邮箱地址是很常见的。当我们将输入类型设置为“邮箱地址”时，它会为用户提供一个针对邮箱地址输入的键盘。这个键盘不仅显示字母，还可以显示“@”和“.”，用户可以轻松地输入他们的邮箱地址。
如何为用户提供正确的键盘输入类型？
例二. 姓名字段
英文名是专有名词，英语中专有名词的第一个字母要大写。我们将输入类型设置为“人名”，并且设置单词首字母大写。用户无需对英文字母进行大小写切换。
如何为用户提供正确的键盘输入类型？
二、每个键盘对输入类型的反应可能不同
案例一：登录页面的密码输入
钉钉将密码框输入类型设置为“密码”。假定密码为 z0h0a0n0g。
  1. 百度输入法显示密码键盘，完成密码输入仅需点击 9 次。
  2. 搜狗输入法显示文本键盘，用户需在字母和数字之间切换，完成输入需点击 17 次。也支持长按第一行的字母输入数字。
  3. 微信输入法显示文本键盘，完成密码输入需点击 17 次。不支持长按字母输入数字。
如何为用户提供正确的键盘输入类型？
案例二：登录页面的手机号输入
钉钉设置电话号码键盘右下角为“下一项”按钮。
  1. 百度输入法的键盘右下角显示“回车”，用户完成手机号输入后需手动获取密码文本框焦点。
  2. 搜狗输入法的键盘右下角显示“下一项”，用户完成手机号输入点击下一项，密码文本框自动获取焦点。
  3. 微信输入法的键盘右下角显示“下一项”，用户完成手机号输入点击下一项，密码文本框自动获取焦点。
如何为用户提供正确的键盘输入类型？
三、Input Type 助力产品输入体验的提升
通过应用 Input Type 你可以正确的为每个文本字段设置特定的输入类型，以及看到每个输入类型（以及输入类型的组合）如何影响键盘。
Input Type这个工具需要安装在安卓手机上，如果没有安卓手机可以电脑上安装一个网易MuMu安卓模拟器就可以用。
应用截图
应用截图

作者：交互设计师张楚
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计

软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(788)

B端产品 | 如何快速建立业务&产品认知

博博

先说结论：是很好的“答疑期”，但帮助有限，学会问问题，同时接纳自己暂时不懂的情况。
 
在入职后，一般会有业务方向、研发背景、设计思路、产品使用流程等方面的培训讲解。但即便同事讲的不错，对于刚入职的我们来说，也很难短时间内消化掌握，并直接应用到设计工作中。
 
在这个时期，有三点建议：
  1. 找关键词
  2. 虚心请教
  3. 提出问题并给出方案
 
评论(0) 浏览(651)

B端基础 | 全套WEB表单设计基础

博博

第一部分 | WEB表单设计
在B的设计中、表单是我们最为常见的设计内容。下面我们来学习如何做好表单设计这部分内容。
1、什么是表单
我理解表单就是系统为和用户进行交互、所要收集用户信息的或获得用户反馈的一种方式的载体。在后台产品中对我们数据做的增、删、改、查、验都可以通过表单完成。
B端基础 | 全套WEB表单设计基础
 
 
表单是一种用于收集用户输入的HTML元素，通常用于创建用户与网页交互的表单。表单可以包含各种输入字段，如文本框、复选框、单选按钮、下拉列表和提交按钮等。当用户填写表单并提交后，数据将被发送到服务器进行处理。在web开发中，表单是实现用户交互和数据收集的重要手段之一。
 
1.1、常见应用场景
在我们的后台系统中、我们表单在70%的场景上都会使用到。采集录入数据信息、编辑数据信息等。如我们SaaS管理平台的学员录入、档案查询、奖励规则设置等。
B端基础 | 全套WEB表单设计基础
 
 
2、表单设计原则
设计原则是任何一种解决方案的指路灯。我们在表单的设计中需要遵循以下原则、
简洁明了、清晰高效、适应业务、及时反馈。
B端基础 | 全套WEB表单设计基础
 
 
2.1、简洁明了
表单的设计应该简洁明了，避免过多的装饰和元素干扰用户填写表单。
 
2.2、清晰高效
表单中的各个字段和选项应该清晰可见。用户应该能够快速找到需要填写的字段和选项，并且填写过程中不会遇到过多的困难。
 
2.3、适应业务
应该符合我们的业务应用场景、满足我们的业务需求。
 
2.4、及时反馈
在用户填写表单的过程中，应该提供适当的反馈，例如输入验证、错误提示等，以便用户能够及时了解自己的输入是否正确。
 
3、表单构成
我们通常的表单都基本都是由、标签、域、提示、操作按钮这四个部分构成的。
B端基础 | 全套WEB表单设计基础
 
 
3.1、标签
标签文本主要是解释输入项的含义，一般不宜太长，需要简明扼要，快速让用户理解。输入框标签在布局上可以分为
左标签、顶标签、行内标签
。这三种设计在许多情况下可以提高可读性和用户友好性，但也有一些潜在的缺点。
B端基础 | 全套WEB表单设计基础
 
 
3.1.1、左标签
优点：可读性强、减少用户的认知负担。布局直观、提高填写速度。
缺点：不适合长标签、对业务场景适用性差。
 
3.1.2、顶标签
优点：节省空间、减少表单的长度和宽度。视觉层次清晰。
缺点：需要额外的间距、纵向空间利用率不高
 
3.1.3、行内标签
优点：节省空间、简洁易于阅读
缺点：可读性有限、对于长标签或复杂内容可读性降低、不适合大部分的场景。
 
3.2、域
表单的域表示的是一个空间。这个空间里可以是输入内容、选择内容、选则时间、选择数值、触发交互按钮（上传资料）等
B端基础 | 全套WEB表单设计基础
 
 
3.3、提示
避免废话、给出结果以及处理方式。
B端基础 | 全套WEB表单设计基础
 
 
3.4、按钮
一般出现在页面顶部、跟随表单里的内容、表单内容底部、页面底部。
在我们系统设计里。我是更愿意把按钮放在页面的底部。至于为什么可以看一下、我之前的《按钮的基础设计知识的文章》
 
4、设计细节
除了上面表单的基础知识外，为了我们表单设计的更好我们就需要在细节上下功夫了。毕竟优秀的设计师注重细节的表现的。
B端基础 | 全套WEB表单设计基础
 
 
4.1、表单里标签后的冒号要不要加
最初是因为屏幕显示的原因所以才加的冒号、随着技术的进步。现在可加可不加。系统内统一就行。
B端基础 | 全套WEB表单设计基础
 
 
4.2、如何设定输入框的宽度
输入框的宽度是自适应的、输入框的宽度是有暗示左右的。在真实场景中，大部分输入框是存在理想长度的，那么就应该向用户暗示所需输入内容的长度来减轻判断负担。下图就是典型案例，一个实际不需要花多少钱的金额输入框在左图中进行等宽处理，反而容易误导用户对输入金额的判断，造成一种不安全感。
B端基础 | 全套WEB表单设计基础
 
 
4.3、表单布局
在表单中我们采用多种布局方式。
信息分组、内容列表、标签页、分步骤。
在信息传递上。这集中布局方式本质都是一样的。将信息进行分类展示。来更好效的进行信息的传递和展示。理论支持、格式塔原理
B端基础 | 全套WEB表单设计基础
 
 
我们如何选则适用那种布局方式呢。很简单需要展示内容的多少。
 
B端基础 | 全套WEB表单设计基础
 
 
第二部分 | 表单交互
为了让我们表单的用户体验做到极致、我们还有注意这些交互上的细节。做好这些细节将大幅提升我们的用户体检。
B端基础 | 全套WEB表单设计基础
 
 
1、错误提示
验证用户输入活提交信息是否正确、验证方法有三种、实时、提交后、服务器。因为他们时效性不同所以应用的场景也不同。
B端基础 | 全套WEB表单设计基础
 
 
错误提示要适用积极地的语言、不清楚的告诉用户存在哪里、要如何修复。
 
2、更智慧、高效
之前好像看过一个什么定律忘了。他的大致意思是，如果系统能处理的问题尽量让系统去处理、不用留给用户去操作。
B端基础 | 全套WEB表单设计基础
 
 
2.1、简化输入智能默认
如果可以带出来的信息可以尽力带过来。
B端基础 | 全套WEB表单设计基础
 
 
满足多数人需要的地方放置选择，来帮助用户作出明智选择。互联网表单中有很多地方能利用智能默认减少必要的选择次数，加速表单完成过程。
 
2.2、个性化默认
保留用户登陆信息、重复填写内容。例如、之前去医院需要手机登陆的那段时间。在去过一次后。扫完填写信息制药填一个名字、其他信息都带出来了。
B端基础 | 全套WEB表单设计基础
 
 
2.3、及时新增
我们在满足大部分用户的同时、在某些场景里还要提高额外的输入框给需要的人用。同时不会阻碍不需要的人。这类输入框常常被作为高级选项或者额外选项。
B端基础 | 全套WEB表单设计基础
 
 
3、结构
一个结构充分的表单就像一个与用户的良好对话。所以记住这一点，仔细规划结构。
B端基础 | 全套WEB表单设计基础
 
 
3.1、从简单开始到创建逻辑分类
从简单问题开始，用户已经很清楚答案了。将不相关的信息按逻辑分组展示。来帮助用户理解。
B端基础 | 全套WEB表单设计基础
 
 
3.2、单步、多步、单列、多列
至于这些的方式的选择、总的来说还是信息呈现多少的不同。单步的转化率更高。但多步却更适合复杂信息的收集。
B端基础 | 全套WEB表单设计基础
 
 
单列和多列基本也是一样的道理
 
B端基础 | 全套WEB表单设计基础
 
 
 


作者：彪形大汉pro
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

 

评论(0) 浏览(836)

设计原则：认知偏差

博博

什么是确认偏差？
确认偏差是一种认知偏差，指的是人们更倾向于寻找、记住或赞同支持已有信念或假设的信息，而忽视或排斥与其相矛盾的信息。这种偏差导致人们在寻求信息和形成观点时倾向于选择那些与他们已有信念相一致的信息，而忽视那些与之相悖的信息。
在设计和决策过程中，确认偏差可能会对判断和决策产生影响。设计师或决策者可能会倾向于寻找支持他们最初想法或假设的信息，而忽略潜在的反对观点或证据。这可能导致错误的假设、不完整的分析或偏离客观事实的判断。
了解确认偏差对于设计师和决策者来说是很重要的，因为它可以影响到他们对问题的看法和解决方案的选择。为了减轻确认偏差的影响，重要的做法包括寻求多样的观点和信息来源、鼓励团队开放性讨论、持续评估和反思自己的假设，以及意识到并主动应对这种偏差。
 
超长干货！UI设计师必须要懂的4个设计心理学
它是怎么产生的？
确认偏差的产生与人类的认知方式和信息处理方式有关。它可以追溯到我们处理信息的心理机制，以及对信息的选择性接收和处理。
信息过滤和选择性接收
： 人类大脑处理的信息量庞大，为了应对这种信息负荷，我们会有意无意地选择性地接收与已有信念相符的信息，因为这样更容易被接受和理解。
认知一致性和舒适度
： 我们倾向于寻求与我们已有信念一致的信息，因为这会让我们感到更加舒适和认知上的一致性，而与之相悖的信息则可能引起认知不适或挑战。
记忆偏差
： 我们记忆中更容易保留和回忆起与我们已有信念相符的信息，而忽略或淡化与之不符的信息，导致我们更倾向于记住和重复暴露于已有信念的信息。
社会影响和团队动态
： 在团队环境中，人们可能更容易受到同伴或领导观点的影响，导致更多地寻求与团队共识一致的信息。
因此，确认偏差源于我们处理信息的方式和寻求认知一致性的趋势，这种倾向性会影响我们对信息的选择、记忆和接受，使得我们更容易偏向于支持已有信念的信息。
 
超长干货！UI设计师必须要懂的4个设计心理学
思考下确认偏差在UI作用？
认知偏差在UI设计中有着深远的影响，设计师需要了解并考虑这些偏差，以创造更符合用户认知和行为的界面：
信息呈现与确认偏差：
UI设计中的信息呈现方式能够影响用户的感知。确认偏差提示我们，设计师应该精心布局信息，确保用户首先接触到的内容是符合其期望和信念的。在重要位置展示与用户预期一致的信息能够增强用户对界面的认可感。
用户体验与认知一致性：
UI设计应该符合用户的认知模式和习惯。保持一致的界面元素、布局结构和交互方式有助于降低用户学习成本，提升用户体验，因为这与用户的认知一致性相契合。
选择性暴露与设计引导：
设计师可以利用确认偏差的特性来引导用户，将重要信息或功能放置在易于察觉的位置，引导用户进行特定的操作。然而，需要谨慎处理，以避免对用户造成信息过载。
避免偏见与用户测试：
设计师应该避免自身的认知偏差影响设计，而是更多地关注用户的实际需求和行为。通过持续的用户测试和反馈，可以验证设计的有效性，确保设计更加客观、全面地服务于用户。
认知偏差不仅能够帮助设计师更好地了解用户行为和认知模式，也提醒设计师需要谨慎地处理信息的呈现方式，以创造出更符合用户认知特点和期望的界面。
 
超长干货！UI设计师必须要懂的4个设计心理学
需要我们记住什么？
用户选择性感知：
用户会倾向于选择性地接收与其已有信念相符的信息。因此，在设计中需要注意如何呈现信息，以便用户更容易接收并理解与其预期一致的内容。
认知一致性与用户体验：
用户更喜欢一致性的界面设计。保持界面元素、布局和交互方式的一致性有助于提高用户体验，减少认知负担。
引导与用户行为：
可以利用认知偏差的特性来引导用户行为，但需要谨慎，以避免对用户造成信息过载或误导。
客观设计与用户测试：
设计师需保持客观，在设计中避免个人偏见的影响。持续的用户测试和反馈是验证设计有效性的关键。
用户需求至上：
最重要的是设计能够满足用户的实际需求。认知偏差提醒我们关注用户行为和反馈，确保设计更加贴近用户期望。
记住这些关键点有助于设计师更好地应用认知偏差的理论，创造出更符合用户认知和行为习惯的界面，提升用户体验和产品吸引力。
 
在app产品中，我们应该怎么应用认知偏差
在App产品中，了解和应用认知偏差可以改善用户体验和促进用户参与。以下是一些应用认知偏差的方法：
个性化内容推荐：
 利用用户的历史数据和偏好，提供个性化的内容推荐，引导用户浏览与其兴趣相关的信息，这符合用户的认知偏好。
强调常用功能：
 将常用功能放置在易于察觉的位置，这有助于用户更快速地找到并使用常用功能，符合用户对信息的选择性感知。
引导用户决策：
 通过明确的引导和推荐，帮助用户做出决策。例如，突出显示推荐选项或使用明确的指导语言，以降低用户的选择焦虑。
增加用户互动和奖励机制： 利用认知偏差中的奖励机制，激励用户参与互动。例如，奖励积分、勋章或奖励物品以促进用户的积极参与。
社交证据和影响力：
 强调其他用户的行为和意见，例如显示用户评论或社交分享，可以影响新用户的决策，符合社会影响的认知偏差。
提供个性化的反馈和建议：
 根据用户的行为提供个性化的反馈和建议，引导用户完成特定的动作或行为，符合用户的认知偏好和选择性感知。
综合利用这些策略可以更好地与用户互动，促进参与度，提高用户对产品的满意度。然而，需要谨慎运用，避免过度使用以至于影响用户体验或导致信息过载。
 
认知偏差总结
综合利用认知偏差的这些方面，设计者可以更加精准地与用户互动，提升用户体验和参与度。但务必注意，应用认知偏差需要在不影响用户信任和体验的前提下进行，避免过度干预或引导，以免影响用户的自主性和信任感。


作者：A大林子
来源：站酷

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计

软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(888)

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档