App之“文字”的设计技巧
dohvyrthpv
8年前
<p>随着互联网技术的高速发展、传播媒体的国际化、信息资讯的大量膨胀，以及人们多元化需求的唤醒，原来单一的信息传播方式受到了冲击。</p> <p>人类获取信息的方式从最早的象形文字到现代富媒体的形式，富媒体让信息的表达不再仅限于文字，它可以包括文字、图案、表情、色彩、语音、音乐、视频等。<strong>文字作为最直接，最有效的方式仍然是信息表达的首选</strong>。</p> <p>下面是一个阅读类的app｜日课，功能按钮只用文字来表达，是不是蛮合意境的：</p> <p><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/b4b939ea3d1fa2944ae248d050410f4d.jpg" width="320" height="537"></p> <p><strong>那么，文字在信息传播中有何种特点呢？</strong></p> <p>首先，文字是叙述性的。因为它直接而具体地告诉受众所指的内容。其次，文字也是一种符号图形，代表了某种需要理解的含义。</p> <p>下面先用几个例子直观理解下文字的<strong>叙述性及符号图形</strong>两个特点。</p> <ul> <li> <p><strong>菜单，叙述为主</strong></p> <p> </p> </li> </ul> <p><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/fc7e86d9f8df7f7e88f7884e849420b8.jpg" width="540" height="354"></p> <ul> <li> <p><strong>这是一幅室内设计的平面图，文字是叙述性的。</strong></p> </li> </ul> <p><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/302e6be87f501466876e7f4e58ab743b.jpg" width="540" height="252"></p> <ul> <li> <p><strong>这是标准的键盘，文字是叙述的。</strong></p> </li> </ul> <p><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/04cc00f5dc30051b873c25ced4b8dadd.jpg" width="540" height="204"></p> <ul> <li> <p><strong>地图里的文字也是叙述的。</strong></p> </li> </ul> <p><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/194e712d8f21cc2474f0daf2aae378ed.jpg" width="540" height="392"></p> <ul> <li> <p><strong>指示牌，叙述+图形符号化</strong></p> </li> </ul> <p><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/ffbf2d227cb5ee1898d5651ca46f6655.jpg" width="540" height="333"></p> <ul> <li> <p><strong>这是一段HTML的最基本的代码结构，文字是叙述的也是符号化的。</strong></p> </li> </ul> <p><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/f0bf713ed5f28e0968d93699054a926d.png" width="394" height="191"></p> <ul> <li> <p><strong>海报，叙述+图形符号化</strong></p> </li> </ul> <p><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/c9b79f979e7c1f2670083a4b057b62dd.jpg" width="320" height="480"></p> <p>从单纯的叙述性到符号图形的层层渐进，从一开始的菜单能最大的表达更多内容，到最后一张海报所表达的含义越发单纯。</p> <p>那么，在设计时，如何拿捏文字的叙述性与符号图形这2个特性？</p> <p><strong>一、关于叙述性，可以通过归纳一些同语境的关键词，来进行设计。</strong></p> <p>按照app的功能属性进行大致分类，叙述性对应各功能属性的关键词有以下几种：</p> <p>a、阅读属性</p> <p>b、电商属性</p> <p>c、旅游/活动属性</p> <p>d、工具属性</p> <p>e、分类排行属性</p> <p><strong>1.1 阅读属性</strong></p> <p>所调查的app中，除了单读、阅界这2款app基本不用文字来表达，其余app用的比较多的关键词，比如头条、推荐、精选、热门、今日、收藏、热点、发现、关注等。</p> <p><strong>研究的一些app：</strong></p> <p>网易：头条、科技、汽车、时尚、图片、24、测试阅读口味，获得更优质的推荐、置顶、跟贴、新闻、阅读、视听、话题、我。</p> <p>站酷：推荐</p> <p>反正：精选、更多、热门</p> <p>神补刀：高分榜、看看、玩玩</p> <p>日课：我的、日课、设置、收藏、原文、今日、分享</p> <p>墨客诗：收藏、设置、春节、作者、目录、分享</p> <p>视频头条：推荐、社会、娱乐、搞笑、头条、爆料圈、历史、我</p> <p>今日头条：推荐、热点、上海、视频、社会、订阅、首页、视频、话题、我的</p> <p>fork：贴纸、分享、转发、关注、发现、通知、我</p> <p>未来研究所：筛选、推荐、关注、娱乐、体育、财经、预测、专题、发现、福利、个人</p> <p><strong>1.2 电商属性</strong></p> <p>电商类的用得比较多的关键词为：商品、店铺、超市、优惠券、购、抢、领、降价、秒杀、好货、逛街、清单、购物车、超值、买单、立减、省。</p> <p>研究的app清单：</p> <p>京东：扫啊扫、消息、搜索京东商品/店铺、京东超市、全球购、服装城、白拿白赚、京东到家、抢2元话费、领京豆、优惠券、降价排行、全部、京东快报、秒杀、京选尖货轮番秒、手机专享、限时满减、闪购</p> <p>网易考拉：在千万海外商品中搜索、推荐、新发现、母婴、美妆、箱包配饰、每日签到、限时购、每日上新、立省5元、首页、活动、分类、购物车、我的考拉</p> <p>淘宝：扫一扫、流量任性花、消息、天猫、聚划算、天猫国际、口碑外卖、天猫超市、充值中心、阿里旅行、领金币、淘生活、分类、淘宝头条、淘抢购、有好货、爱逛街、必买清单、首页、微淘、社区、购物车、我的淘宝</p> <p>1号店：上海、搜索你想找的商品、1号团、充值中心、小区雷购、活色生鲜、1号闪购、1号商城、新品试用、订单查询、低价真相、手机会场、电脑会场、精选会场、首页、分类、1品堂、购物车、我的1号店</p> <p>汽车超人：上海市、优惠洗车、超值精洗、折扣车险、查违章、换轮胎、去保养、换机油、折扣加油、车品特卖、特惠保养、幸运大转盘、快抢车、首页、周边门店、我的</p> <p>萌贩：这里！搜索你想要的宅品、搜索、COS用品、周边食玩、手办模型、衣服家装、同人创作、ACG原作、每日一买、买买买、宅品、晒图、我的</p> <p><strong>1.3 旅游/活动属性</strong></p> <p>旅游类的用得比较多的关键词为:目的地、景点、主题、交通、车程、排序、附近、发现、订单、门票、攻略、签证、酒店。</p> <p>研究的app清单：</p> <p>携程周末游：目的地、主题、默认排序、车程、</p> <p>活动树：活动分类、活动日历、附近、今日推荐、首页、发现、我的</p> <p>去哪儿：搜索旅行地/酒店/景点、酒店住宿、300元红包未激活、酒店团购、今日特惠、公寓、钟点房、国际酒店、会场、客栈民宿、交通出行、机票、火车票、特价机票、汽车票、车车、旅游&攻略、门票、攻略、旅游团购、签证、首页、服务、订单、发现、我的</p> <p><strong>1.4 工具属性</strong></p> <p>应用的范围不一样，关键词差异较大，这个得具体问题具体研究了。</p> <p>研究的app清单：</p> <p>印象笔记：设置、文字、照片、提醒、清单、群聊、工作群聊、查看、笔记、全部、笔记本、标签、</p> <p>高铁管家：火车票、飞机票、专车、踏青、出发地、目的地、出发日期、搜索、常用搜索、车票预定、我的行程、旅行服务、个人中心</p> <p><strong>1.5 分类排行属性</strong></p> <p>关键词：类别、精品、推荐、排行、更新、精选、新、优秀</p> <p>研究的app清单：</p> <p>Applestore：类别、精品推荐、优秀新App、显示全部、升级好帮手、精品推荐、排行榜、我的附近、搜索、更新</p> <p>pp助手：大家都在搜、必备、榜单、分类、活动、插件、优秀新软件、显示全部、优秀新游戏、精选、软件、游戏、个性、管理</p> <p>以上是一些归纳总结的关键词，供参考。</p> <p><strong>二、符号图形，我们可以从可识别性和可阅读性两方面探讨。</strong></p> <p>这里总结了8种关于文字图形符号化的设计技巧：</p> <p><strong>2.1 运用色彩、大小对比、深浅对比</strong></p> <p><strong><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/cb2e995b91b974953aad689fa1c7e044.png" width="409" height="169"></strong></p> <p>给文字加点颜色，变换下大小，立马不一样哦～</p> <p><strong>2.2 正反图底关系</strong></p> <p><strong><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/e57ca058c796f0e2f2b26328e34ca065.png" width="455" height="419"></strong></p> <p>想更凸显文字，可以试试加个底色～</p> <p><strong>2.3 转成繁体字</strong></p> <p><strong><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/cb2b019cd274ed51507248a84711ec5d.png" width="482" height="96"></strong></p> <p>直接换成繁体字，简单又好用～</p> <p><strong>2.4 品牌居中置顶</strong></p> <p><strong><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/c682f419e7cddc2515952d1a1a511bae.png" width="482" height="294"></strong></p> <p>这已经成默认设置了，都是这样布置的</p> <p><strong>2.5 个性化的搜索框提示</strong></p> <p><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/ecae68dd8c4048247c7e0aaa8c2efc4c.png" width="412" height="553"></p> <p>这里可以开脑洞啊，给产品一个符合特性的搜索提示语吧！～</p> <p><strong>2.6 标签化</strong></p> <p><strong><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/4b9ee9166e4ef1a365e870a02e69573f.png" width="329" height="181"></strong></p> <p>打标签，装饰味很足，容易吸引眼球</p> <p><strong>2.7 图形+文字</strong></p> <p><strong><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/49acb6c4a252f30dfb03c23b4790c64b.png" width="172" height="79"></strong></p> <p>直接把文字图形化，但仍然保留文字信息，比纯粹图标表达的意思更准确</p> <p><strong>2.8 文字图形化</strong></p> <p><strong><img alt="App之“文字”的设计技巧" src="https://simg.open-open.com/show/12d44bda38ecab357ebde8e0bece5ec1.png" width="253" height="327"></strong></p> <p>文字图形化，要设计得好需要花点时间呢</p> <p><strong>最后，再总结下：</strong></p> <p>一、叙述性，归纳同语境的关键词，按照app的功能属性分类，有：阅读、电商、旅游/活动、工具、分类排行属性</p> <p>二、符号图形，从可识别性和可阅读性两方面，总结了8种关于文字图形符号化的设计技巧。</p> <p>具体应用的时候，根据需求，拿捏好2者的关系即可。</p> <p>来自：http://www.cocoachina.com/design/20160520/16361.html</p> <p> </p>