5ep9lzv 发表于 2024-7-27 18:02:20

你设计的网页会讲故事?


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">网站能承载多种多样的内容,但无论是哪种内容,<span style="color: black;">一般</span>都会遵循<span style="color: black;">必定</span>的信息架构。在这其中,故事是很<span style="color: black;">尤其</span>的一种类型。讲故事,<span style="color: black;">常常</span>能以更叙事、更情感化的方式,将内容传递给用户。</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个好的故事,<span style="color: black;">常常</span>始于笔端,<span style="color: black;">然则</span><span style="color: black;">最后</span>呈现,还是要依靠精巧的设计。<span style="color: black;">那样</span>设计是<span style="color: black;">怎样</span>讲好故事的呢?今天的<span style="color: black;">文案</span>,为你分享一下创造故事的7个维度。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">1、<span style="color: black;">照片</span></strong></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/pBxtubiaOffWltq4JOEeHiaAc93Dt247u6erHuQAOuLPky2WaH4otN0q6qlRtPQIHCpiaib3e3zHTowoM14rMSG9xg/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>,想要讲好故事,要<span style="color: black;">经过</span>设计在视觉上吸引用户。这一切要从干净清晰的视觉设计<span style="color: black;">起始</span>。壮美的<span style="color: black;">照片</span>,有趣的插画,惊艳的视频,都会抓住用户的<span style="color: black;">重视</span>力,并给予用户<span style="color: black;">第1</span>印象。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在视觉上足够<span style="color: black;">明显</span>的<span style="color: black;">照片</span>,搭配以文案,一切<span style="color: black;">起始</span><span style="color: black;">持有</span>了画面感,而故事<span style="color: black;">因此呢</span>而诞生。从照片到色彩,从文字到细节,故事所传达出来的信息和气质,和<span style="color: black;">全部</span>视觉设计应该是保持一致的,而好的故事,能够带着用户一路走过来。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">2、角色</strong></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/pBxtubiaOffWltq4JOEeHiaAc93Dt247u61ibWyibstMUNrQV1Lxbiac9qyx3bB0Zkv60yicI2hO8e7OJU9DAk0eByWQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当<span style="color: black;">咱们</span>在设计网站的时候,常常会探讨用户本身和故事的角色。在网站的<span style="color: black;">研发</span>过程中,用户所<span style="color: black;">表率</span>的身份,和呈<span style="color: black;">此刻</span>用户面前的角色,有着<span style="color: black;">怎么样</span>的关系,这是内容和设计上需要探讨的关键问题。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个角色<span style="color: black;">能够</span>是一个贯穿<span style="color: black;">全部</span>设计是实体角色,<span style="color: black;">亦</span><span style="color: black;">能够</span>是被包含在视觉和文字内容中的一种“气质”,<span style="color: black;">或</span>“腔调”。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Freddie <span style="color: black;">机构</span>旗下<span style="color: black;">制品</span>MailChimp 中所创建的视觉形象<span style="color: black;">便是</span>一<span style="color: black;">仅有</span>趣的猴子,而这只猴子<span style="color: black;">不仅</span>是<span style="color: black;">她们</span>的LOGO,<span style="color: black;">况且</span>这个形象贯穿了<span style="color: black;">全部</span>设计,这个角色为<span style="color: black;">全部</span><span style="color: black;">制品</span>作出了不小的贡献:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">·<span style="color: black;">首要</span>,这个形象和<span style="color: black;">机构</span>、<span style="color: black;">制品</span>的名<span style="color: black;">叫作</span>相互呼应,<span style="color: black;">亦</span>解释了<span style="color: black;">为何</span>叫MailChimp。虽然MailChimp 这个生造的词汇会让用户感到迷惑,可是看到猴子的形象,<span style="color: black;">她们</span>能够<span style="color: black;">火速</span>Get到这个命名的含义。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">·这个形象还揭示出了这个<span style="color: black;">机构</span>的<span style="color: black;">特殊</span>,有趣的设计和独特的气质。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">·猴子Freddie 本身就<span style="color: black;">表率</span>着故事,它是怎么来的?名字怎么起的?这个形象本身就自带故事属性。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">3、互动</strong></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/pBxtubiaOffWltq4JOEeHiaAc93Dt247u65jiaNcB0U1KaALhDQoyySpUrz0EhXgtqsibF1HlyCu3vaiaibjQ7CWicUSw/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">引导用户与内容进行互动,这是设计能带来的重要价值之一。<span style="color: black;">经过</span>动效和<span style="color: black;">行径</span>召唤(CTA)让用户自然地<span style="color: black;">重视</span>到关键的内容和重要的控件,引导用户与之交互,这是为了<span style="color: black;">促进</span>用户与内容紧交互,参与到这个故事中来。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">想要用户参与到故事中来的<span style="color: black;">另一</span>一种方式则是视差滚动。它从视觉上鼓励用户<span style="color: black;">连续</span>地向下滚动,在<span style="color: black;">保准</span>体验愉悦的<span style="color: black;">同期</span>,用动态而有趣的视觉设计,强化互动。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">一个好故事并不需要做的太<span style="color: black;">繁杂</span>。Humaan 就很直接的借助团队照片和悬浮动效来讲述故事,<span style="color: black;">帮忙</span>访客<span style="color: black;">认识</span>这个团队的成员。这种设计简单而有效。(<span style="color: black;">重视</span>悬浮状态下<span style="color: black;">每一个</span>成员姿势和表情的变化,非常有意思)</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">4、游戏</strong></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/pBxtubiaOffWltq4JOEeHiaAc93Dt247u6uyHVLibJGUiahylu4makYYq0pXkXFxwZA54ICsX0WUaAD7vIOd0Wx4Fw/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">故事本身的构建可能是最麻烦的<span style="color: black;">地区</span>,相反,讲述故事反而是简单的事情。<span style="color: black;">倘若</span>你不<span style="color: black;">晓得</span>要<span style="color: black;">怎样</span>呈现故事,<span style="color: black;">那样</span>不妨将它设计成一个简单的游戏,为用户<span style="color: black;">供给</span>一个有趣的听故事的<span style="color: black;">途径</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">而借助游戏讲述故事的技巧在于,保持简单和<span style="color: black;">供给</span>奖励。不论是虚拟的成就徽章,还是优惠券,你要让用户从中获利,<span style="color: black;">才可</span>促进<span style="color: black;">她们</span>继续<span style="color: black;">遵循</span>你的故事。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">你所<span style="color: black;">供给</span>的游戏并不<span style="color: black;">必定</span>要像Pokemon Go 那样有趣而好玩,Dropbox <span style="color: black;">经过</span>完成任务<span style="color: black;">得到</span>额外的云盘空间,<span style="color: black;">同样</span>是非常有效的手段。Dropbox 所设定的任务多种多样,有邀请好友,<span style="color: black;">亦</span>有帐号链接邮箱,<span style="color: black;">然则</span>无论是哪种,都<span style="color: black;">拥有</span><span style="color: black;">必定</span>的游戏性,达<span style="color: black;">成为了</span><span style="color: black;">必定</span>有奖励。许多忠诚的Dropbox 用户都是这么<span style="color: black;">循序渐进</span>过来的。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当然,<span style="color: black;">针对</span>不想玩这些游戏的用户而言,直接付费<span style="color: black;">同样</span><span style="color: black;">能够</span>达成效果。你要让用户觉得,不论怎么玩,<span style="color: black;">她们</span>都是赢家。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">5、微交互</strong></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/pBxtubiaOffWltq4JOEeHiaAc93Dt247u62R6nSJYtsJjZmon0bGgWwHDfEQN3ZibW8UiakFMZs1hFPQn2LKj1Vqfg/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">如今的网页和APP设计中,有着<span style="color: black;">海量</span>的动效和微交互。许多社交<span style="color: black;">媒介</span>都乐于<span style="color: black;">运用</span>微交互,<span style="color: black;">由于</span>它们简单,并且能够带来优秀的体验。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">微交互所带来的有趣体验为用户创造出一个有趣的瞬间。每次<span style="color: black;">保留</span>设置,发送<span style="color: black;">信息</span>,登录帐号,都会<span style="color: black;">伴同</span>着好玩而微妙的微交互,以Instagram 中点赞的按钮为例,用户在尝试过之后,<span style="color: black;">针对</span>这种交互会有的沉迷的感觉,乐此不疲。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有<span style="color: black;">道理</span>的微交互非常重要。就像上面所说的点赞,它是<span style="color: black;">拥有</span>功能性的,它给<span style="color: black;">全部</span><span style="color: black;">制品</span>的体验带来了<span style="color: black;">显著</span>的<span style="color: black;">提高</span>。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">6、叙述</strong></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/pBxtubiaOffWltq4JOEeHiaAc93Dt247u6L77PpybmFg8lu7Ylw88GnBPehDicm1JUzrcseicWqnBh3SPvSJ6aE70g/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">故事的<span style="color: black;">形成</span>大多不<span style="color: black;">繁杂</span>,开头,过程,<span style="color: black;">结果</span>,这三者是绝大部分的故事的三个基本环节。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>你需要讲述故事,这种公式化的结构其实是最容易为用户所接受的:</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">开头:LOGO和标题。让用户<span style="color: black;">晓得</span>这是什么网站,以及<span style="color: black;">她们</span><span style="color: black;">为何</span>会在<span style="color: black;">这儿</span>。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">过程:<span style="color: black;">经过</span><span style="color: black;">描述</span>内容,展现特殊性。你的网站能给用户带来什么不<span style="color: black;">同样</span>的东西?<span style="color: black;">她们</span>能预期<span style="color: black;">有些</span>什么东西?</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">结果</span>:<span style="color: black;">行径</span>召唤,呼吁用户购买,<span style="color: black;">或</span>订阅,等等。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">7、简单</strong></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_jpg/pBxtubiaOffWltq4JOEeHiaAc93Dt247u6tzCXlK8RPsJF4prUEo1LD2sibqh8us4XuA5KG5jrEcCtYoo4x6bRfdQ/640?wx_fmt=jpeg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">虽然这可能会和上面的一条有所冲突,<span style="color: black;">然则</span>故事最好还是保持简单。简单的故事<span style="color: black;">常常</span>能更快的让用户Get到核心信息。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">故事要能够抓住用户的<span style="color: black;">重视</span>力,给用户留下好印象,让<span style="color: black;">她们</span><span style="color: black;">作为</span>回头客。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">UpStream 在自己的首页上就做到了这一点——虽然用户<span style="color: black;">能够</span><span style="color: black;">经过</span>滚动,到中间部位查看<span style="color: black;">更加多</span>的内容,<span style="color: black;">然则</span>只需快速的扫视开头,中间和结尾三个部分,就能搞清楚这个故事的全貌。<span style="color: black;">经过</span>视觉设计搭配文字,就能搭建出一个故事的梗概。<span style="color: black;">另外</span>,屏幕上的“参与”按钮<span style="color: black;">亦</span>相当的“诱人”。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">简单的故事<span style="color: black;">常常</span>更加有效。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><strong style="color: blue;">结语</strong></h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">你在设计故事的时候应该明白,你自己的故事<span style="color: black;">常常</span>更加动人。一个真实的故事,带有你自己的烙印,讲述出来才<span style="color: black;">更易</span>触动到用户。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">原文<span style="color: black;">位置</span>:</span><span style="color: black;">webdesignerdepot</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">原文作者:CARRIE COUSINS</p>优设译文:@陈子木
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="http://mmbiz.qpic.cn/mmbiz_png/pBxtubiaOffV8AOlRkgtps4xe3dUWjJ0LAzjrgp61QdNBLk3WKNpibWX0x8J408BswhgPiaPNsu1gkpwOvhQ82Awg/640?wx_fmt=png&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" style="width: 50%; margin-bottom: 20px;"></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">认识</span>课程<span style="color: black;">更加多</span>信息请点击<strong style="color: blue;">阅读原文</strong></p>




页: [1]
查看完整版本: 你设计的网页会讲故事?