国产又粗又黄又爽的大片,无人在线观看免费高清视频播放 ,成人片在线播放 http://www.gerard.com.cn/blog/ zh-cn www.emlog.net Z么你的设计L觉不舒服Q很可能是视觉^衡没有做?/title> <link>http://www.gerard.com.cn/blog/post-13198.html</link> <description><![CDATA[<blockquote> <p>在日常场景中Q画面^衡是潜在的一个重要媄响因素，合理且有吸引力的视觉q设计Q可以让用户更加舒心地接受ƈ停留在用页面或者相应场景中。那么，视觉qI竟应该如何做好Q本文章里Q作者针对视觉^衡这件事儿进行了分析ȝQ一h看一下?/p> </blockquote> <p>画面q是一个很基本的设计理念，但很多朋友在qx的作品中Ҏ忽视q个炏V彩云在星球中帮不少朋友看过作品集，发现最多的问题之一是画面q没做好，我觉得只要把q个基本问题解决了，作品p提升一个档ơ?/p> <p>用户本能C对不q的设计感到厌烦，如何在画面中创造一个有吸引力的qQ是本篇文章要分享的内容?/p> <p><img class="rich_pages wxw-img aligncenter" title="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? src="https://image.woshipm.com/wp-files/2022/12/RYFFgws04C2lKUcAx0Al.png" alt="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? width="823" height="426" loading="lazy" data-action="zoom"></p> <p>Illustration: Outcrowd</p> <p><strong>q是一个作品中最重要的元素之一</strong>。^衡中的对U关p能够创造^衡与和谐Q这U^衡状态直观上能够让用h到舒适?/p> <p><strong>Z是垂直对U的Q我们的视觉接收也与之相对应?/strong>我们喜欢物体在垂直u上保持^衡，直觉上L們֐于^衡一U力量与另一U力量?/p> <p><img class="rich_pages wxw-img aligncenter" title="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? src="https://image.woshipm.com/wp-files/2022/12/nRG7m7j0VD50c7IFmfeK.png" alt="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? width="819" height="426" loading="lazy" data-action="zoom"></p> <p>Illustration: Outcrowd</p> <p><strong>在设计环境中Q^衡是Z元素的视觉重量，而视觉重量是用户对图像的注意力范围?/strong>如果画面是^衡的Q用户会下意识地感到舒适。画面^衡被认ؓ是其元素在视觉上的比例安排?/p> <p>如何让一个页面看hqQ?/p> <h2 id="toc-1" class="jltoc--item">一、对Uͼ静态）q</h2> <p>最常见的^衡例子就是用对U?/p> <p><strong>在潜意识层面上，对称的视觉能让h愉悦Q能让画面看h和谐有条理?/strong>对称的^衡是通过在水qx垂直的中轴两侧均匀攄元素来创造的。也是_画面中间假想U的两边实际上是彼此的镜像。有些h认ؓ对称的^衡是无聊和可预测的，但它l受住了旉的考验Q到现在仍然是在面上创造舒适和E_感觉的最好方法之一?/p> <p><img class="rich_pages wxw-img aligncenter" title="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? src="https://image.woshipm.com/wp-files/2022/12/lTAjmFQKdCe8iHAxY2vQ.png" alt="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? width="827" height="428" loading="lazy" data-action="zoom"></p> <p>Illustration: Outcrowd</p> <h2 id="toc-2" class="jltoc--item">二、不对称Q动态）q</h2> <p>两侧重量不相同的元素构成h不对U^衡?/p> <p><strong>动态^衡通常会比静态^衡更有设计感Q让画面不至于呆?/strong>?strong>在缺乏^衡的情况下，我们的目光会条g反射性地开始寻扑^衡点Q?/strong>q是一个很好的ZQ?strong>可以注意力吸引到页面上可能q没被注意到的部分?/strong>面重点应该放在这?mdash;—抓住用户的注意力Q就像品的生命U一栗?/p> <p><img class="rich_pages wxw-img aligncenter" title="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? src="https://image.woshipm.com/wp-files/2022/12/v7bw5Ao7Or2S2a63XpHQ.png" alt="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? width="821" height="616" loading="lazy" data-action="zoom"></p> <p>Landing page — Asian Cuisine</p> <p><strong>比如一般这样去“配重”的元素会是一个按钮或者标题?/strong></p> <p>重要信息Q或者是行动按钮Q就是我们需要去配重的h值元素?/p> <p>不对U的现象严重，用户px出其中的原因Q检查配重）。h们本能地比^时更仔细地研I这L画面。然而，q里需要注意分寸，q于古怪的构图q不L能被很好的感知?/p> <h2 id="toc-3" class="jltoc--item">三、径向^?/h2> <p><img class="rich_pages wxw-img aligncenter" title="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? src="https://image.woshipm.com/wp-files/2022/12/uNhnXFvzkIO6HtsjW9Kl.png" alt="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? width="831" height="434" loading="lazy" data-action="zoom"></p> <p>Illustration: Outcrowd</p> <p>q中的另一U类型，特点是视觉元素从一个共同的中心Ҏ出来。径向^衡在设计中不常用。它的优ҎQ注意力很容易找到ƈ保持一个焦?mdash;—恰好在它的中心Q这通常是构图中最引h注目的部分?/p> <h2 id="toc-4" class="jltoc--item">四、马赛克q</h2> <p>q是一U^衡中的؜乱，像 Jackson Pollock的画作一栗这Ll成没有H出的焦点，所有的元素都有同样的视觉重量。没有层ơ，乍一看，画面像视觉噪音Q但所有元素又怺匚wQŞ成一个连贯的整体?/p> <p>Q彩云注Q这是一U比较高阶的设计q处理手法Q用的好可以让画面非常具有设计感Q但把握不好的话Q就会非常凌乱。所以，我们qx能看到很多大师的作品看似一些简单图形的使用Q但是好看Q轮到自p计的时候就会发玎ͼ简单的设计g难设计好。）</p> <p><img class="rich_pages wxw-img aligncenter" title="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? src="https://image.woshipm.com/wp-files/2022/12/9LqpC5KJ4akiEJM2G2mu.png" alt="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? width="831" height="430" loading="lazy" data-action="zoom"></p> <p>Illustration: Outcrowd</p> <h2 id="toc-5" class="jltoc--item">五、视觉^衡的U密Q?/h2> <p>当谈到构图中的重量^衡时Q他们经常将其与物理世界中的重量q行比较Q重力、杠杆、重量和支点?strong>我们的大脑和眼睛感知q的方式非常类g力学定律?/strong>我们很容易把一q画惌成一个在某一点上q的^面，像一个天q뀂如果我们在囑փ的边~添加一个元素，它就会失d^衡，有必要修复它?strong>元素是否是一l色调、颜色还是点q不重要Q目标是扑ֈ囑փ的视?ldquo;重心”Q即囑փ的重心?/strong></p> <p>不幸的是Q没有精的Ҏ来确定一个物体的视觉质量。一般来_设计师依赖于他们的直觉。不q，下面q些有用的观察可能会有所帮助Q?/p> <p><strong>1Q大?/strong></p> <p>大的物体L更重?/p> <p><strong>2QŞ?/strong></p> <p>不规则Ş状比规则形状的元素轻?/p> <p><strong>3Q颜?/strong></p> <p>暖色比冷色重?/p> <p><img class="rich_pages wxw-img aligncenter" title="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? src="https://image.woshipm.com/wp-files/2022/12/5zYXylBRwfkQJEyun8FH.png" alt="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? width="822" height="396" loading="lazy" data-action="zoom"></p> <p><strong>4Q色?/strong></p> <p>p物体比浅色物体重?/p> <p><strong>5Q图?/strong></p> <p>带有图案的元素显得更重?/p> <p><strong>6Q?D</strong></p> <p>带有U理贴图的元素显得更重?/p> <p><img class="rich_pages wxw-img aligncenter" title="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? src="https://image.woshipm.com/wp-files/2022/12/ibJCFZ9FnorC3ktPdcmR.png" alt="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? width="822" height="396" loading="lazy" data-action="zoom"></p> <p><strong>7Q位|?/strong></p> <p>物体M心越q，其视觉重量越大?/p> <p><strong>8Q方?/strong></p> <p>垂直元素比水q_素更重?/p> <p><strong>9Q密?/strong></p> <p>许多元素可以抵消一个大元素?/p> <p><img class="rich_pages wxw-img aligncenter" title="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? src="https://image.woshipm.com/wp-files/2022/12/3n2HgSdUiyXWC1uXb79L.png" alt="Z么你的设计L觉不舒服Q很可能是视觉^衡没有做? width="822" height="396" loading="lazy" data-action="zoom"></p> <p><strong>10Q内部复杂?/strong></p> <p>物体内部复杂，视觉重量更大?/p> <p><strong>11Q填充空间关p?/strong></p> <p>正ŞI间比负形空间更重?/p> <p><strong>12Q对重量的感?/strong></p> <p>照片中的哑铃看v来会比一只钢W更重?/p> <h2 id="toc-6" class="jltoc--item">六、ȝ</h2> <p>当用对U时Q作品看h可以更加的专业和有科学性。其中，静态对U的作品昑־更加有专业精和严肃的；而动态对U的设计Ҏ则能吸引用户的兴，表达Z性和创造力Q能让用户集中注意力?/p> <div id="49mkcunr" class="article--copyright"> <p>原文作者：Erik MessakiQ本文翻译已获得作者的正式授权Q?/p> <p>译者：彩云SkyQh人都是品经理专栏作Ӟ腾讯高视觉设计师?/p> <p>本文由@彩云sky 译发布于h人都是品经理，未经许可Q禁止{?/p> <p>题图来自 UnsplashQ基?CC0 协议</p> <p>该文观点仅代表作者本人，Zh都是产品l理q_仅提供信息存储空间服务?/p> <p><img src="/blog/content/uploadfile/202411/8ad61732265770.png" alt="" width="1200" height="155"></p> <p>C妙微(www.gerard.com.cn )是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、^面设计，以及相关的Y件开发服务，咨询电话Q?1063334945。我们徏立了一个微信群Q每天分享国内外优秀的设计，有兴请加入一起学习成长，咨询及进请加蓝助微信ben_lanlan</p> </div>]]></description> <pubDate>Mon, 07 Apr 2025 03:49:57 +0000</pubDate> <dc:creator>天宇</dc:creator> <guid>http://www.gerard.com.cn/blog/post-13198.html</guid> </item> <item> <title>UI配图不够有设计感Q可以试试这10个优化办?/title> <link>http://www.gerard.com.cn/blog/post-13197.html</link> <description><![CDATA[<blockquote> <p>在界面设计中Q好看且和谐的配图会让用h意识里更Ҏ接受、或者更愿意停留于当前页面，那么Q如何才能把配图做好Q让界面看v来更加高U和耐看Q本文章里Q作者ȝ?0个优化UI配图的小ҎQ一h看一下?/p> </blockquote> <p><img class="size-full wp-image-5705861 aligncenter" src="https://image.woshipm.com/wp-files/2022/12/oQP4W9c0fLCRWQwPd6TN.jpg" alt="" width="900" height="420" loading="lazy" data-action="zoom"></p> <p>“配图用的好，作品差不?rdquo;QUI中配囄好坏直接影响到界面的品质感。它非常重要但却l常Ҏ被忽视，要想把配囑ց好其实也是有规律可@的，今天的文章就ȝ配图使用?0个优UҎQ相信看完一定会有所收获。之前我也写q另一如何选好配图的文章《如何选到设计感强的配图，我ȝ了这7个实用方法》，同时也分享了很多高质量的图片素材资源和|站Q千万别错过?/p> <p>在欣赏了Behance上数百个高质量的目和众多Dribbble优质作品后，我ȝZ一套可以将囄与UIl合提升设计感的ҎQ可以让你的作品立即看v来更加专业?/p> <p>本文的灵感来源于我刚开始做UI时所遇到的困难。和许多其他设计师一P当我在Dribbble和Behance上浏览别人的作品获得灉|Ӟ面对q些量作品时常会感到迷失和不知所措。就像透过万花{看到各U花哨的图案一P当把万花{挪开的时候这些图案就消失了，q福的感觉是短暂的。当我自己开始设计作品时Q我仍然不知道该怎么做?/p> <p>随着旉的推U，我意识到我ƈ没有从日常的作品ƣ赏和搜集中思考和学习Q就只是漫无目的地欣赏了其他设计师的作品?/p> <p>渐渐地我发现了一U欣赏其他设计师作品的好ҎQ我会有意识地去ȝ记录下他们用的x和技巧，然后应用到我的日常工作。在本文中，我很惛_享一些其他设计师用来处理配图的方法，q些Ҏ可以使作品看h更加专业?/p> <h2 id="toc-1" class="jltoc--item">一、用图片作?/h2> <p>Q彩云说Q这里的囄选择要突出核心内容且一定要高质量，不要选择杂ؕ无章或与主题无关的低质量囄。）</p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/oJw5ycntpqlaW2Zkf3UQ.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="773" height="580" loading="lazy" data-action="zoom"></p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/4gaUqO71LJcHLjPZGECO.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="770" height="579" loading="lazy" data-action="zoom"></p> <h2 id="toc-2" class="jltoc--item">二、将囄于背景进行融?/h2> <p>Q彩云说Q结合页面表N要，选择合适的配图q做融合或出界的设计Q会让画面极具吸引力和强烈的设计感。）</p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/gunqDgh1y4M5UdEq46Js.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="767" height="575" loading="lazy" data-action="zoom"></p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/NI8pt8VS5Vi4YgmnCty4.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="771" height="579" loading="lazy" data-action="zoom"></p> <h2 id="toc-3" class="jltoc--item">三、将高质量的囄紧密的放在一P不留M间距</h2> <p>Q彩云注Q当画面主要以高质量囄吸引用户注意Ӟ可能的利用更大展示面积Q这样会昑־更加高和有视觉冲击力。）</p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/rLDBxlRxuhxG0FJ7s8yj.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="773" height="437" loading="lazy" data-action="zoom"></p> <h2 id="toc-4" class="jltoc--item">四、在囄下方d色块</h2> <p>Q彩云注Q这里的色块要注意跟囄的主色调保持相近Q可以直接吸囄上的颜色然后找找邻近色就好了Q色环上30°区间内的颜色比较和谐。）</p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/O1APZ3jl5u2qZRuxNoVL.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="770" height="468" loading="lazy" data-action="zoom"></p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/xJF8BL7Pf6rV85XSc2cJ.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="770" height="519" loading="lazy" data-action="zoom"></p> <h2 id="toc-5" class="jltoc--item">五、在囄下方/上方增加图案或Ş?/h2> <p>Q彩云注Q这里的形状不要太过于复杂，用一些基本图形就可以Q比如圆炏V方块矩形之cȝQ增强画面的形式感。）</p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/aM5KJqZ4JlOWK7PGdobA.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="729" height="422" loading="lazy" data-action="zoom"></p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/t69OhxCJBsKjcd7daS8R.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="771" height="409" loading="lazy" data-action="zoom"></p> <h2 id="toc-6" class="jltoc--item">六、在囄下方或上方增加文字、图案或不规则Ş?/h2> <p>Q彩云注Q这里的文字、图案或不规则Ş状跟上面的技巧类|都是起到装饰的作用，但文字的话有时候还要注意识别性，比如文字比较紧凑的时候。图案或形状更多的是起到视觉引导的作用。）</p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/Zxi5HJxNwXjrCatlCKYl.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="774" height="583" loading="lazy" data-action="zoom"></p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/YiNpPlYxkGUqXiINkaEU.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="774" height="583" loading="lazy" data-action="zoom"></p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/o3MfuJq7Jq612kZ9tpBw.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="779" height="584" loading="lazy" data-action="zoom"></p> <h2 id="toc-7" class="jltoc--item">七、将囄剪切到文字或形状?/h2> <p>Q彩云注Q这个很好理解，是以文字或形状作ؓ遮罩Q增加画面的设计感，文字量选择_体。）</p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/wSFgY57rf7Sfnsx32oAG.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" data-action="zoom"></p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/s0hLL2UoRuuulRfcWPp4.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="768" height="577" loading="lazy" data-action="zoom"></p> <h2 id="toc-8" class="jltoc--item">八、在囄周围增加一个非常窄的边?/h2> <p>Q彩云注Q这个技巧可能跟W?条有些冲H，其实q?个方法都是可以的Q要Ҏ面具体的排版情늁zM用。）</p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/9Ujezz0HhZhKE0QHsXtl.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="777" height="581" loading="lazy" data-action="zoom"></p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/H4ZZC2DbSdIQ7GxhZk8W.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="757" height="570" loading="lazy" data-action="zoom"></p> <h2 id="toc-9" class="jltoc--item">八、在囄上增加颜色层</h2> <p>Q彩云注Q这个技巧也比较Ҏ理解Q一般会选择饱和度较高的颜色应用在充满活力的面上，增加画面的冲d。）</p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/cl3tmlZkwAtV9IF94KIQ.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="767" height="576" loading="lazy" data-action="zoom"></p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/qKg9NIMeZCPFa7gny1qR.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="770" height="585" loading="lazy" data-action="zoom"></p> <h2 id="toc-10" class="jltoc--item">九、在彩色叠加到图片中的一部分?/h2> <p>Q彩云注Q这个技巧跟上面的有些类|只不q是以小面积叠加的Ş式，颜色一般选择品牌色或主题Ԍ与背景尽量有较大反差会更加容易出彩。）</p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/ycOVLMeAwuerrpXosnlU.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="780" height="414" loading="lazy" data-action="zoom"></p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/pzcQOZGC1i6PNwhE1wex.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="770" height="575" loading="lazy" data-action="zoom"></p> <h2 id="toc-11" class="jltoc--item">十、将囄剪切成其他Ş?/h2> <p>Q彩云注Q这个方法有一炚w要注意的是剪切的Ş状不要过于复杂，一般用基础囑Ş好。）</p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/ycYJid33qENekb644jGj.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="775" height="581" loading="lazy" data-action="zoom"></p> <p><img class="rich_pages wxw-img aligncenter" title="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" src="https://image.woshipm.com/wp-files/2022/12/tM4DkeZPkSQN4dOZTuqz.png" alt="ȝ说我的UI配图不够有设计感Q后面教了我10个优化办法，学到了！" width="761" height="572" loading="lazy" data-action="zoom"></p> <p>以上Q就是我ȝ的一些可以用来操作UI囄的实用方法，q些Ҏ可以使得作品变得更加有视觉感也更加专业?/p> <h3>为我投票</h3> <div id="49mkcunr" class="article--copyright"> <p>原文作者：Victor AdeyemoQ本文翻译已获得作者的正式授权Q?/p> <p>译者：彩云SkyQh人都是品经理专栏作Ӟ腾讯高视觉设计师?/p> <p>本文由@彩云sky 译发布于h人都是品经理，未经许可Q禁止{?/p> <p>题图来自 UnsplashQ基?CC0 协议</p> <p>该文观点仅代表作者本人，Zh都是产品l理q_仅提供信息存储空间服务?/p> <p><img src="/blog/content/uploadfile/202411/8ad61732265770.png" alt="" width="1200" height="155"></p> <p>C妙微(www.gerard.com.cn )是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、^面设计，以及相关的Y件开发服务，咨询电话Q?1063334945。我们徏立了一个微信群Q每天分享国内外优秀的设计，有兴请加入一起学习成长，咨询及进请加蓝助微信ben_lanlan</p> </div>]]></description> <pubDate>Mon, 07 Apr 2025 03:48:51 +0000</pubDate> <dc:creator>天宇</dc:creator> <guid>http://www.gerard.com.cn/blog/post-13197.html</guid> </item> <item> <title>感设计的重要性：探烦用户体验的关键因?/title> <link>http://www.gerard.com.cn/blog/post-13196.html</link> <description><![CDATA[<blockquote> <p>设计是通过感和逻辑来提升用户体验，提高企业满意度。本文探讨美感设计在用户体验中的作用Q从五个l度分别感设计的重要性，一h看看吧?/p> </blockquote> <p>设计是通过逻辑和美感来解决Z的问题，满他们的愿望。本文将探讨感在用户体验设计中的作用，以此提高用户和企业的满意度?/p> <h2 id="toc-1" class="jltoc--item">一、ؓ什么美感对设计很重?/h2> <p><strong>数字产品的成功与否，除了其功能性能以外Q美感也扮演了至关重要的角色</strong>。在竞争日益Ȁ烈的市场Q用L选择不仅仅局限于功能是否满需求，审美愉悦和情感需求也成ؓ了媄响购买决{的关键因素。因此，设计对于产品的成功至关重要?/p> <p>随着需求层ơ的提高Qh们的选择来多样化和理性化。教育和收入水^的提高，使他们开始思考超功能的问题。此外，<strong>用户更加注重产品的美感和和谐?/strong>Q因此美学在光择中扮演着来重要的角色?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2023/04/27/6af51a38-e4bf-11ed-8c43-00163e0b5ff3.png" width="452" height="365" loading="lazy" data-action="zoom"></p> <p>马斯z金字塔Q展C需求层?/p> <p><strong>感在用户体验设计中发挥以下作用Q?/strong></p> <ul> <li>使设计变得情感化Q更W合人性；</li> <li>保持数字事物与现实世界的联系Q?/li> <li>支持使用感官Q?/li> <li>满审美需求；</li> <li>以一U风格将不同的事物结合在一P</li> <li>让品在竞争中脱颖而出?/li> </ul> <p><img class="aligncenter" src="https://image.woshipm.com/2023/04/27/d43889a8-e4bf-11ed-a00e-00163e0b5ff3.png" width="623" height="382" loading="lazy" data-action="zoom"></p> <p>创新农业服务FarmSense的网站设?/p> <p><strong>学是将设计的过厅R现在和未来q接在一L重要桥梁</strong>。当今的布局和图形基于世界文化数癑ֹ来积累的丰富遗。现代设计师和艺术家通过各种势和创新对其进行改造，创造出一个新的文化历史圈子，展示了历代最杰出艺术家的C。这正是艺术和审在设计中所发挥的作用。我们不是要重新发明轮子Q而是要让它变得更C化，以解军_下的问题?/p> <h2 id="toc-2" class="jltoc--item">二、审?可用性效?/h2> <p><strong>学可用性效应是指用h們֐于认为外观吸引h的品更加实?/strong>。即使实际上q些产品q没有更加有效或高效。这U现象被用户体验设计大师 Nielsen Norman Group 视ؓ一U重要原因，因ؓ<strong>既有吸引力又实用的界面才能真正提供良好的用户体验</strong>Q而不仅仅是功能?UI?/p> <p>?995q_日立设计中心q行了一研IӞ研究人员Masaaki Kurosu和Kaori Kashimura探究了hZ互实践中的美学吸引力和易用性。该研究试?52名研I参与者对26UATM用户界面的易用性和学吸引力进行评分。结果分析表明，审美情趣评与感知易用性之间的相关性高于审情评U与实际易用性之间的相关性。因此，该研I得出结论，<strong>无论用户试图评估pȝ的功能，M界面的美感都会对用户产生强烈的媄响?/strong></p> <p>?UX 设计中，感是一个关键因素，它对用户体验目标有着p的媄响?strong>UX 设计通常包括四个核心斚w</strong>Q?strong>外观吸引力和视觉和谐、可用性、可讉K性和效用?/strong>。这些方面综合v来，使得产品h<strong>吸引人的外观、易于操作、适用于不同能力和讑֤、能够解决问题以及让用户感到愉悦?/strong></p> <p><img class="aligncenter" src="https://image.woshipm.com/2023/04/27/402f4034-e4c0-11ed-a00e-00163e0b5ff3.png" width="660" height="432" loading="lazy" data-action="zoom"></p> <p>Flower Store 应用E序指导用户完成订购个性化花束的过E?/p> <h2 id="toc-3" class="jltoc--item">三、业务目?/h2> <p>然而，对于那些开始推出新产品或改q知名品的公司来说Q他们也必须从不同的角度考虑。他们需要思考各U胦务、{换、销售和所有其他业务运营方面的因素?/p> <p>设计学是否会对他们的商业目标生媄响呢Q当然会?strong>色彩理论和心理学、屏q上的和谐、易ȝ文本内容以及吸引人的囑փ不仅对于满用户需求非帔R要，而且对于销售和让企业获得满意度也至关重要?/strong></p> <p><img class="aligncenter" src="https://image.woshipm.com/2023/04/27/c84cec04-e4c1-11ed-836c-00163e0b5ff3.png" width="618" height="382" loading="lazy" data-action="zoom"></p> <h2 id="toc-4" class="jltoc--item">四、用户体验美学的元素</h2> <p><strong>不同的元素可以融入用L面ƈ构徏其美感，其中包括Q?/strong></p> <ul> <li>排版</li> <li>布局</li> <li>照片</li> <li>插图</li> <li>3D囑Ş</li> <li>动画</li> <li>视频</li> <li>人物</li> </ul> <p>q些要素一起Ş成了交互学Q对于积极的用户体验有着直接的媄响。另外，我们过长的句子分解为短句，以减重复，q提供改q徏议?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2023/04/27/fe3a07f2-e4c1-11ed-b766-00163e0b5ff3.png" width="555" height="469" loading="lazy" data-action="zoom"></p> <p>加密博客设计使用有限的调色板使其看v来严肃但不沉Pq呼应大报的传统布局以设|印刷媒体迁Ud数字世界的强烈美感?/p> <h2 id="toc-5" class="jltoc--item">五、一致?/h2> <p><strong>?UX 和业务的交叉点上Q一致性是实现学和可用性效果的核心</strong>。Jacob Nielsen 曾指出：<strong>“一致性是最强大的可用性原则之一Q因为当事物表现始终一致时Q用户不必担心会发生什么?/strong>”因此Qؓ了实C致性，必须保整个产品中的界面元素和交互方式始l保持一_q循统一的设计准则?/p> <p>事实上，它比交互更进一步。它q有助于建立强大的品牌。标志和品牌目、网站、应用程序、电子邮件和C交|络——产品与用L每一个接触点都应该遵循一个M理念和一套hDQƈ以一致和完整的风格包装?/p> <p><img class="aligncenter" src="https://image.woshipm.com/2023/04/27/aa4cf3ec-e4c2-11ed-836c-00163e0b5ff3.png" data-action="zoom"></p> <p>金融U技服务 Crezco的n份设计采用一致的ҎQ品牌能够通过各种沟通渠道徏立有吸引力、值得信赖和稳固的形象?/p> <p>在全球范围内Q所有设计解x案都需要回{一个关键问?mdash;—Z么？Simon SinekQ一位领袖力专家曾说q：“Z购买的不是你做的事情Q而是你ؓ什么这样做?rdquo;你所做的只是证明你的信念Q这是品和服务保持一致和鼓舞人心的原因。从“Z?rdquo;开始做出的决策决定如何与用户交流Q无论通信方式是什么。因此，您需要明您所沟通的内容Q无Z品牌的联pL什么。这样可?strong>建立信QQ品牌更加强大Q这正是学在用户体验中发挥作用的地?/strong>。此外，您应该简化长句，减少重复Qƈ提供改进以提高文本的清晰度和z性?/p> <h2 id="toc-6" class="jltoc--item">六、ȝ</h2> <p><strong>设计不仅要解军_能问题，q要考虑感与情感需?/strong>。在数字产品市场竞争Ȁ烈的今天Q美感对于品的成功非常重要。h们的需求也逐渐提高Q开始关注品的感和和谐性?strong>感在用户体验设计中的作用包括：使设计情感化Q保持数字品与现实世界的联p，支持使用感官Q满_需求，以风格将不同事物l合在一P让品在竞争中脱颖而出</strong>。用h們֐于认为外观吸引h的品更加实用，q也是良好用户体验的重要原因?/p> <div id="49mkcunr" class="article--copyright"> <p>原作者：Marina Yalanska</p> <p>本文?@唐小?译发布于h人都是品经理，未经许可Q禁止{?/p> <p>题图来自 UnsplashQ基?CC0 协议?/p> <p>该文观点仅代表作者本人，Zh都是产品l理q_仅提供信息存储空间服务?/p> <p><img src="/blog/content/uploadfile/202411/8ad61732265770.png" alt="" width="1200" height="155"></p> <p>C妙微(www.gerard.com.cn )是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、^面设计，以及相关的Y件开发服务，咨询电话Q?1063334945。我们徏立了一个微信群Q每天分享国内外优秀的设计，有兴请加入一起学习成长，咨询及进请加蓝助微信ben_lanlan</p> </div>]]></description> <pubDate>Mon, 07 Apr 2025 03:06:36 +0000</pubDate> <dc:creator>天宇</dc:creator> <guid>http://www.gerard.com.cn/blog/post-13196.html</guid> </item> <item> <title>按钮设计的心理机Ӟ打造用户喜q交互方式 http://www.gerard.com.cn/blog/post-13195.html

按钮是品中十分常见的交互元素之一Q好的按钮设计可以很大程度地提升用户体验。那么，怎么打造出W合用户需求、深受用户喜q优秀按钮Q这文章里Q作者对按钮UX设计q行了拆解分析，一h看一下?/p>

一、引a

在数字品中Q按钮是最常用的交互元素之一。一个好的按钮设计可以提高用户体验和产品的用率?/p>

本文探讨一些关于按钮UX设计的方法，包括明确按钮功能、选择合适的颜色、确定按钮大、添加标{֒描述、考虑交互方式、测试和优化{?/p>

通过l合考虑q些因素Q我们可以打造出W合用户需求的优秀按钮Q提升品的用户体验和竞争力?/p>

二、按钮的基本要素

1. 按钮的定义和功能

按钮是一U用L面元素，用于触发特定的操作或行ؓ?/p>

它可以是文本、图像或交互式元素，通常位于面的底部或剙Q以便于用户快速访问?/p>

2. 按钮的类型和分类

Ҏ不同的用途和设计风格Q按钮可以分为多U类型和分类Q例如：

  • 认按钮Q用于确认用L输入或操作，通常为绿色或蓝色?/li>
  • 取消按钮Q用于取消用L输入或操作，通常为红色或灰色?/li>
  • D按钮Q用于蟩转到其他面或页面的一部分Q通常Z拉箭头或回R键?/li>
  • 搜烦按钮Q用于在|站或应用程序中搜烦内容Q通常为放大镜图标?/li>
  • 提交按钮Q用于提交表单数据或执行其他操作Q通常?ldquo;提交”?ldquo;完成”按钮?/li>
  • 重置按钮Q用于重|表单或应用E序的设|，通常?ldquo;重置”?ldquo;恢复默认?rdquo;按钮?/li>

以上仅是一些常见的按钮cd和分c，实际上还有很多其他的cd和分cR在设计按钮Ӟ需要根据具体的场景和目的选择合适的cd和分c，q结合用户体验和产品需求进行优化?/p>

三、按钮的布局和位|?/h2>

1. 按钮的位|和大小

按钮的位|和大小对于用户体验和品可用性非帔R要。一般来_按钮应该位于用户视线的中心位|，以便于用户快速访问。同Ӟ按钮的大也应该适中Q不要过大或q小Q以免媄响用L操作?/p>

在实际设计中Q可以通过以下几种方式来确定按钮的位置和大：

  • Ҏ面布局来确定按钮的位置和大，通常按钮放|在面的中央位|，q根据页面元素的大小和间距来q行调整?/li>
  • Ҏ用户行ؓ来确定按钮的位置和大，例如Q将常用的按钮放在页面的剙或底部，以便于用户快速访问?/li>
  • Ҏ讑֤屏幕大小来确定按钮的位置和大，例如Q在Ud讑֤上，可以按钮放在屏q的底部或顶部，以便于用户单手操作?/li>

2. 按钮的布局方式和排版规?/h3>

除了位置和大之外，按钮的布局方式和排版规则也非常重要。合理的布局方式和排版规则可以提高用L使用体验和品的可用性。以下是一些常见的按钮布局方式和排版规则：

  • 水^布局Q将多个按钮横向排列在一P适用于需要同时操作多个功能的场景?/li>
  • 垂直布局Q将多个按钮U向排列在一P适用于需要按序操作多个功能的场景?/li>
  • 寚w方式Q将多个按钮按照左对齐、右寚w、居中对齐等方式q行排列Q以便于用户快速找到目标按钮?/li>
  • 间距规则Q通过调整按钮之间的间距来增加可读性和可操作性，例如Q可以设|相L钮之间的间距?0像素?/li>
  • 文字排版规则Q通过调整按钮文字的大、颜艌Ӏ字体等方式来提高可L和观度?/li>

四、按钮的颜色和样?/h2>

1. 按钮颜色的选择原则

按钮的颜色对于用户体验和产品可用性非帔R要。一般来_按钮的颜色应该与产品的品牌色或主题色相匹配，以便于用戯别和记忆。同Ӟ按钮的颜色也应该h明显的对比度Q以便于用户在不同的背景下快速找到目标按钮?/p>

以下是一些常见的按钮颜色选择原则Q?/p>

  • 单色按钮Q用单一的颜色作为按钮背景，适用于简单明了的场景?/li>
  • 渐变色按钮：使用渐变色作为按钮背景，可以增加视觉效果和层ơ感?/li>
  • 反色按钮Q用与背景形成鲜明Ҏ的颜色作为按钮背景，可以提高可读性和可操作性?/li>
  • 白色按钮Q用白色作为按钮背景，适用于简z明了的场景?/li>

2. 按钮样式的设计要?/h3>

除了颜色之外Q按钮的样式设计也是非常重要的。合理的样式设计可以提高用户的用体验和产品的可用性?/p>

以下是一些常见的按钮样式设计要点Q?/p>

  • 圆角按钮Q将按钮的边角设|ؓ圆角Q可以增加界面的柔和感和亲和力?/li>
  • 阴媄按钮Q在按钮周围d阴媄效果Q可以增加立体感和层ơ感?/li>
  • 描边按钮Q在按钮周围d描边效果Q可以突出按钮的轮廓和Ş状?/li>
  • 图标按钮Q在按钮上添加图标或囑Ş元素Q可以增加视觉效果和表达意义?/li>
  • 攑֤镜按钮：在按钮上d攑֤镜效果，可以增加交互性和味性?/li>

五、按钮的文字和标{?/h2>

1. 按钮文字的设计原?/h3>

按钮文字的设计对于用户体验和产品可用性非帔R要。一般来_按钮文字应该z明了、易于理解和记忆Q同时要W合产品的品牌Ş象和主题风格?/p>

以下是一些常见的按钮文字设计原则Q?/p>

  • 短明了：按钮文字应该短明了，不要q于冗长Q以便于用户快速理解和操作?/li>
  • 可读性强Q按钮文字应该具有较强的可读性，字体大小适中Q颜色鲜艻I避免使用难以辨认的字体或颜色?/li>
  • 表达意义明确Q按钮文字应该能够准地表达按钮的功能和意义Q避免生歧义或误解?/li>
  • 与品牌Ş象相W：按钮文字应该与品的品牌形象相符Q符合品的定位和风根{?/li>

2. 按钮标签的设计要?/h3>

除了文字之外Q按钮标{也是非帔R要的。合理的标签设计可以提高用户的用体验和产品的可用性?/p>

以下是一些常见的按钮标签设计要点Q?/p>

  • 标签内容z明了：标签内容应该z明了，不要q于复杂Q以便于用户快速理解和操作?/li>
  • 标签位置合理Q标{位置应该合理Q不要遮挡按钮的主要内容Q也不要q于靠近边缘Q以免误触?/li>
  • 标签样式l一Q标{样式应该l一Q不要出现多U不同的字体、颜色或样式Q以保持界面的整z和一致性?/li>
  • 标签语义明确Q标{语义应该明确Q不要生歧义或误解Q以便于用户理解和操作?/li>

六、按钮的交互设计

1. 按钮的点L果和反馈机制

按钮的交互设计对于用户体验和产品可用性非帔R要。合理的点击效果和反馈机制可以提高用L使用体验和品的可用性?/p>

以下是一些常见的按钮点击效果和反馈机Ӟ

  • 点击效果Q按钮的点击效果应该明显而流畅，可以使用淡入淡出、弹跟뀁放大羃等效果Q以增加用户的互动性和味性?/li>
  • 反馈机制Q按钮的反馈机制应该及时、准地告诉用户操作的结果，可以使用声音、震动、提C框{方式进行反馈，以增强用L感知和满意度?/li>
  • 错误提示Q当按钮操作出现错误Ӟ应该及时l出错误提示Q以避免用户产生困惑或不满?/li>

2. 按钮的动L果和q渡效果

除了点击效果之外Q按钮的动画效果和过渡效果也可以提高用户的用体验和产品的可用性?/p>

以下是一些常见的按钮动画效果和过渡效果：

  • 渐变Ԍ按钮的背景颜色渐变为透明或半透明Q可以让用户感觉到按钮正在被点击或激zR?/li>
  • 攑֤~小Q在按钮被点LQ可以将按钮的大放大或~小Q以增加视觉效果和趣x?/li>
  • 旋{Q在按钮被点LQ可以将按钮q行旋{Q以增加动态感和趣x?/li>
  • 弹出框：在按钮被点击Ӟ可以弹出一个提C框或确认框Q以增加用户的确认感和安全感?/li>

七、按钮的试和优?/h2>

1. 按钮试的方法和程

按钮的测试和优化对于提高产品的用户体验和可用性非帔R要。合理的试和优化策略可以发现ƈ解决产品中存在的问题Q提高品的品质和用h意度?/p>

以下是一些常见的按钮试Ҏ和流E：

  • 功能试Q对按钮的功能进行全面的试Q包括点L果、反馈机制、错误提C等。可以用手动测试和自动化测试相l合的方式进行测试?/li>
  • 兼容性测试：Ҏ钮在不同讑֤、不同浏览器、不同操作系l下的兼Ҏ进行测试，以确保品能够在各种环境下正常运行?/li>
  • 性能试Q对按钮的性能q行试Q包括响应时间、加载速度、资源占用等Q以保产品能够快速响应用h作?/li>

2. 按钮优化的策略和技?/h3>

除了试之外Q按钮优化也是提高品用户体验和可用性的重要手段。以下是一些常见的按钮优化{略和技巧：

  • 化设计：按钮的设计化到最，只保留必要的信息和功能，以便于用户快速理解和操作?/li>
  • 提供反馈Qؓ按钮提供及时、准的反馈Q让用户知道他们的操作是否成功，以增强用L感知和满意度?/li>
  • 增加互动性：通过动画效果、过渡效果等方式增加按钮的互动性，以提高用L味性和参与度?/li>
  • 考虑用户习惯Q根据用L使用习惯和心理特点，合理设计按钮的位|、大、颜色等Q以提高用户的用体验和便利性?/li>

八、ȝ

按钮UX设计对于提高产品的用户体验和可用性非帔R要。合理的按钮设计可以增加用户的参与度、趣x和便利性，从而提高用户对产品的满意度和忠诚度?/p>

在进行按钮UX设计Ӟ需要考虑按钮的位|、大、颜艌Ӏ样式、功能、反馈机制等多个斚wQ以保产品能够满用户的需求和期望。同Ӟq需要进行测试和优化Q发现ƈ解决产品中存在的问题Q提高品的品质和用h意度。因此，按钮UX设计对于C产品开发和用户体验设计都具有重要的意义和必要性?/p>

本文?@MO鱼山?原创发布于h人都是品经理，未经许可Q禁止{?/p>

题图来自 UnsplashQ基?CC0 协议

该文观点仅代表作者本人，Zh都是产品l理q_仅提供信息存储空间服务?/p>

C妙微(www.gerard.com.cn )是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、^面设计，以及相关的Y件开发服务，咨询电话Q?1063334945。我们徏立了一个微信群Q每天分享国内外优秀的设计，有兴请加入一起学习成长，咨询及进请加蓝助微信ben_lanlan

]]> Mon, 07 Apr 2025 03:03:48 +0000 天宇 http://www.gerard.com.cn/blog/post-13195.html 在设计时Q圆角与直角该如何用？ http://www.gerard.com.cn/blog/post-13194.html

大东西q行拆解为小的东西，逐步解决问题Q解决了问题，大问题也解决了，在品设计中也是一栗在面圆角直角的选择Ӟ我们来看看作者如何做选择

在当今数字化时代QUI设计已成为创造引人入胜的用户体验的关键要素。一个成功的UI设计不仅需要技术知识，q需要对l微之处的深ȝ解。本文将探讨两种基础但极为重要的囑Ş元素Q圆角和直角。它们如何媄响用L感知和互动，如何在设计中恰到好处地应用它们，以及它们在实际案例中的运用?/p>

一、圆角与直角的特?/h2>

在介l?ldquo;圆角与直?rdquo;前，先给大家分n一个心理效?ldquo;bouba/kiki效应?rdquo;

q个效应最早由德国心理学家沃尔夫冈·U勒?929q提出?/p>

  • “kiki”q个词的锐、快速的韌与尖锐的星状图案相呼?/li>
  • “bouba”q个词的圆润、流畅的声音则与圆润的云状图案相呼应

最早在1929q沃夫?middot;U勒做了一个实验，该实验展CZ两种形式Qƈ询问读者哪UŞ状被UCؓ“takete”Q哪UŞ状被UCؓ“maluma”。尽没有明说明，U勒暗示Z强烈們֐于将锯状Ş状与“takete”配对Q将圆Ş形状?ldquo;maluma”配对?/p>

?001q的另一l实验中拉马钱d兰和 爱d?middot;哈伯德?ldquo;kiki”?ldquo;bouba”q两个词重复了科勒的实验Q询问美国大学本U生和印度讲泰米语的hQ?ldquo;q些形状中哪个是boubaQ哪个是kikiQ?rdquo; 在两l中Q?5% ?98% 的h选择弯曲的Ş状ؓ“bouba”Q锯齿状的Ş状ؓ“kiki”Q这表明人类大脑以某U方式一致地抽象含义附加到形状和声音上?/p>

q个效应主要讲述的是“如何以一致的方式抽象含义附加到视觉形状和语音上”

一ƾ品无到有Q品经理需要做些什么？
在一个品从无到有的q程中，要做好品经理这个角色实在是不容易，除了大家都知道的写需求、写需求、写需求，要做的事多着呢。品经理不是你g的只会找你麻烦，提要?.
查看详情 >

那么我们不妨扩展一下，把这q种效应延展到角色上拿我们最熟悉?ldquo;喜羊与灰太?rdquo;举例Q我们只听名?ldquo;?rdquo;?ldquo;?rdquo;可以潜意识的认?ldquo;喜羊?rdquo;q当于“bouba”?ldquo;灰太?rdquo;相当?ldquo;kiki”Q?ldquo;族”一听就是温和的族群Q?ldquo;狼族”是较ؓ凶猛的族。那么我们可以再回顾一下，“可可q的卡通h?rdquo;大部分就是以圆Ş为基“黄人、葫芦娃、维熊、大头儿子等”Q?ldquo;大反z?rdquo;更多是以“直角”Z“奛_、蛇_、吸血?rdquo;Q这是“抽象含义附加到视觉形状和语音上”?/p>

如果听完q些你还是不懂，那么最单的例子一个堪比吴彦祖的帅哥叫“文轩没有大脑?rdquo;Q那当你见到他时一定会去观察这个h到底有没?ldquo;大脑?rdquo;

那么回归正题Q我们将“圆角与直?rdquo;代入q种思考方式ƈ其q行UI思考，可以大致了?ldquo;圆角与直?rdquo;大致的特?/p>

1. 圆角

1Q定?/strong>

  • 圆角指的是元素边角被设计为圆滑的形状Q而非锐的直角?/li>
  • 它通常通过讑֮一个半径来实现Q半径越大，角越圆滑?/li>

2Q特?/strong>

  • 视觉友好Q「圆角被认ؓ更温和、更友好Q因为它们缺乏尖锐的边缘Q给ZU安全和柔和的感觉。?/li>
  • C感：「在C设计中，圆角被广泛用，它们通常与新颖、时的设计理念相关联。?/li>
  • 提高注意力聚焦：「圆角可以引导用L视线动Q帮助减视觉干扎ͼ使用hҎ聚焦于界面的关键部分。?/li>
  • 适用性：「在Ud应用和网站设计中其行Q特别是在按钮、输入框、卡片和其他交互元素中。?/li>

2. 直角

1Q定?/strong>

  • 直角是指元素的边角以90度角的Ş式呈现?/li>
  • 它是最基本的Ş状之一Q在许多传统和经典的设计中常见?/li>

2Q特?/strong>

  • 专业感：「直角通常lh一U更加正式、专业的印象。?/li>
  • 清晰界定Q「直角在视觉上提供了清晰的界定，使元素的边界更加明确Q有助于信息的组l和分隔。?/li>
  • 传统感：「在某些情况下，直角与传l、经典的设计风格相联pR?/li>
  • 适用性：「直角在各种应用中都很常见，其是在需要传达清晰、直接信息的界面中，如表根{列表和布局l构。?/li>

那么回想一?ldquo;bouba/kiki效应”Q今后在设计中当我们看到某个产品大量的?ldquo;直角/圆角”我们可以分辨这个品的大致风格Q同样字体搭配也是相似的效果Q通过不同的banner可以大致看出q营zd的大致目的?/p>

二、圆角、直角的使用场景

在实际的使用场景中，我们׃最常见?ldquo;按钮、卡?rdquo;两个场景来D例分?ldquo;圆角、直?rdquo;的作用?/p>

1. 按钮

我们首先具体聚焦在UI设计中对?ldquo;按钮”q一元素的圆角和直角的用：

1Q圆角按?/strong>

  • 用户友好性：「圆角按钮通常看v来更加友好和Ҏ接近Q它们给用户一U温馔和舒适的感觉Q适合于鼓q户交互的场景。?/li>
  • Ud讑֤适应性：「在Ud讑֤上，׃屏幕寸较小Q圆角按钮更易于触控Q尤其是屏幕边缘的按钮。?/li>
  • 减少视觉冲击Q「圆角可以减视觉上的尖锐感Q界面看v来更加柔和，适合于寻求轻松视觉体验的应用。?/li>

2Q直角按?/strong>

  • 专业和正式感Q「直角按钮给ZU更加正式和专业的感觉，在一些传l的或者保守的设计风格中，直角按钮更ؓ常见Q例如一些服装品牌（Yohji Yamamoto、CONFIRMEDQ、学校（各学校官方网站）{。?/li>
  • 内容和功能区分：「直角按钮在视觉上更加突出，能够有效地区分不同的功能和内容，其是在需要用户做出明决{的界面上。?/li>

那么q里我们会有一个疑问，那就?ldquo;Ud讑֤适应?rdquo;Q这里我们可能会惛_“直角按钮”的面U看h要比“圆角按钮”的触控面U更大，那ؓ什?ldquo;圆角按钮”更易于触控呢Q?/p>

我们从两个方面来解答

1Q触控面U?/p>

  • 实际上，无论是圆角还是直角，按钮的触控面U通常是由其外接矩形决定的。这意味着Q即使按钮的视觉元素有圆角，触控面积实际上仍然包括了q些圆角区域?/li>
  • 在实际应用中Q操作系l或应用q_通常会ؓ按钮元素提供一个默认的“触控目标大小”Q这个大是Z保良好的触控体验而设计的Q无论按钮的视觉样式如何?/li>

2Q视觉感知与触控体验

  • 圆角按钮在视觉上看v来更加柔和和亲切Q这可能使得用户更們֐于触摸和与之交互。这U心理效应可能会D用户觉得圆角按钮?ldquo;Ҏ”触控Q即使实际的触控面积与直角按钮相同?/li>
  • 在移动设备上Q圆角按钮的另一个优势是它们的Ş状与讑֤的圆润边~相协调Q这在视觉上创造了一U和谐感Q可能会无Ş中增加用L触控舒适度?/li>

通过q两斚wQ我们是不是又能联想?ldquo;bouba/kiki效应”Q介?ldquo;圆角本n的属?rdquo;我们会更ҎȝM?/p>

2. 卡片

对于卡片我们q是先对比，在进行详l的分析?/p>

1Q圆角卡?/strong>

  • 视觉风格Q「圆角卡片提供了一U柔和、友好的视觉感受。它们的圆润边缘可以减少视觉冲击Q创造出更轻村֒亲切的外观。?/li>
  • 用户体验Q「圆角的设计通常被认为更加现代和用户友好。它们可以界面看v来更L、更易于接近Q这在提高用L互动意愿斚w很有效。?/li>
  • 适用场景Q「圆角卡片通常用于需要提供温馨、轻松体验的应用中，例如C交媒体、娱乐内容展C、个人博客，或者Q何强调用户友好和易用性的设计。?/li>
  • 功能效果Q「在功能上，圆角卡片可以帮助区分不同的内Ҏ块，同时保持界面的整体一致性和畅性。?/li>

2Q直角卡?/strong>

  • 视觉风格Q「直角卡片提供了一U清晰、专业的视觉效果。它们的直线和锐角创造了一U结构化和有序的外观。?/li>
  • 用户体验Q「直角设计传达了一U正式和权威的感觉，适合于需要展CZ业性和准确性的应用。?/li>
  • 适用场景Q「直角卡片通常用于更正式或专业的环境，如企业网站、在U商务^台、教育^収ͼ或Q何需要清晰展C大量信息的界面。?/li>
  • 功能效果Q「直角卡片在功能上有助于清楚地区分和l织内容Q特别是在数据密集或信息密集的应用中。?/li>

q里更要值得注意的一Ҏ视觉效果斚w?ldquo;圆角对于用户的视觉效果要Z直角”Q巴|神l学研究所对角落进行的U学研究发现Q?ldquo;角落的感知显着性随角落的角度呈U性变化。锐角比角产生更强的虚qL着?rdquo;Q这里角尖Q看hp亮。角落越亮，p隄?/p>

通过上述Ҏ我们可以得到一个结?ldquo;圆角比直角更亲和”Q那么可以接着推论“圆角卡片更容易用户接受卡片内信?rdquo;q是因ؓ圆角向内指向矩Ş的中心。这会将焦点攑֜矩Ş内的内容上。当两个矩Ş彼此盔RӞq可以轻松查看哪条边属于哪个矩Ş。尖角向外，从而减对矩Ş内部内容的关注。当两个矩Ş彼此盔RӞ它们q得很隑ֈ断两条边属于哪个矩Ş。这是因为每个矩形边都是一条直Uѝ圆角矩形的Ҏ独特的，因ؓU条朝着它所属的矩Ş弯曲?/p>

三、案例分?/h2>

那么对于“直角、圆?rdquo;的用我们以“CONFIRMED、汽水音?rdquo;q两个品来分析看一下这两个产品对于“直角、圆?rdquo;的应用?/p>

1. CONFIRMED

CONFIRMEDQAdidas旗下|站Q这里懂球鞋的朋友我们可以把它理解ؓNike的SNKRSQ?/p>

作ؓAdidas旗下产品发售q_QCONFIRMED更多的是发售一些潮类的服饰最q有“Y-3、CLOT、FEAR OF GOD”{一些潮服饎ͼq个应用E序旨在为Adidas的高需求和限量产品提供一个更加公q_直接的购买渠道，通常늛了品牌与设计师和艺术家的合作ƾ，以及特别版的q动鞋?/p>

那么我们?ldquo;产品定位、用L体、主要功能流E?rdquo;来分析一?/p>

1Q品定?/strong>

  • 独家发售q_Q「CONFIRMED 专注于提?Adidas 的独家发售和限量版品，特别是鞋cd高端服装。它的目标是成ؓ品牌与其最忠实_丝之间的直接连接点?/li>
  • 品牌营销工具Q「通过q个q_QAdidas 能够加强其品牌Ş象，特别是在时尚和高端运动装备领域。CONFIRMED 作ؓ一个专门^収ͼ也强化了 Adidas 在潮和限量产品市场中的C。?/li>
  • 市场分析和消费者洞察：「CONFIRMED q可能被用作市场研究工具Q通过分析用户行ؓ和购买模式来更好地理解目标市场。?/li>

2Q用L?/strong>

  • 潮流爱好者：「对最新潮和设计保持x的消费者，他们q求限量版、独家合作系列。?/li>
  • Adidas 忠实_丝Q「品牌的忠实支持者，对于品牌的新产品和特别发售保持高度兴。?/li>
  • q动鞋收藏家Q「对于限量版q动鞋有收藏价值的消费者，q些人往往愿意为独特和|见的设计支付高仗?/li>

3Q主要功能流E?/strong>

  • 产品预览和信息：「用户可以在应用E序中浏览即发售的产品Qƈ获取详细信息Q如h、设计特炏V发售日期等。?/li>
  • 注册和参与抽{：「对于感兴趣的品，用户需要在特定旉内注册参与抽{。这通常涉及填写个h信息和选择购买码{。?/li>
  • 抽签l果通知Q「抽{束后Q用户会收到是否中签的通知。如果中{，用户有Z购买q些限量产品。?/li>
  • 购买和支付：「中{户可以在应用E序内完成购买流E，包括支付和选择配送选项。?/li>
  • C֌互动和内容：「CONFIRMED q可能提供与品牌相关的内容，如设计师访谈、品牌故事等Q以增强用户参与和品牌忠诚度。?/li>

q里我们先从“CONFIRMED”卡片元素分析Q本文只讲述的直角卡片的用途，不过多讲qApp功能Q?/p>

每款产品可以在一个直角卡片中展示Q其中包括品图片、名U和一些基本信息。这里在App?ldquo;首页、发售信息、会员权?rdquo;q三个模块最为突出，q种布局有助于用户快速浏览和识别不同的?/p>

4Q功能展C?/strong>

q里“CONFIRMED”不同的卡片可以承载不同的功能Q如昄卛_发售的品、已l发售的产品、品牌故事等Q帮助用户快速定位他们感兴趣的内宏V这里用通过卡片元素的方式来详细展示产品Q会使整个品的调性保持一_大卡片的元素传递给观众的浏览体验会更直观的感受产品Q这里会发现一个很有趣的细节，貌似好的国外、跨境电商的App都会采用q些大的直角卡片Q?/p>

接下来我们就讲述关于“CONFIRMED”按钮元素使用的分析：

5Q突出的功能

直角按钮通常用于H出最重要的操作，例如“购买”?ldquo;注册抽签”?ldquo;查看详情”。这些按钮因光明的边界和直接的设计而容易被用户注意到?/p>

6Q风格统一

使用直角按钮可以与应用中其他直角设计元素Q如卡片Q保持视觉一致性，为用h供一致且z的视觉体验?/p>

7Q视觉引?/strong>

q些按钮通常配有“CONFIRMED”的颜Ԍ蓝色Q，用于引导用户的注意力Q帮助他们快速识别应用程序中的不同功能?/p>

q里我们可以看到“直角卡片”“直角按钮”?CONFIRMED 应用中的应用可能主要体现在其用户界面的设计上Q通过清晰、有序的布局和直观的用户交互Q提升用L体验?/p>

2. 汽水音乐

提到“汽水音乐”大家都不陌生Q前D|旉各大“rapper、流行歌?rdquo;发歌都在汽水Q这个App是可以和抖音联动的，所以播N乐的模式没有采用大家常见?ldquo;Ҏ、切?rdquo;操作Q而是换成随机曲子?ldquo;抖音”向下滑动切换一Pq样既新颖又能容易用户L操作习惯Q不至于一下子新的交互方式无法适应。那么我们同样从“产品定位、用L体、主要功能来分析”

1Q品定?/strong>

  • 汽水音乐是一N乐流媒体应用Q旨在与主要竞争Ҏ如腾讯音乐和|易云音乐抗衡?/li>
  • 它不仅是一Ƒ֍U的音乐播放软gQ还与抖音紧密结合，使得用户可以在两个^C间无~切换音乐播攑ֈ表，昄出对C交媒体和音乐流的综合运用?/li>

2Q用L?/strong>

  • 汽水音乐的主要用L体是中国市场上的q轻用户Q尤其是那些已经使用抖音q寻求更丰富音乐体验的用戗?/li>
  • 考虑到字节蟩动在短视频领域的强大影响力，汽水音乐会吸引那些对新兴、流行音乐以及个性化推荐感兴的q轻体?/li>

3Q主要功能流E?/strong>

  • 个性推荐：「这?ldquo;汽水音乐”通过法推荐“个性电?rdquo;?ldquo;歌单推荐”?ldquo;3个榜?rdquo;?/li>
  • 与社交媒体的整合Q「能够与用户的抖韌̎号同步，提供跨^台的音乐体验。用户可以在抖音中发现音乐，q在汽水音乐中l播放，反之亦然。?/li>
  • 播放Q「汽水音乐的播放方式与抖韛_步营造区分于其他音乐App不同的交互体验?/li>

那么我们从卡片开始分析，卡片主要应用?ldquo;歌曲、专?rdquo;?ldquo;播放列表”?ldquo;歌单推荐”?ldquo;音乐盲盒”

那么他们起到的作用分别是

  • 提高用户体验Q「圆角卡片的设计通常比直角设计更柔和、更易于接受。这U设计能够减视觉疲劻I使应用界面看h更加友好和现代化。?/li>
  • 增强视觉吸引力：「圆角卡片因其流U型的外观，在视觉上更加吸引用户。这有助于提升用户对应用的整体印象和兴趣。?/li>
  • l织信息Q「圆角卡片可以有效地信息分l，如将不同的歌曌Ӏ专辑、播攑ֈ表等内容区分开来，使得用户览和选择时更加直观和方便。?/li>
  • 提升操作便捷性：「在触摸屏上Q圆角卡片可以提供更好的触摸目标Q得用户在q行选择和导航时更加方便。?/li>
  • 增强内容的层ơ感Q「圆角卡片可以通过阴媄、边框或颜色的变化，为界面添加层ơ感Q得内Ҏ加突出和易于阅读。?/li>
  • 提升品牌形象Q「现代的界面设计往往們֐于用圆角元素，使用q种设计可以使应用看h更加时尚Q从而提升品牌Ş象。?/li>
  • 圆角卡片在提升用户体验、美化界面、优化信息展C和操作便利性等斚w发挥着重要作用。这些设计元素有助于提高应用的整体吸引力和用L使用满意度?br>

“圆角按钮”对于“汽水音乐”的作用有Q?/p>

  • 视觉焦点Q「圆角按钮可以作觉焦点，吸引用户的注意力Q特别是对于重要的功能，如播放按钮或搜烦按钮。?/li>
  • 界面观性：「圆角按钮增加了界面的美观性，与整体设计风格协调一_提升了应用的整体视觉效果。?/li>
  • 一致性和标准化：「在应用中用标准化的圆角按钮可以提高界面的一致性，使用hҎ理解和用不同的功能。?/li>

其实通过ҎQ我们会发现“圆角”在社交、音乐等偏娱乐方向采用的更加多，因ؓq些产品属性需?ldquo;产品与用?rdquo;?ldquo;用户与用?rdquo;之间拉近距离Q圆角不仅更Ҏ我们的眼睛处理，而且q信息更容易处理，圆角很有吸引力。那?ldquo;直角”偏向专业领域、正式的场合以及一些小众的产品?/p>

四、ȝ

了解q应用这些元素的Ҏ，不仅能够提升设计的美观性，q能够在更深层次上与用户产生共鸣。作为UI设计师，深入理解圆角和直角的影响Q将使我们能够更_C达我们想要表辄信息Q在了解单的形状如何影响感知后，我们可以有目的地进行设计，每一个微的视觉元素加在一P形成用户潜意识中感知的一致、独特的品牌个性?/p>

本文?@文轩没有大脑?原创发布于h人都是品经理，未经授权Q禁止{?/p>

题图来自UnsplashQ基于CC0协议

该文观点仅代表作者本人，Zh都是产品l理q_仅提供信息存储空间服务?/p>

C妙微(www.gerard.com.cn )是一家专注而深入的界面设计公司Qؓ期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、^面设计，以及相关的Y件开发服务，咨询电话Q?1063334945。我们徏立了一个微信群Q每天分享国内外优秀的设计，有兴请加入一起学习成长，咨询及进请加蓝助微信ben_lanlan

]]> Mon, 07 Apr 2025 03:01:08 +0000 天宇 http://www.gerard.com.cn/blog/post-13194.html վ֩ģ壺 国产精品青青青高清在线密亚 | 手机毛片免费看 | 国产亚洲精品久久久久久国模美 | 欧美日韩免费播放一区二区 | 妙玉被肉干高H潮文 | 99在线免费观看 | 奇米网一区二区三区在线观看 | 欧美日韩亚洲综合2019 | 欧美中文字幕一区二区三区 | 一道本在线伊人蕉无码 | 红色机尾快播 | 青青青国产依人精品视频 | 九九热视频 这里有精品 | 九九久久国产精品免费热6 九九久久国产精品大片 | 北原多香子qvod | 夜夜澡人人爽人人喊_欧美 夜夜骑夜夜欢 | 韩剧甜性涩爱 | 国产精品99AV在线观看 | 97精品国产高清在线看入口 | 国产精品人妻一区免费看8C0M | 老男人粗大猛 | 国产成人精品男人的天堂网站 | 亚洲第一免费播放区 | 永久免费的污视频网站 | 久久精品综合网中文字幕 | 国产福利视频第一导航 | 青青草原伊人网 | 永久免费在线视频 | 秋霞电影网午夜鲁丝片 | 暖暖 日本 视频 在线观看免费 | 2018年免费三级av观看 | 中文字幕99香蕉在线 | 涩涩视频下载 | 亚洲青青草 | 人人澡人人爽人人精品 | 美女诱点第6季 | 久久综合色超碰人人 | 色爱AV综合区 | 久久久久毛片免费观看 | 伊人网青青草 | 无码人妻精品一区二区蜜桃色 |