http://www.teruid.com/blog/ zh-cn www.emlog.net 一看就?x)的【B 端官|设计】方法解?/title> <link>http://www.teruid.com/blog/post-11765.html</link> <description><![CDATA[<div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 dDmjVv pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e80e7d9a7866zwi0i7m7121.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e80e7d9a7866zwi0i7m7121.png?imageMogr2/format/webp" data-expand="2752"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-1 align-"> <div id="a0qy1r06wz" class="bold ">前言</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">?a href="/BS.html" target="_blank" rel="noopener"><span style="color: #3598db;"><strong>B?/strong></span></a>业务中，官网通常承蝲着业务方的行业解决Ҏ(gu)Q其q代频率相对较低Q而更多的q代需求则源自于运营方面的调整。因此，我们很难像ȝlg和典型页面那PL提炼Z份官|的设计Ҏ(gu)。这一度让我陷入迷茫和犹U。经q不断的试和积累，也终于窥见了(jin)一些规律和?j)得。本文将l合具体的案例，与大家一h入探?strong><a href="/BS.html" target="_blank" rel="noopener"><span style="color: #3598db;">B端官|设?/span></a></strong>的方法论Q希望能够ؓ(f)大家提供一些启C和帮助?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 dfkVNb pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e80f4a1aaanixodrisb9767.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e80f4a1aaanixodrisb9767.png?imageMogr2/format/webp" data-expand="2752"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-1 align-"> <div id="a0qy1r06wz" class="bold ">一、B端官|的定义</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">B端品的官网Q是集品展C、动态新M?qing)线上销售ؓ(f)一体的产业销售^収ͼ也是企业与潜在客h通的桥梁。企业可以通过官网为客h供各U在U服务和自助信息DQ比如品体验、网上表单、h工客h务等Q这不仅方便?jin)企业，也?f)企业节省?jin)大量的力_力成本?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-1 align-"> <div id="a0qy1r06wz" class="bold ">二、B端官|设计的目标</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">然而，在同质化现象严重的当下，B端官|设计的需求不仅需要完成企业和产品的展C宣传，更需要塑造独特的品牌形象。如果想让自q|站领先于同行，必d制作|站时打造差异化?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">当然Q盲目追求差异化也是不可取的Q充?ldquo;个?rdquo;的网站可能导致访客浏览体验较差，不利于展C品牌内宏V?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">因此QB端品的官网设计不仅要确保一定的独特性，同时也要x到客L(fng)览体验Q通过设计更好?ldquo;讲述”产品?ldquo;吸引”用户Q将量多的潜在客户转化为注册用户ƈ完成购买?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 cEAEBm pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e81033c6492sdfggg2z2468.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e81033c6492sdfggg2z2468.png?imageMogr2/format/webp" data-expand="2752"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-1 align-"> <div id="a0qy1r06wz" class="bold ">三、基于心(j)理析官|设?/div> </div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="bold ">1Q心(j)的定义</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">?j)流理论是认知?j)理学的成果，最早是由心(j)理学家Csikszent mihalyi?975q初步提出和研究的?ldquo;?j)?rdquo;Q指的是Z从事某种事物或活动时表现出浓厚的兴趣q促(j)使个体完全投入其中。当h较高技能水q的个体q行隑ֺ适中的活动时Q用户一般心(j)境愉(zhn)且LQ容易沉其中，诸多干扰排除，|n于众多事物之外，往往忘记旉的存在，出一般预期的完成相关的Q务?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">如果以潜在客户在览产品官网ZQ心(j)，x在客户集中全部精力浏览信息的时刻Qƈ且能获取较多的有益信息和注册通道?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 jDQhZm pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e810a738aciia0y8hmw1360.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e810a738aciia0y8hmw1360.png?imageMogr2/format/webp" data-expand="2752"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="bold ">2Q心(j)模?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">?j)流模型中横轴表CZ?ldquo;技?认知”水^Q纵轴表CZQ务的“挑战/掌控”隑ֺQ媄(jing)响心(j)的两大重要因素包括个h“技?认知”水^和Q务的“挑战/掌控”隑ֺ。根?ldquo;技?认知”?ldquo;挑战/掌控”高低的对应关p，可得到觉醒、心(j)、控制、厌倦、放松、担忧、冷漠、焦虑这8U体验?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">当Q务挑战难度过大，但个人技能水q低的时候，D难以应对的局面，?x)表Cؓ(f)焦虑的情l；当挑战难度较?yu)，反而技能较高时Q会(x)随之产生厌倦的情AQ当挑战隑ֺ低，技能水q也低时Q会(x)出现淡漠的情l，甚至选择攑ּ。在“高技?认知Q高挑战/掌控”的区域，两者相匚w更容易激发心(j)的体验?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 buwbRm pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e8111ee722fahn8szgi9873.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e8111ee722fahn8szgi9873.png?imageMogr2/format/webp" data-expand="2752"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="bold ">3Q心(j)体验的关键因素</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">Csikszentmihalyi 把心(j)体验的概念概括Z(jin)9个特征?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">后来QNovak和Hoffman在研I心(j)体验的q程中，q一步将9个特征归Ux?j)流产生?cd素，x件因素、体验因素和l果因素?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 iYStby pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e8118df304a9dmjfrtv980.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e8118df304a9dmjfrtv980.png?imageMogr2/format/webp" data-expand="2752"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="bold ">4Q心(j)体验与官网设计</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">Z条g因素、体验因素和l果因素Q我们也可以出官|设计的多个设计方向?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">|</div> <div id="a0qy1r06wz" class="">首先Q条件因素要求ؓ(f)用户建立清晰明确的目标。即在官|设计的内容层面Q需要有_饱满详实的内宏V易于解ȝ信息、够直观的目标通道。这也是唯一可控的因素?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">|</div> <div id="a0qy1r06wz" class="">其次Q体验因素要求ؓ(f)用户带来引h入胜的体验。即在官|设计的形式层面Q可以在基本一致性的前提下进行适当差异化，保持潜在的阅读节奏感Q用户注意力更加集中?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">|</div> <div id="a0qy1r06wz" class="">最后，l果因素要求为用h供符合期待的服务。结果因素更多体现在用户最后的转化阶段Q需要设计高效简z的操作程Q促(j)q用戯d与ƈ开启接下来的用旅E?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 bUFiCo pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e812230a8f315xiohzu3999.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e812230a8f315xiohzu3999.png?imageMogr2/format/webp" data-expand="2752"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-1 align-"> <div id="a0qy1r06wz" class="bold ">四、B端官|设计的两大条g因素</div> </div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="bold ">1Q信息分?mdash;—需求{?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">信息分层本质上是信息l织的一U方式，通过对信息的大小、位|进行排布归c，能够复杂的信息分ؓ(f)不同的模块呈现在我们的视野中?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">官网中常见的信息分层基本为：(x)D、首焦、核?j)优ѝ品介l、业务数据、案例佐证、售后服务、品背书、免费试用以?qing)footer?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 ivvhln pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e812b52cb5m2u6rsisq6728.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e812b52cb5m2u6rsisq6728.png?imageMogr2/format/webp" data-expand="4338"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">q种分层不单是介l品，同时q站在用戯度关注了(jin)用户需求?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">|</div> <div id="a0qy1r06wz" class="">首先Q在首焦吸引用户对品初步进行了(jin)解，q在核心(j)优势板块势让用?/div> <div id="a0qy1r06wz" class="bold ">q一步了(jin)解品h(hun)|</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">|</div> <div id="a0qy1r06wz" class="">其次Q在产品介绍、售后服务及(qing)业务数据的版块加q户对产品?/div> <div id="a0qy1r06wz" class="bold ">信QQƈ且展CZ定的案例佐证?品牌背书以打消用L(fng)疑虑Q?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">|</div> <div id="a0qy1r06wz" class="">最后，通过免费试用{CTA按钮来实现快速{化?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 iRBoNY pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e814038429e910i86an6182.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e814038429e910i86an6182.png?imageMogr2/format/webp" data-expand="2752"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="bold ">2Q直观目?mdash;—?j)进转?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">CTA是英?/div> <div id="a0qy1r06wz" class="bold ">Call-to-Action</div> <div id="a0qy1r06wz" class="">的简写，又名行ؓ(f)召唤按钮。在|页中，CTA按钮往往是最昄的。通常使用醒目的颜Ԍ搭配׃h的文字，以吸引用L(fng)注意力ƈ?j)他们执行特定的行动?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">例如C端品中?ldquo;立即购买”按钮QB端官|中?ldquo;注册账户”“免费体验”按钮。其主要作用是引导用户作出特定操作Q从而提高品的点击率和来{化率?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">要想提高CTA按钮的点ȝQ也有一些小tips可以ȝ?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">|</div> <div id="a0qy1r06wz" class="">首先是按钮样式需要符合用戯知，提高可L识度Q?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">|</div> <div id="a0qy1r06wz" class="">其次按钮上的文案最好用清晰简z且有h(hun)值的提示文案Q如“注册/领取”{传达明的目的Q而非“提交/发送服务申?rdquo;{含义过于宽泛；</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">|</div> <div id="a0qy1r06wz" class="">再次我们q可以通过渐变、圆角等效果为CTA按钮增加一些丰富质感，引导用户互动、点击；</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">|</div> <div id="a0qy1r06wz" class="">最后不要忘?jin)确保CTA按钮较大的触发区域，在用h限的注意力里l予更多的防错点凅R?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 oQwDs pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e5252242a4arhxp54b72194.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e5252242a4arhxp54b72194.png?imageMogr2/format/webp" data-expand="3392"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-1 align-"> <div id="a0qy1r06wz" class="bold ">五、B端官|设计的两大体验因素</div> </div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="bold ">1QŞ式节?mdash;—“?rdquo;?ldquo;?rdquo;形式?ldquo;?rdquo;</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">“?rdquo;</div> <div id="a0qy1r06wz" class="">在于官网设计的规范方面，保证?jin)体pd设计的v点，是官|的“?rdquo;。例如布局形式、内容密度、色彩与字体体系{。其中官|的常见布局有固定版?j)、宽度自适应、单屏切换三U；在选用各种布局和用色的q程中，需要脓(chung)合企业品的主要调性，?wi)立品牌特点?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">|</div> <div id="a0qy1r06wz" class="">固定版心(j)Q能够以更低成本实现开发，且布局适配度更q，但缺Ҏ(gu)屏效较低Q?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">|</div> <div id="a0qy1r06wz" class="">布局自适应Q能够展C更多内容，拥有更高的屏效，因此自适应布局的适配机制也较为复杂；</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">|</div> <div id="a0qy1r06wz" class="">单屏切换Q能够实现用L(fng)沉浸式浏览，其注意力聚焦至当前内容Q更具A式感Q但单屏切换也有无法快速滚动浏览的~点?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">大家在选用布局形式Ӟ可以权衡利弊Q最大限度展C出产品优势与风根{?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 eGQQEh pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage isGifImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e6937bd0c6vejo9nlc92053.gif" alt="固定版心(j)" data-src="https://img.zcool.cn/community/666e6937bd0c6vejo9nlc92053.gif" data-expand="1200"> <div> <div id="a0qy1r06wz" class="sc-1gq6zpr-2 bnHeZr photoDescriptionIntro">固定版心(j)</div> </div> </div> <div id="a0qy1r06wz" class="isGifBg"> </div> </div> </div> </section> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 hsNAVy pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage isGifImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e6c71c4629j8whr3yy28241.gif" alt="自适应布局" data-src="https://img.zcool.cn/community/666e6c71c4629j8whr3yy28241.gif" data-expand="820"> <div> <div id="a0qy1r06wz" class="sc-1gq6zpr-2 bnHeZr photoDescriptionIntro">自适应布局</div> </div> </div> <div id="a0qy1r06wz" class="isGifBg"> </div> </div> </div> </section> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 hsNAVy pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage isGifImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e7f7cc1848p7o1txs4o4820.gif" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e7f7cc1848p7o1txs4o4820.gif" data-expand="1000"> <div> </div> </div> <div id="a0qy1r06wz" class="isGifBg"> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">不同的视觉规范配合不同的插图元素也会(x)形成较ؓ(f)鲜明的视觉风|适用于不同场景?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">例如Q各cMq_偏好?D元素风格Q数码电(sh)子行业则偏好实景图，OA协同办公cd常用W画H出z高效的气质?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 jNTIbi pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e6cd5989a0evyvxndwg1726.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e6cd5989a0evyvxndwg1726.png?imageMogr2/format/webp" data-expand="2752"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">形式?ldquo;?rdquo;</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">“?rdquo;</div> <div id="a0qy1r06wz" class="">在于打造视觉差异化。恰到好处的差异化会(x)塑造合适的阅读节奏Q让用户明晰重点且不乏耐心(j)。打造差异化Q可以通过?ldquo;破Ş”“破色”“破域”“破静(rn)”四种形式来实现?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">| 破ŞQ?/div> <div id="a0qy1r06wz" class="">破Ş设计通过打破规矩的设计布局Qə面更具层次感和I间感，同时可结合品牌元素提升品牌识别度Q增强用户对品牌的印象与记忆。例如下囄CODINGQ将人物形象与品牌符L(fng)合，“一枝红杏出墙来”Q颇具Ş式感?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 jfWXYM pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e6e66892879dav8kiex3503.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e6e66892879dav8kiex3503.png?imageMogr2/format/webp" data-expand="2752"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">| 破色Q?/div> <div id="a0qy1r06wz" class="">破色设计通过色彩的运用来强化信息传达的效果，在多个相似模块中使用醒目的颜色来H出重要的信息或按钮Q引导用L(fng)注意力。例如下囄腾讯云，通过使用强烈且有差异的色来Ȁ发用L(fng)探烦(ch)Ʋ望Q提高点ȝ?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 glfQTA pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e6ce82509dripgmabl34956.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e6ce82509dripgmabl34956.png?imageMogr2/format/webp" data-expand="2752"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">| 破域Q?/div> <div id="a0qy1r06wz" class="">Z在日常生zM?fn)惯了(jin)节奏感的存在，如音乐、舞y等艺术形式中的节奏感。在官网设计中融入节奏感Q可以更好地W合用户的认知习(fn)惯，提高用户寚w面的接受度和认同感。破域设计可以在面整体览q程中创造出有节奏的区域视觉变化Q有助于构徏清晰的信息浏览次序，使用戯够更L地理解和吸收官网冗长的页面内宏V例如下囄火山引擎与牛客，上下盔R的区域模块彼此界限分明，在统一的视觉中利用轻重~急向用户清晰讲述产品?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 hWTIWA pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e7450ddb09offfcgei16634.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e7450ddb09offfcgei16634.png?imageMogr2/format/webp" data-expand="3212"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">| 破静(rn)Q?/div> <div id="a0qy1r06wz" class="">破静(rn)设计可以理解Z用动态元素，可在面的关键区域动展示创意和活力，提升面的整体吸引力。例如下囄LQ首焦区域通过动态banner让用户非常直观地?jin)解该^台的核心(j)价g功能Q兼L(fng)动性与丰富度?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 QvEWs pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage isGifImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666ea49f718fd4i6umlf5c5730.gif" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666ea49f718fd4i6umlf5c5730.gif" data-expand="1180"> <div> </div> </div> <div id="a0qy1r06wz" class="isGifBg"> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="bold ">2Q互动感?mdash;—集中注意</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">微小的互动感知，常常需要投入很多设计尝试，才能获取最佳的用户体验。用户在微小的细节中Q可以获取传辑֏馈或行动的结果、增强直接操U|和掌控感。那么这U效果有什么好处呢Q想想看Q微交互是触?mdash;反馈l，触发功能元素后通过用户界面变化向用户传辄关信息，是否像对话一样呢Q帮助用戯焦于当下d或辅助其完成某个目标?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">官网中对微交互的适当使用Q可以让用户更加U极地参与到实际交互中?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 hsNAVy pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage isGifImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e7c2bcd631bjugb00lp9756.gif" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e7c2bcd631bjugb00lp9756.gif" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class="isGifBg"> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">同时Q对于承载众多内容的官网界面Q微交互也可以用设计元素来保证操作之间的q诏性，辑ֈ整体体验的流畅度Q降低用h意力被打断的几率。这U微交互通常是通过cM的元素来l持操作逻辑?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 kGiyRJ pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage isGifImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e7df5e0ef793vmdorzl7276.gif" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e7df5e0ef793vmdorzl7276.gif" data-expand="1680"> <div> </div> </div> <div id="a0qy1r06wz" class="isGifBg"> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-1 align-"> <div id="a0qy1r06wz" class="bold ">六、B端官|设计的l果因素</div> </div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="bold ">降低门槛——高效z?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">?j)流来到最后的l果阶段Q用户已l通过条g因素开启浏览、通过体验因素保持专注Q接下来则需要高效完成注册，在顺畅、简z的l果因素中完成心(j)闭环?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">实际场景中，J琐冗长的表单是劝退很多用户q行注册的主要原因，我们可以通过降低门槛和友好文案来解决q个问题?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">通过化表单降低门槛，我们可以最大限度地减少填写量，节省用户填写的时间和_֊Q让其感到操作方便，不会(x)因复杂的程而感到沮丧或困惑。这U顺畅的体验可以显著提升用户的满意度和忠诚度。而通过友好的文案，则能够让用户感到被尊重和xQ提升整体的使用体验和满意度。同时友好的文案q可以减用户在填写q程中的挫|感和困惑感，提高他们完成表单的意愿和可能性，从而提高表单的提交率。例如下囄teambition与miroQ直接外露一个注?使用的必填项Q辅以醒目友好的介绍文字Q点击CTA直接q入转化程Q通过此类Ҏ(gu)可有效提高{化率?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 ioJDzz pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/666e9c0af2a9fw8dqmns6h8971.png?imageMogr2/format/webp" alt="一看就?x)的【B端官|设计】方法解? data-src="https://img.zcool.cn/community/666e9c0af2a9fw8dqmns6h8971.png?imageMogr2/format/webp" data-expand="2752"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-1 align-"> <div id="a0qy1r06wz" class="bold ">写在最?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">在本中Q我们通过?j)流理论对B端官|设计进行了(jin)深入解析Q希望这些洞见能为大家的设计实践带来启发与帮助。在不断变化的商业环境中Q构够引导用戯入心(j)状态的官网Q既是业务目标，也是对用户体验设计的专业要求。心(j)状态不仅能够提升用L(fng)专注度和满意度，q能有效?j)进业务目标的实现?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">感谢(zhn)的阅读和关注，也欢q大家的留言与讨论，通过本文的探讨，希望能和大家一同获得一些实用的设计{略和新的思考方式。设途O漫，偶有星光Q愿我们在设计之路上不断前行Q共同进步?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 bOweZG pictureBox"> <div id="a0qy1r06wz" class="imgbox"> </div> </div> </div> </section> </div> <br><br>作者：(x)工靓仔<br>链接Qhttps://www.zcool.com.cn/article/ZMTYyNDcwNA==.html<br>来源Q站?br>著作权归作者所有。商业{载请联系作者获得授权，非商业{载请注明出处?/div> <div> <p><a href="/blog/content/uploadfile/202410/d2b51729476285.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/thum-d2b51729476285.png" alt="image.png"></a></p> <p><a href="/blog/content/uploadfile/202406/e5891719196478.jpg" target="_blank" rel="noopener">蓝蓝设计(</a><a href="/index.html" target="_blank" rel="noopener">www.teruid.com</a> )是一家专注而深入的界面设计公司Qؓ(f)期望卓越的国内外企业提供卓越?a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计</a>?a href="/BS.html" target="_blank" rel="noopener">B端界面设?/a>?a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设?/a>?a href="/scjm.html" target="_blank" rel="noopener">APP界面设计</a>?a href="/icon.html" target="_blank" rel="noopener">图标定制</a>?a href="/Design.html" target="_blank" rel="noopener">用户体验设计</a>?a href="/bz-bh.html" target="_blank" rel="noopener">交互设计</a>?a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>?a href="/web.html" target="_blank" rel="noopener">高端|站设计</a>?a href="/xz.html" target="_blank" rel="noopener">q面设计</a>Q以?qing)相关的软g开发服务，咨询?sh)话Q?1063334945。我们徏立了(jin)一个微信群Q每天分享国内外优秀的设计，有兴请加入一起学?fn)成长，咨询及(qing)进请加蓝助微信ben_lanlan?/p> <p><a href="/blog/content/uploadfile/202410/d2b51729476335.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/d2b51729476335.png" alt="image.png"></a></p> <p>关键词：(x)<a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>?a href="/index.html" target="_blank" rel="noopener">UI设计服务公司</a>?a href="/index.html" target="_blank" rel="noopener">软g界面设计公司、界面设计公司?/a><a href="/index.html" target="_blank" rel="noopener">UI设计公司</a>?a href="/index.html" target="_blank" rel="noopener">UI交互设计公司</a>?a href="/index.html" target="_blank" rel="noopener">数据可视化设计公?/a>?a href="/index.html" target="_blank" rel="noopener">用户体验公司</a>?a href="/index.html" target="_blank" rel="noopener">高端|站设计公司</a>?a href="/bank.html" target="_blank" rel="noopener">银行金融软g</a><a href="/bank.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/monitor.html" target="_blank" rel="noopener">能源?qing)监控Y?/a><a href="/monitor.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/weather.html" target="_blank" rel="noopener">气象行业</a><a href="/weather.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设?/a>?a href="/gis.html" target="_blank" rel="noopener">地理信息pȝ</a><a href="/gis.html" target="_blank" rel="noopener">GIS UI界面设计</a>?a href="/aerospace.html" target="_blank" rel="noopener">航天军工软g</a><a href="/aerospace.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/medicalyl.html" target="_blank" rel="noopener">ȝ行业软g</a><a href="/medicalyl.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/education.html" target="_blank" rel="noopener">教育行业软g</a><a href="/education.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计?/a><a href="/Work.html" target="_blank" rel="noopener">软gqt开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gwpf开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gvue开?/a></p> </div>]]></description> <pubDate>Mon, 21 Oct 2024 06:30:50 +0000</pubDate> <dc:creator>鹤鹤</dc:creator> <guid>http://www.teruid.com/blog/post-11765.html</guid> </item> <item> <title>图标设计?ji)大l一?/title> <link>http://www.teruid.com/blog/post-11764.html</link> <description><![CDATA[<div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">大家有没有被说过Q?ldquo;<a href="/" target="_blank" rel="noopener"><span style="color: #3598db;"><strong>UI设计</strong></span></a>不够_致Q?rdquo;</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">拿图标D例，不精致的原因大概率是l一性没做好Q?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">总说做图标要l一Q但是到底要l一哪些要素Q有没有一个完整的自检表呢Q?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">最初我ȝ??个要l一的要素，在最q观察大家的l习(fn)之后Q扩增到?个，今天׃UŞ图标ZQ看看我们需要统一?个要素！</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">大纲如下Q?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">1、大统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">2、圆角统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">3、语al一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">4、粗l统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">5、疏密统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">6、间距统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">7、比例统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">8、正负Şl一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">9、角度统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">1、大统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">q个很容易理解，是一l图标看h大小是一致的。但是最q发C(jin)一个比较容易出现的问题Q就是很多同学做一l练?fn)，盔R的图标都差不太多Q但是隔的比较远的图标放在一起就差很多了(jin)Q比如下面这几个图标Q就是逐渐变大的：(x)</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 kWBlwe pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42de0c053b6kkn50qyz4479.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42de0c053b6kkn50qyz4479.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">所以对于大统一Q我们必要做到Q一l图标里QQ意两个图标拿出来都是大小l一的，否则是不及(qing)根{?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">2、圆角统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">圆角l一也比较好理解Q无非就是圆角大，像下面这两个图标Q?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 cfbhzG pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42debabf8bbbpkj7bsx2709.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42debabf8bbbpkj7bsx2709.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">如果圆角差很多，很Ҏ(gu)发现Q因为都是差不多大小的矩形，但是我们很容易忽略一些细节，比如下面W一个图标的三角形，和旁边的日历相比Q过于尖锐：(x)</div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 cfbhzG pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42df3b4ea47t8s9fpdf3136.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42df3b4ea47t8s9fpdf3136.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">q是图标设计里，很容易被忽视的小l节Q大家一定要重视?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">3、语al一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">语言l一可以理解计风格统一Q如果一l图标出C(jin)多种风格Q那?x)显得非怸专业?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">比如下面q组l习(fn)Q?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 kHAiQw pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42dfdd63ca6kmz2t9c12001.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42dfdd63ca6kmz2t9c12001.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">大体看似好像是一U语aQ但仔细观察Q有很多l节不统一Q比如外轮廓上面有的有白艌Ӏ有的没有，白色q分带描边和不带描边的：(x)</div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 dYkrrQ pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42e06ed8b608rmt4o5w1708.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42e06ed8b608rmt4o5w1708.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">q就是设计语a不统一的案例，在做l习(fn)的时候，一定要x楚你的设计语a是什么?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">4、粗l统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">_细l一׃用说?jin)，基本是用在U性图标，像这U比较明昄_细不一_(d)׃应该出现?jin)?x)</div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 eyLABO pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42e0fb3e06icggsbtog2170.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42e0fb3e06icggsbtog2170.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">q都是最基础的问题，一般在zd里打卡超q?ơ还出现q种问题Q那实属不该了(jin)Q?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">5、疏密统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">疏密l一其实是很多新人朋友容易犯的错Q比如下面这一l图标：(x)</div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 kWBlwe pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42e1985707ey7f0rjd56254.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42e1985707ey7f0rjd56254.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">大部分地Ҏ(gu)比较透气疏松的，但是只有W二个比较密集，q样׃(x)让h感觉比较H兀Q整体不够和谐?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">q就是疏密程度的l一性，一定要把握住节奏感Q否则就?x)不舒服?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">6、间距统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">q个点一般用在断U图标上Q也是你开口大的l一性，比如一个开很大Q一个开很小Q?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 kWBlwe pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42e244be4bhhtdwtigq6487.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42e244be4bhhtdwtigq6487.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">q也属于l节没有做到位?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">7、比例统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">比例可以分很多种Q比如颜色比例，像下面这个原作的颜色比例没有太l一Q?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 cmCaoj pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42e32d45f5bnoq8nfro9233.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42e32d45f5bnoq8nfro9233.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">在小y优化临摹之后Q达C(jin)颜色比例的^衡：(x)</div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 jaKSQl pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42e3b7bd09qcjyr6zty9242.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42e3b7bd09qcjyr6zty9242.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">再比如之前说的一个案例，_细U条的比例：(x)</div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 kLRKoP pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42e42060be6b5f8tfz65657.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42e42060be6b5f8tfz65657.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">W一个图标，_线与细U的比例Q?5:5</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">W二个图标，_线与细U的比例Q?0:30</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">W三个图标，_线与细U的比例Q?00:0</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">在这样不l一的情况下Q图标是一定不?x)精致的?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">以上q些都是比例l一问题出现的实际场景?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">8、正负Şl一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">正负形属于没那么Ҏ(gu)察觉出来的。D个例子，下面q组图标Q乍一看没什么问题，但是仔细观察Q我们会(x)发现Q白色面U的重量是不l一的，那个消息上面?ldquo;#”?x)偏重一点：(x)</div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 kLRKoP pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42e48ec21d0yo5tkzfc1624.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42e48ec21d0yo5tkzfc1624.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">当优化之后，我们再看Q?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 kLRKoP pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42e5034984z8yz50wyh5012.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42e5034984z8yz50wyh5012.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">整体׃(x)比之前统一_致很多?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">9、角度统一</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">角度Q也是增加图标统一感的重要因素之一Q最常见的角度统一方式是按照一定的倍数来制定规范，比如30度的倍数Q?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 kLRKoP pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42e579cc35ne5xbvsxz7455.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42e579cc35ne5xbvsxz7455.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">再D一个角度其他方面的例子Q在做下面这l图标的时候，最初没有考虑断线的规律：(x)</div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 kLRKoP pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42e5ec7cc5a2k9sghl83235.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42e5ec7cc5a2k9sghl83235.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">看久?jin)?x)觉得有些凌ؕQ我断U处定ؓ(f)右下?5度，如遇到圆角拐角处Q可挪动靠近拐角处进行断U：(x)</div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 kLRKoP pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42e66b6ddfscqabrppe3107.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42e66b6ddfscqabrppe3107.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">q样我们׃(x)看到所有的图标断线位置都大致出现在右下角的地方Q最l效果如下：(x)</div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap padSpace"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 kLRKoP pictureBox"> <div id="a0qy1r06wz" class="imgbox"><img class="photoImage lazyloaded" draggable="true" src="https://img.zcool.cn/community/66b42e6deb738gkkynqq3x4006.png?imageMogr2/format/webp" alt="图标设计?ji)大l一? data-src="https://img.zcool.cn/community/66b42e6deb738gkkynqq3x4006.png?imageMogr2/format/webp" data-expand="1080"> <div> </div> </div> <div id="a0qy1r06wz" class=""> </div> </div> </div> </section> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">很大E度上提高了(jin)图标的统一性，q且在g展执行的时候节省了(jin)大量的思考时_(d)思考在哪里断）(j)?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">但是对于断线的位|是否一定要规定其出现的角度Q我觉得不一定，也可以从其他角度考虑Q但最l的目的q是让整体统一和谐Q且延展性高?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="bold ">ȝ</div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> <div id="a0qy1r06wz" class="">以上是目前ȝ?个需要统一的点Q只要能把所有的l一性做好，_致一定是没问题的?/div> </div> <div id="a0qy1r06wz" class="paragraph align-justify undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <br>作者：(x)脑府设计团?br>链接Qhttps://www.zcool.com.cn/article/ZMTYzMDE5Ng==.html<br>来源Q站?br>著作权归作者所有。商业{载请联系作者获得授权，非商业{载请注明出处?<div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class=""> </div> </div> <div id="a0qy1r06wz" class="seamlessImage"> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 eimIMP pictureBox"> <div id="a0qy1r06wz" class="imgbox"> </div> </div> </div> </section> </div> </div> </div> <div> <p><a href="/blog/content/uploadfile/202410/d2b51729476285.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/thum-d2b51729476285.png" alt="image.png"></a></p> <p><a href="/blog/content/uploadfile/202406/e5891719196478.jpg" target="_blank" rel="noopener">蓝蓝设计(</a><a href="/index.html" target="_blank" rel="noopener">www.teruid.com</a> )是一家专注而深入的界面设计公司Qؓ(f)期望卓越的国内外企业提供卓越?a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计</a>?a href="/BS.html" target="_blank" rel="noopener">B端界面设?/a>?a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设?/a>?a href="/scjm.html" target="_blank" rel="noopener">APP界面设计</a>?a href="/icon.html" target="_blank" rel="noopener">图标定制</a>?a href="/Design.html" target="_blank" rel="noopener">用户体验设计</a>?a href="/bz-bh.html" target="_blank" rel="noopener">交互设计</a>?a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>?a href="/web.html" target="_blank" rel="noopener">高端|站设计</a>?a href="/xz.html" target="_blank" rel="noopener">q面设计</a>Q以?qing)相关的软g开发服务，咨询?sh)话Q?1063334945。我们徏立了(jin)一个微信群Q每天分享国内外优秀的设计，有兴请加入一起学?fn)成长，咨询及(qing)进请加蓝助微信ben_lanlan?/p> <p><a href="/blog/content/uploadfile/202410/d2b51729476335.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/d2b51729476335.png" alt="image.png"></a></p> <p>关键词：(x)<a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询</a>?a href="/index.html" target="_blank" rel="noopener">UI设计服务公司</a>?a href="/index.html" target="_blank" rel="noopener">软g界面设计公司、界面设计公司?/a><a href="/index.html" target="_blank" rel="noopener">UI设计公司</a>?a href="/index.html" target="_blank" rel="noopener">UI交互设计公司</a>?a href="/index.html" target="_blank" rel="noopener">数据可视化设计公?/a>?a href="/index.html" target="_blank" rel="noopener">用户体验公司</a>?a href="/index.html" target="_blank" rel="noopener">高端|站设计公司</a>?a href="/bank.html" target="_blank" rel="noopener">银行金融软g</a><a href="/bank.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/monitor.html" target="_blank" rel="noopener">能源?qing)监控Y?/a><a href="/monitor.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/weather.html" target="_blank" rel="noopener">气象行业</a><a href="/weather.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设?/a>?a href="/gis.html" target="_blank" rel="noopener">地理信息pȝ</a><a href="/gis.html" target="_blank" rel="noopener">GIS UI界面设计</a>?a href="/aerospace.html" target="_blank" rel="noopener">航天军工软g</a><a href="/aerospace.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/medicalyl.html" target="_blank" rel="noopener">ȝ行业软g</a><a href="/medicalyl.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/education.html" target="_blank" rel="noopener">教育行业软g</a><a href="/education.html" target="_blank" rel="noopener">UI界面设计</a>?a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计?/a><a href="/Work.html" target="_blank" rel="noopener">软gqt开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gwpf开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gvue开?/a></p> </div> <div> </div>]]></description> <pubDate>Mon, 21 Oct 2024 05:48:29 +0000</pubDate> <dc:creator>鹤鹤</dc:creator> <guid>http://www.teruid.com/blog/post-11764.html</guid> </item> <item> <title>B端品设计优?Z用户需求调研与分析 http://www.teruid.com/blog/post-11763.html
在当今设计和产品开发领域，用户研究扮演着不可或缺的角艌Ӏ理解用L(fng)需求、行为和体验Q是设计师们打造成功品和服务的关键步骤?/div>
用户研究不仅是设计师和品团队的重要工具Q更是提升品竞争力和用h意度的关键因素。通过深入的用L(fng)IӞ我们能够更准地捕捉用户需求，创造出创新产品?/div>
q篇文章深入而全面的讲解用户研究的方法与具体实践Q包括用L(fng)I的重要性、用L(fng)I的核心(j)因素、定性定量研I方法、基于品生命周期的用研方式、用L(fng)I在设计出中的具体应用{多l度探讨用户研究的核?j)概念?qing)其实际应用方法，帮助读者更好地理解如何通过有效的用L(fng)I提升品的用户体验和市(jng)场竞争力。同时提供清晰的Ҏ(gu)论和实际操作指南Q帮助在设计和开发过E中有效地应用用L(fng)IӞ实现产品与市(jng)场的良性互动与成长?/div>
B端品设计优?Z用户需求调研与分析
 
 
杰夫·贝佐斯是亚马逊集团创始hQ他曾说Q?ldquo;用户的需求是创新的源泉，只有深入?jin)解用户Q我们才能创造出真正有h(hun)值的产品?rdquo;q句话强调了(jin)用户需求在创新q程中的核心(j)C?/div>
他指出，真正有h(hun)值的产品来源于对用户需求的深入?jin)解?/div>
也就是说Q创C是凭IZ生的Q而是通过仔细观察和理解用L(fng)实际需求和问题而实现的。只有当我们真正?jin)解用户的痛炏V期望和行ؓ(f)模式Ӟ才能开发出满他们需求ƈ解决他们问题的品和服务?/div>
通过?a href="/BS.html" target="_blank" rel="noopener">用户Z?j)的设?/a>Qƈ通过数据驱动的决{，我们可以解锁设计的无限潜力，创造出更好的品和服务?/div>
惌用户׃你的产品Q你必须先爱上你的用戗?/div>
B端品设计优?Z用户需求调研与分析
 
 
一、我作ؓ(f)设计师的思?/div>
作ؓ(f)设计师，q往我常常在思考：(x)设计的h(hun)值是什么？用户体验的h(hun)值又是什么？在设计之路上不断前行的过E中Q这个问题始l如影随形?/div>
我在企业中遇到很多困惑，pȝ?BUG ?x)造成用户体验不好Q这只是其中一个方面。比如，当用户在使用一ƾY件时Q突然出现的pȝ错误提示Q会(x)打断他们的操作流E，让他们感到沮丧和无奈。又或者，在一个购物^CQ如果因为系l的漏洞D商品信息昄不准，用户可能?x)对产品的质量生怀疑，从而放弃购买。这些看似小的 BUGQ却可能对用户体验生巨大的负面影响?/div>
而除?jin)系l?BUG 之外Q还有很多因素也和体验有兟뀂界面的设计是否z美观？操作是否便捷畅Q信息的呈现是否清晰易懂Q这些都是媄(jing)响用户体验的关键因素。例如，一N乐播放YӞ如果界面设计q于复杂Q用户可能很难找到自己想听的歌曲Q而如果操作不够便P比如切换歌曲需要经q多个繁琐的步骤Q那么用L(fng)使用体验也会(x)大打折扣?/div>
再比如，一个企业的官网Q如果页面加载速度q慢Q用户可能会(x)失去耐心(j)而直接关闭页面；如果|站的信息架构不合理Q用户难以找到自己需要的内容Q那么这个官|就无法发挥其应有的作用。在Ud应用领域Q推送通知的频率和内容也会(x)影响用户体验。如果推送过于频J或者内容不相关Q用户可能会(x)感到厌烦(ch)Q甚臛_载应用?/div>
MQ在设计和用户体验的领域Q每一个细节都臛_重要。设计师需要不断地思考和探烦(ch)Q如何在满功能需求的同时Q提升用L(fng)体验Qؓ(f)用户创造真正有价值的产品?/div>
 
 
二、用L(fng)I的核心(j)
用户研究QUser ResearchQ是一U系l性的Ҏ(gu)Q旨在通过?jin)解用户的需求、行为、态度和痛点，来改q品或服务的设计和功能。它通过各种研究Ҏ(gu)Q如访谈、调查、可用性测试和观察{，攉和分析用L(fng)数据。这些数据帮助设计团队和开发者更好地理解用户Q从而做出更明智的设计决{?/div>
在实际设计和开发过E中Q通过攉和分析以上信息，设计团队可以更有针对性地制定商业模式、服务方式、策略重点和盈利模式Q确保品不仅能够满_(jng)场需求，q能够提供良好的用户体验Q从而提升品的竞争力和?jng)场份额?/div>
MQ用L(fng)I的核心(j)在于通过深入理解用户Qؓ(f)设计和开发团队提供关键的信息和见解，以便他们能够有效地创造出W合用户期望和需求的产品或服务?/div>
B端品设计优?Z用户需求调研与分析
 
 
 
用户研究QUser ResearchQ是一U系l性的Ҏ(gu)Q旨在通过?jin)解用户的需求、行为、态度和痛点，来改q品或服务的设计和功能。它通过各种研究Ҏ(gu)Q如访谈、调查、可用性测试和观察{，攉和分析用L(fng)数据。这些数据帮助设计团队和开发者更好地理解用户Q从而做出更明智的设计决{?/div>
用户研究QUser ResearchQ确实是设计和品开发过E中臛_重要的一环。它通过pȝ性的Ҏ(gu)和工P深入研究用户的目标、需求、能力以?qing)体验，旨在指导如何优化设计、品架构或工具Q从而提升用L(fng)工作和生zM验?/div>
 
在进行用L(fng)I时Q主要关注以下几个方面：(x)
1.用户体验QUser ExperienceQ：(x)
q是用户与品或服务互动的整体感受和反应。通过用户研究Q可以了(jin)解用户在使用q程中的体验如何Q哪些方面需要改q，从而优化品设计和功能?/div>
2.用户痛点QPain PointsQ：(x)
指的是用户在使用产品或服务时遇到的困难、不便或不满意的地方。通过深入?jin)解用户的痛点，可以针对性地改进产品的功能和设计Q提升用L(fng)满意度和忠诚度?/div>
3.用户需求（User NeedsQ：(x)
q是用户在特定情境下必须满的条件或期望。通过用户研究Q可以准把握用L(fng)需求，保产品或服务能够有效地解决用户的实际问题?/div>
4.用户行ؓ(f)和态度QUser Behavior and AttitudesQ：(x)
研究用户在用品或服务时的行ؓ(f)模式和心(j)理态度Q包括他们的偏好、习(fn)惯以?qing)对新技术或设计的接受度。这些信息有助于设计团队调整产品{略和功能，以更好地q合用户的期望和?fn)惯?/div>
在实际设计和开发过E中Q通过攉和分析以上信息，设计团队可以更有针对性地制定商业模式、服务方式、策略重点和盈利模式Q确保品不仅能够满_(jng)场需求，q能够提供良好的用户体验Q从而提升品的竞争力和?jng)场份额?/div>
MQ用L(fng)I的核心(j)在于通过深入理解用户Qؓ(f)设计和开发团队提供关键的信息和见解，以便他们能够有效地创造出W合用户期望和需求的产品或服务?/div>
 
B端品设计优?Z用户需求调研与分析
 
 
B端品设计优?Z用户需求调研与分析
 
 
三、品生命周期的用户研究考量
一?-1的品，在品设计前Q可能没有大量的用户或数?而又需要了(jin)解用L(fng)偏好Q来定义产品需要解决的用户痛点{问?所以需要采取一些定性研I?访谈、用戯色定义等)的方式来攉产品设计的核?j)需求?/div>
1-N的品，在品设计前拥有了(jin)一定比例的用户和数据，可以参考一些数据来定产品优化的方向和指标。品设计后Q根据项目，也有两种验证Ҏ(gu): 一是做A/B试Q慢慢推向市(jng)场小范围攉反馈Q待E_后再大规模推向整个市(jng)场。这U做法属于定量的范畴。二是可用性测试，招募W合要求的用h参与C品的试用Q提前设计一些Q务要求用h完成Qƈ可以增加一些定性研I?眼动实验、用戯谈等)辅以完善?/div>
B端品设计优?Z用户需求调研与分析
 
 
B端品设计优?Z用户需求调研与分析
 
 
 
在用L(fng)I中Q定性和定量研究C一对相辅相成的伙伴Q二者互充，紧密l合使用能够为我们提供全面而深ȝ用户z察?/div>
首先Q在发现问题斚wQ定性研I发挥着臛_重要的作用?/div>
通过深入的用戯谈、焦点小l讨Z?qing)实地观察等方式Q我们能够走q用L(fng)世界Q聆听他们的声音Q捕捉那些细微之处的潜在问题和珍늚Z(x)。比如，在一ƾ新的社交Y件的研发q程中，通过与用L(fng)面对面交，我们可能?x)发现用户对于隐U设|的担忧Q或者对于特定功能的强烈需求，q些都是定量研究难以直接触及(qing)的领域?/div>
接着Q验证假讄节，定量研究则展现出其强大的实力?/div>
利用大规模的数据攉和统计分析，我们可以对定性研I中发现的假设进行验证和量化。例如，我们在定性研I中发现用户Ҏ(gu)个新功能的兴较高，那么通过定量研究中的问卷调查或数据分析，我们可以定q个兴趣的具体程度以?qing)在用户体中的普遍性，从而ؓ(f)产品决策提供有力的数据支持?/div>
最后，在P代设计阶D，定性反馈成Z(jin)改善设计的关键?/div>
用户的具体意见、感受和Q能够ؓ(f)设计师提供精准的改进方向。同Ӟ定量数据的评估效果也不可或缺。通过对关键指标的监测和分析，我们可以客观地评估设计P代后的成效，如用L(fng)存率的提升、用时长的增加{。这L(fng)循环往复，使得产品在不断的优化中逐渐近于用L(fng)真正需求?/div>
MQ定性和定量研究的结合，如同为用L(fng)I搭Z(jin)一座坚实的大厦Qؓ(f)打造出卓越的品和服务奠定?jin)坚实的基础?/div>
 
四、项目实?星汉低代码^台基 提升产品体验
1.目介绍Q?/div>
星汉低代码^台是一Ƒְ先进的AI技术与低代码开发理念完结合的化开发^?/div>
旨在通过化且的开发工?/div>
赋能开发者，提升研发效能、降低开发门槛，q增强应用效?/div>
2.目背景Q?/div>
低代码^台去q下半年开始支撑教育数字基座应用开发助手的,d主要处于内部打磨阶段Q今q上半年随着应用开发助手前三单的推q，直面真实客户的需求和交付压力Q暴露出来了(jin)许多问题Q功能性的、非功能?性能、安全、稳定?、架构、协作与程{。for商业化，Z障教育规模化交付Q解军_(jing)响应用交付的基础功能问题?qing)风格换斎ͼ包括账号权限体系、多U户与资源隔R第三方q_Ҏ(gu)、业务逻辑~排。基于此需求对q_的础功能q行完善Q存在一下两个问题：(x)
1.Z多租户与资源隔离问题Q?/div>
无法支持多租户及(qing)多租L(fng)理；多应用不支持׃n数据、̎h限、工作流Q不支持按交付项目管理和复制多个应用{。用优先解军_层资源隔ȝ技术架构调整、基目理产品功能Q调整品基功能架构Q租户配|、模板的措施才优化体验?/div>
2.Z业务逻辑~排问题Q?/div>
无后端（1.业务逻辑处理Q?.数据处理功能Q均需要硬~码Q硬~码部分无法随品升U而更斎ͼ与品脱节需要独立维护；教育助手无法修改编码的逻辑Q无法最l提供给信息化老师Q弱开发者）(j)修改的问题。优先解决业务逻辑脚本和SQL脚本代码在低代码q_中可留存可复用可调式的基功能?/div>
B端品设计优?Z用户需求调研与分析
 
 
3.设计目标?qing)方法?x)
Z产品的背景，明确?jin)设计目标是打?/div>
“好用、易?rdquo;
的^台操作体验?/div>
通过设计z察Q从易操作性、易学性和易见性的角度重新定义问题q寻求最优解x案?/div>
首先通过用户调研&体验度量 ?jin)解q_现状和用L(fng)点，然后q行竞品分析和体验自查发现问题，最后基于发现的问题明确设计优化Ҏ(gu)理ƈ优化产品?/div>
B端品设计优?Z用户需求调研与分析
 
 
B端品设计优?Z用户需求调研与分析
 
 
4.三大指标分析Q?/div>
在用户体验的领域中，满意度、净推荐值和费力度这三大主观指标犹如三把衡量产品或服务质量的关键标尺?/div>
B端品设计优?Z用户需求调研与分析
 
 
满意度：(x)短期内衡量用户幸感的用户得?/div>
适用所有场景，适合作ؓ(f)补充指标做体验评估?/div>
满意度的适用性非帔RQ可以用于询问用户各U问题，可以看整体的产品体验满意度，也可以看具体的某个功能的满意度。满意度能够体现出用户对产品短期内的q福感?/div>
满意度的~陷是无法体现用户对产品的长期态度?/div>
净推荐|(x)长期内衡量用户幸感得分 卛_户忠诚度
头部厂商常用Q适用于高频高竞争对外用户的品?/div>
是一U计量某个客户可能会(x)向其他h推荐某个企业或服务可能性的指数?/div>
NPS被用于衡量目用户长期的幸感Q广泛用于互联网产品来衡量用户忠诚度?/div>
费力度：(x)短期内衡量用户完成Q务的难易E度
主要应用于，ToBd效率度量Q相对于满意度，企业内部产品度量准确度更高?/div>
费力度通过询问用户产品是否Ҏ(gu)处理用户的问题，来发现用户对产品最真实的评价和用户的痛点，从而解决用户关注的问题以提升用户忠诚度?/div>
 
4.Ҏ(gu)体^台进行调?/div>
对^台进行分析后ȝ出我们的q_更适合于用费力度进行度量，得到的结果如?/div>
费力度度量：(x)?jin)解现阶D^C验费力度情况Qؓ(f)提升搭徏效率10%做基准线辅助定位?/div>
体验U度认同度度量：(x)?jin)解现阶D^台操作效率、容易上手、界面美观、系l稳定、功能全面五个维度的认同?/div>
q程中发现^台整?/div>
产品服务路径和体验非常费力，pȝE_度低
?/div>
拆分操作效率、容易上手、界面美观、系l稳定、功能全面五个维度，l果认同度均低。
最低的为系l稳定度Q最高的是界面美观度?/div>
B端品设计优?Z用户需求调研与分析
 
 
B端品设计优?Z用户需求调研与分析
 
 
B端品设计优?Z用户需求调研与分析
 
 
B端品设计优?Z用户需求调研与分析
 
 
B端品设计优?Z用户需求调研与分析
 
 
我们的主要竞品品是宜搭、轻、明道云、简道云?/div>
宜搭
Q是阉K巴巴自主研发的低代码应用开发^収ͼZ阉K云的基础设施和钉钉的企业数字化操作系l。具有高度灵zL和适应性，支持多种应用场景和业务模式，提供丰富lg和模板，能快速构建高质量、可靠的应用。例如，在企业通信、项目管理、客户关pȝ理等斚w表现。它q具备出色的可扩展性和易维护性，可与阉K云其他品无~集成，实现数据׃n和协同办公，同时支持自定义业务流E和数据字段?/div>
L
Q是一个无代码pȝ搭徏q_Q能帮助用户L搭徏各种场景应用Q如q销存、客L(fng)理、OA 协同办公、项目管理等。其特点是操作界面简z，通过拖拽d字段、设|业务流、分配权限等单操作即可让业务数据规范严}地流转。它q支持自定义门户打造业务枢U，实现不同业务场景Qƈ且有多种视图cdQ让业务人员以自q方式高效工作Q能够满绝大多C业信息化的需求?/div>
明道?/div>
Q可零代码构建各U企业中后台应用Q功能较为强大和灉|Q例如在数据处理和分析方面有一定优势，支持复杂的业务逻辑搭徏和数据整合。它提供?jin)丰富的接口和集成能力，方便与其他系l进行对接和扩展。其应用场景q泛Q涵盖了(jin)目理、业务流E管理、数据分析等多个领域3?/div>
道云
Q是一个零代码应用搭徏q_Q以表单为核?j)，擅长数据的收集、整理和分析。用户可以通过拖拉拽的方式L创徏个性化的表单，实现信息攉理。在程自动化方面表现突出，可视化调整业务流E，让业务处理有条不紊。同时具备领先的报表能力Q支持多表数据连接、权限管理、异常报警等Q能帮助用户q行高效决策Q数据全打通，可消灭数据孤?/div>
 
我们对其视觉层的形、色、质、构Q与体验层均做了(jin)详细的竞品分?/div>
调研完成后进行视觉侧梳理优化点：(x)Z用户原声/竞品分析/体验走查U度{维度梳理优化点Q进行设计优化?/div>
B端品设计优?Z用户需求调研与分析
 
 
Z优化点对产品q行优化升Q优化了(jin)l织架构Q原来我们的架构是单U户Q无法支持SaaS版本多租户需求；无法支持多应用业务逻辑和数据表复用Q仅通过q接器、硬~码方式联通；模版功能不完_(d)无法支持多应用综合解x案的模版新徏功能。通过用户调研发现用户的痛点，单租户Ş式媄(jing)响了(jin)用户的操作效率与资源的隔R?/div>
优化后将U户内加入项目作源隔，行业或服务商可以在一个租户下理交付l不同用L(fng)目Q针寚w目进行复制和授权Q可以解军_个应用间的数据共享问题；开发者与用户账号权限分离Q权限定位更加清晰减安全风险?/div>
B端品设计优?Z用户需求调研与分析
 
 
对网|格系l进行了(jin)规则划分Q确保页面元素的寚w、^衡和一致性，主要Z的维度是Q?/div>
  1.  
    提高设计效率Q设计师可以依据栅格pȝ快速确定页面元素的位置和大，无需反复试和调_(d)从而节省设计时间?/div>
  2.  
    增强面一致性：(x)通过栅格pȝQ不同页面的布局可以保持l一的风格和l构Q提升整个网站的视觉一致性?/div>
  3.  
    改善用户体验Q合理的栅格布局佉K面更加清晰、易读，用户可以更轻村֜览和获取信息?/div>
我们的左侧导航比常规的更加短一些，方便用户在右侧更好的操作和筛选。同时新增了(jin)展开和收L(fng)功能Q给予用h大的操作I间?/div>
B端品设计优?Z用户需求调研与分析
 
 
Z颜色和情l的关系Q围着功能属性和特点l予?jin)不同的颜色选择?/div>
蓝色通常被认为是E_、可靠和专业的颜艌Ӏ因此，对于一些科技产品或金融服务，蓝色可能是一个合适的选择Q因为它传达?jin)品的可靠性和安全性?/div>
U色则是充满zd、激情和力量的颜艌Ӏ对于一些运动品牌或能量饮料Q红色可能是一个理想的选择Q因为它传达?jin)品的zd和能量?/div>
l色通常与自然、健康和环保相关。对于一些食品、保健品或环保品，l色可能是一个合适的选择Q因为它传达?jin)品的健康和环保特炏V?/div>
B端品设计优?Z用户需求调研与分析
 
 
B端品设计优?Z用户需求调研与分析
 
 
B端品设计优?Z用户需求调研与分析
 
 
最后，完成?jin)包括多U户与资源隔R业务逻辑~排、角色权限能功能设计?/div>
构徏z、直观、高效且h吸引力的用户界面Q确保用戯够轻松、愉(zhn)地完成各项操作Q从而提升品的整体用户满意度和忠诚度，Z品的成功奠定坚实的基。谢谢?/div>

image.png

蓝蓝设计(www.teruid.com )是一家专注而深入的界面设计公司Qؓ(f)期望卓越的国内外企业提供卓越?a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计?a href="/BS.html" target="_blank" rel="noopener">B端界面设?/a>?a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设?/a>?a href="/scjm.html" target="_blank" rel="noopener">APP界面设计?a href="/icon.html" target="_blank" rel="noopener">图标定制?a href="/Design.html" target="_blank" rel="noopener">用户体验设计?a href="/bz-bh.html" target="_blank" rel="noopener">交互设计?a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询?a href="/web.html" target="_blank" rel="noopener">高端|站设计?a href="/xz.html" target="_blank" rel="noopener">q面设计Q以?qing)相关的软g开发服务，咨询?sh)话Q?1063334945。我们徏立了(jin)一个微信群Q每天分享国内外优秀的设计，有兴请加入一起学?fn)成长，咨询及(qing)进请加蓝助微信ben_lanlan?/p>

image.png

关键词：(x)UI咨询?a href="/index.html" target="_blank" rel="noopener">UI设计服务公司?a href="/index.html" target="_blank" rel="noopener">软g界面设计公司、界面设计公司?/a>UI设计公司?a href="/index.html" target="_blank" rel="noopener">UI交互设计公司?a href="/index.html" target="_blank" rel="noopener">数据可视化设计公?/a>?a href="/index.html" target="_blank" rel="noopener">用户体验公司?a href="/index.html" target="_blank" rel="noopener">高端|站设计公司?a href="/bank.html" target="_blank" rel="noopener">银行金融软gUI界面设计?a href="/monitor.html" target="_blank" rel="noopener">能源?qing)监控Y?/a>UI界面设计?a href="/weather.html" target="_blank" rel="noopener">气象行业UI界面设计?a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设?/a>?a href="/gis.html" target="_blank" rel="noopener">地理信息pȝGIS UI界面设计?a href="/aerospace.html" target="_blank" rel="noopener">航天军工软gUI界面设计?a href="/medicalyl.html" target="_blank" rel="noopener">ȝ行业软gUI界面设计?a href="/education.html" target="_blank" rel="noopener">教育行业软gUI界面设计?a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计?/a>软gqt开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gwpf开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gvue开?/a>

]]> Mon, 21 Oct 2024 02:57:00 +0000 鹤鹤 http://www.teruid.com/blog/post-11763.html 用户体验一致性思?/title> <link>http://www.teruid.com/blog/post-11762.html</link> <description><![CDATA[<p><a href="/blog/content/uploadfile/202410/d2b51729477112.png" target="_blank" rel="noopener"></p> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="">前言</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">在团队内部，我们已确立了(jin)一套设计规范，在日帔R目中使用设计规范输出变的高效、统一。然而，在实际操作中Q不可避免地?x)遇C些特D情况：(x)某些客户提出的个性化需求ƈ不完全契合既定的设计规范,q些?j)我们不得不在保持设计一致性的基础上进行灵z调整。因此，深入反思ƈ优化一致性原则的应用{略昑־ؓ(f)重要。我们需要探索如何在坚守设计规范核心(j)_的同Ӟ灉|应对多变的需求，保设计既保持统一和谐Q又能满特定场景下的独牚w求，从而实现用户体验与品牌价值的双重提升?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 iTjItO pictureBox"> </div> </div> </section> </div> <p></a></p> <p><a href="/blog/content/uploadfile/202410/d2b51729477112.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/thum-d2b51729477112.png" alt="image.png"></a></p> <p>在UI/UX设计中，雅各?middot;尔的十条可用性原则中Q一致性（Consistency and standardsQ位列第四。这一原则在界面和交互设计上需要遵循既定的规则Q无论是在应用内部还是跨q_之间。背后的?j)理学原?mdash;—重复定律Q强调了(jin)信息重复对于巩固记忆的重要性。正如赫?dng)?middot;艑֮斯通过“遗忘曲线”所揭示的，信息的有效保留离不开重复接触。一致性的应用正是q一原理的生动实践，通过不断重复l一的设计元素与模式Q强化用户对产品的认知与记忆Q从而提升整体的用户满意度与忠诚度?/p> <p><a href="/blog/content/uploadfile/202410/d2b51729477158.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/thum-d2b51729477158.png" alt="image.png"></a></p> <p><a href="/blog/content/uploadfile/202410/d2b51729477179.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/thum-d2b51729477179.png" alt="image.png"></a></p> <div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="bold ">用户?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">1、用户学?fn)曲U：(x)</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">一致的UI/UX设计可以降低用户的学?fn)曲Uѝ当用户在应用程序或|站中遇C致的元素、布局和交互方式时Q他们可以快速理解ƈ准确预测如何与界面进行交互。这减少?jin)用L(fng)h和困惑，提高?jin)他们的效率和满意度?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">2、提升可用性：(x)</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">一致性用户界面更加易于使用。当用户在不同的面或功能之间找到相似的设计元素和交互模式时Q他们可以轻村֜已有的知识和经验应用于新的情境中。这U一致性帮助用户快速完成Q务，减少错误和迷失，提供更好的导航和畅的体验?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">3、品牌认可度Q?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">一致的UI/UX设计有助于树(wi)立品牌Ş象和增强品牌认可度。通过在不同的渠道和^C保持一致的设计元素、标识和视觉风格Q品牌可以徏立v独特而可识别的Ş象。用户在不同的触点上都能感受到品牌的一致性，从而增加品牌的信Q和忠诚度?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">4、用h意度Q?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">一致性直接媄(jing)响用L(fng)满意度。当用户在用应用程序或|站时感受到一致的设计和交互方式时Q他们会(x)感到更加舒适和自信。一致性传递了(jin)专业和质量的信号Q让用户感到被关注和重视。这U积极的用户体验有助于提升用h意度Qƈ?j)他们持箋使用和推荐你的品或服务?/div> </div> <p><a href="/blog/content/uploadfile/202410/d2b51729477218.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/thum-d2b51729477218.png" alt="image.png"></a></p> <div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="bold ">产研?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">1. 降低设计成本Q提高开发效?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">无论是设计还是开发，复用已有的组件资源，保持界面的一致性可以有效地减少设计的投入，避免不必要的设计分歧炏V?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">而在开发阶D，可以避免重复造轮子，提高开发的效率Q保证落地效果，也可以减上U前设计走查、测试的工作量?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">2. 形成一致的设计风格</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">Ҏ(gu)原子设计理论Q通过原子lg的一致性，可以构徏出统一的界面框架、布局QŞ成统一风格和用户交互认知，从而更好地保证用户体验质量?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <p><a href="/blog/content/uploadfile/202410/d2b51729477251.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/thum-d2b51729477251.png" alt="image.png"></a></p> <div> <div id="a0qy1r06wz" class="header-2 align-{}"> <div id="a0qy1r06wz" class="">色彩</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">色彩作ؓ(f)一U兼L(fng)理属性与感官享受的复杂现象，其本质在于光波在Z视网膜上的特定L长被反射或吸收后Q所引发的视觉感知结果。在设计领域Q色彩的选择与运用不仅是视觉艺术的展玎ͼ更是品牌w䆾与个性的直接体现。诸如饿?jin)么标志性的蓝色、美团鲜明的黄色、以?qing)京东热情的U色{，q些品牌专属色彩不仅构成?jin)品牌识别系l的重要l成部分Q还通过光度的一致性，在视觉层面上构徏起强烈的品牌认知Q营造出l一和谐的视觉体验?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">色彩的一致性策略在品牌塑造中发挥着不可估量的作用，它能够有效增强品牌的记忆度与辨识度，深化品牌形象在消费者心(j)中的烙印Q进而提升品的?jng)场吸引力和用户忠诚度。同Ӟq种{略q促(j)q了(jin)设计元素间的和谐共存Q包括按钮、图标、字体、标{、背景、以?qing)关键视觉元素如Banner{，均能在统一的色彩体pM实现视觉上的q诏与流畅，极大地提升了(jin)产品的可用性、无障碍性，以及(qing)用户在用过E中的整体满意度与交互体验?/div> <div id="a0qy1r06wz" class=""> <p><a href="/blog/content/uploadfile/202410/d2b51729477286.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/thum-d2b51729477286.png" alt="image.png"></a></p> <div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="">字体</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">字体作ؓ(f)设计中不可或~的核心(j)要素Q其独特性在于能够精准地塑造文字的视觉形象Q涵盖Ş状、尺寸、粗l、字间距{多l度特征。这些特征共同构Z(jin)一U独特的文字风格Q不仅承载着信息的传递功能，更在无Ş中引导着用户的视觉流E，影响着信息的接收与理解深度。因此，在设计过E中Q合理选择与应用字体显得尤为关键?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">字体cd的多h，如有衬线字体与无衬线字体的对比，不仅体现?jin)风g的差异，q隐含了(jin)不同的阅M验与情感表达。字体的_细变化Q如l体、常规、粗体等Q更是能够强调文本的重要性层U，增强信息的层ơ感与可L。此外，字重的调整也是塑造视觉焦炏V引DU流动的有效手段Q对于提升设计的整体观度和信息传达效率h不可觑的作用?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">然而，在实际的开发与实现q程中，若不加节制地使用多种字体Q不仅会(x)显著增加面的加载时_(d)影响用户体验的流畅性，q可能因风格不统一而导致页面显得杂乱无章，破坏整体设计的和谐感。因此，制定一套统一、规范的字体使用{略昑־ؓ(f)重要。这不仅有助于提升开发效率，减少后期更新q代的复杂度Q还能有效避免资源浪费，保设计作品在视觉上的一致性与专业性?/div> </div> </div> </div> </div> </div> </div> </div> <p><a href="/blog/content/uploadfile/202410/d2b51729477317.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/thum-d2b51729477317.png" alt="image.png"></a></p> <div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="">图标</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">图标作ؓ(f)用户界面设计中至关重要的元素Q风格直接媄(jing)响到用户的用体验与对品的整体印象。图标以其简z、直观且富有表现力的特点Q在快速传达信息、引导用h作方面发挥着不可替代的作用。在设计中，图标的设计与应用更是需要精?j)考量Q以保其既能够准确传达信息Q又能够与整体设计风g持一_(d)从而营造出专业、和谐且易于使用的界面环境?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">设计中视觉上保持l一包括图标的大、Ş状、色彩以?qing)设计风格等多个斚wQ能够增强用L(fng)认知q诏性，降低学习(fn)成本Q提升用效率。相反，如果图标风格hQ不仅会(x)让界面显得杂乱无章，q会(x)l用户带来困惑和不安Q进而媄(jing)响其对品专业性和安全性的信Q?/div> </div> <p><a href="/blog/content/uploadfile/202410/d2b51729477360.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/thum-d2b51729477360.png" alt="image.png"></a></p> <div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="">按钮</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">按钮设计应统一于项目风|无论是圆形、矩形、圆角矩形还是特定ŞӞ保持一致性是关键。统一的按钮样式不仅嘪显专业性，q能增强用户信QQ确保体验连贯。过多变化的按钮样式?x)扰qL(fng)面，降低操作直观性，甚至让用戯以ؓ(f)自己已离开应用环境。因此，_ֿ(j)设计的统一按钮样式Ҏ(gu)升用户体验至关重要?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="">排版</div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">设计中的排版一致性对于构建高效、用户友好的界面臛_重要。一致的排版不仅能够让用户快速适应和理解界面的整体l构Q大q降低学?fn)成本，q能在用户心(j)中激发强烈的归属感和安全感。这U熟(zhn)感使得内容更加易读Q用戯够自然地依照既定的视觉动U流畅地览面Q迅速定位ƈ获取所需信息Q从而显著提升信息获取的效率。因此，在设计过E中Q注重ƈl护排版的一致性，是提升用户体验和界面有效性的重要{略之一?/div> <div id="a0qy1r06wz" class=""> <p><a href="/blog/content/uploadfile/202410/d2b51729477473.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/thum-d2b51729477473.png" alt="image.png"></a></p> <div> <div id="a0qy1r06wz" class="header-2 align-{}"> <div id="a0qy1r06wz" class="">操作程的一致?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">标准化流E?/div> <div id="a0qy1r06wz" class="">Q确保用户在执行怼dӞ如购买商品、搜索信息或提交表单{，能够遵@相同的操作流E。这有助于用户快速适应q效完成Q务?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">逻辑清晰</div> <div id="a0qy1r06wz" class="">Q操作流E的每一步都应符合用L(fng)认知?fn)惯和行为逻辑Q避免让用户感到困惑或不知所措?/div> </div> <div> <section class="sc-jqn0up-2 fzdoPQ revealWorkWrap"> <div id="a0qy1r06wz" class="photoInformationContent"> <div id="a0qy1r06wz" class="sc-1gq6zpr-5 fMnJFF pictureBox"> <div id="a0qy1r06wz" class="imgbox"> <p><a href="/blog/content/uploadfile/202410/d2b51729477505.png" target="_blank" rel="noopener"><img src="/blog/content/uploadfile/202410/thum-d2b51729477505.png" alt="image.png"></a></p> <div> <div id="a0qy1r06wz" class="header-2 align-{}"> <div id="a0qy1r06wz" class="">交互元素的一致?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">按钮和控?/div> <div id="a0qy1r06wz" class="">Q确保按钮、输入框、下拉菜单等交互元素的样式、位|和操作方式在整个应用或|站中保持一致。例如，所有按钮都应具有相同的视觉风格和触发机制?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="bold ">D和菜?/div> <div id="a0qy1r06wz" class="">Q导航栏和菜单的设计也应保持一_(d)使用戯够轻村֜在不同页面或功能之间切换?/div> <div id="a0qy1r06wz" class=""> <div id="a0qy1r06wz" class="">                                        <div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="">重要的设计原?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">「一致性」作计领域中的一基性原则，光要性不a而喻。它不仅计过E提供了(jin)E_的基矻Iq显著促(j)q了(jin)开发效率与产品体验的全面升U。在设计实践中，一致性确保了(jin)界面元素的统一性和q诏性，使得用户能够q速熟(zhn)ƈ掌握产品的用方式，降低?jin)学习(fn)成本，增强了(jin)操作的直观性和便捷性?/div> </div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="">灉|变通?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">一致性原则ƈ非一成不变的强制规定Q而是需要根据品的具体定位和市(jng)场环境进行灵zd通的应用。不同的产品可能面向不同的用L(fng)体，拥有独特的品牌调性和功能需求，因此在追求一致性的同时Q也需充分考虑q些因素Q确保设计既W合品牌特色Q又能满用L(fng)实际需求?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> </div> <div id="a0qy1r06wz" class="header-2 align-"> <div id="a0qy1r06wz" class="">提升用户体验是h(hun)值所?/div> </div> <div id="a0qy1r06wz" class="paragraph align- undefined"> <div id="a0qy1r06wz" class="">一致性的真正价值在于其能够显著提升用户体验。通过遵@用户的认知和?fn)惯Q设计师能够创造出更加自然、流畅的操作程Q用户在n受品功能的同时Q也能感受到品牌所传递的舒适与和谐。因此，在追求设计一致性的q程中，我们始终应以Zؓ(f)本，用L(fng)体验和感受放在首位。徏设有兼容性和长期价值的的一致性框Ӟ在一致性中做到有用户h(hun)值的设计Q是设计师应该不断探索的命题?/div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div> </div> </div> </div> </div> </div>]]></description> <pubDate>Mon, 21 Oct 2024 02:30:45 +0000</pubDate> <dc:creator>鹤鹤</dc:creator> <guid>http://www.teruid.com/blog/post-11762.html</guid> </item> <item> <title>解决设计困惑—?B端全ȝ色彩pȝ http://www.teruid.com/blog/post-11761.html image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

颜色模式调整Qhttp://www.workwithcolor.com/color-converter-01.htm#about-hex
Ҏ(gu)度检?Color.review WCAG2.1Q?https://color.review/

image.png

image.png

image.png

image.png

image.png

蓝蓝设计(www.teruid.com )是一家专注而深入的界面设计公司Qؓ(f)期望卓越的国内外企业提供卓越?a href="/dp.html" target="_blank" rel="noopener">大数据可视化界面设计?a href="/BS.html" target="_blank" rel="noopener">B端界面设?/a>?a href="/csjm.html" target="_blank" rel="noopener">桌面端界面设?/a>?a href="/scjm.html" target="_blank" rel="noopener">APP界面设计?a href="/icon.html" target="_blank" rel="noopener">图标定制?a href="/Design.html" target="_blank" rel="noopener">用户体验设计?a href="/bz-bh.html" target="_blank" rel="noopener">交互设计?a href="/bz-yt.html" target="_blank" rel="noopener">UI咨询?a href="/web.html" target="_blank" rel="noopener">高端|站设计?a href="/xz.html" target="_blank" rel="noopener">q面设计Q以?qing)相关的软g开发服务，咨询?sh)话Q?1063334945。我们徏立了(jin)一个微信群Q每天分享国内外优秀的设计，有兴请加入一起学?fn)成长，咨询及(qing)进请加蓝助微信ben_lanlan?/p>

image.png

关键词：(x)UI咨询?a href="/index.html" target="_blank" rel="noopener">UI设计服务公司?a href="/index.html" target="_blank" rel="noopener">软g界面设计公司、界面设计公司?/a>UI设计公司?a href="/index.html" target="_blank" rel="noopener">UI交互设计公司?a href="/index.html" target="_blank" rel="noopener">数据可视化设计公?/a>?a href="/index.html" target="_blank" rel="noopener">用户体验公司?a href="/index.html" target="_blank" rel="noopener">高端|站设计公司?a href="/bank.html" target="_blank" rel="noopener">银行金融软gUI界面设计?a href="/monitor.html" target="_blank" rel="noopener">能源?qing)监控Y?/a>UI界面设计?a href="/weather.html" target="_blank" rel="noopener">气象行业UI界面设计?a href="/traffic.html" target="_blank" rel="noopener">轨道交通界面设?/a>?a href="/gis.html" target="_blank" rel="noopener">地理信息pȝGIS UI界面设计?a href="/aerospace.html" target="_blank" rel="noopener">航天军工软gUI界面设计?a href="/medicalyl.html" target="_blank" rel="noopener">ȝ行业软gUI界面设计?a href="/education.html" target="_blank" rel="noopener">教育行业软gUI界面设计?a href="/enterprise.html" target="_blank" rel="noopener">企业信息化UI界面设计?/a>软gqt开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gwpf开?/a>?a href="/Work.html" target="_blank" rel="noopener">软gvue开?/a>

 

]]> Mon, 21 Oct 2024 02:07:47 +0000 鹤鹤 http://www.teruid.com/blog/post-11761.html