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>