一本記錄騰訊網(wǎng)媒體驗(yàn)設(shè)計(jì)案例的書(shū)籍朋譬，以視覺(jué)設(shè)計(jì)為主肛鹏。
書(shū)籍：《騰訊網(wǎng)UED體驗(yàn)設(shè)計(jì)之旅》
出版社：電子工業(yè)出版社 ?2015年4月
作者：任婕 等
《騰訊網(wǎng)體驗(yàn)設(shè)計(jì)之旅》一書(shū)中包含了大量騰訊網(wǎng)媒設(shè)計(jì)團(tuán)隊(duì)的設(shè)計(jì)案例遏弱，大部分案例偏向于PC端設(shè)計(jì)济蝉，介紹的角度包括了交互疾就、視覺(jué)澜驮、動(dòng)畫(huà)陷揪、設(shè)計(jì)管理等。其中杂穷，大量章節(jié)講了視覺(jué)方面悍缠，包括了手繪設(shè)計(jì)、文字設(shè)計(jì)（+logo設(shè)計(jì)）耐量、改版飞蚓、主題頁(yè)面設(shè)計(jì)、圖形化設(shè)計(jì)廊蜒。我想一方面是因?yàn)榫W(wǎng)媒的原因（更側(cè)重表現(xiàn)信息內(nèi)容的展現(xiàn)趴拧，不同于流程步驟化的交互設(shè)計(jì)）溅漾；另一方面，在體驗(yàn)設(shè)計(jì)中著榴，交互設(shè)計(jì)與視覺(jué)設(shè)計(jì)本身是分不開(kāi)的添履。
作為一名交互設(shè)計(jì)師，在了解視覺(jué)設(shè)計(jì)之外脑又，我更關(guān)心與交互有關(guān)的部分暮胧，比如信息排版布局、動(dòng)畫(huà)設(shè)計(jì)问麸、響應(yīng)式設(shè)計(jì)往衷，還有H5頁(yè)面設(shè)計(jì)、web端設(shè)計(jì)與移動(dòng)端設(shè)計(jì)严卖。網(wǎng)媒是基于內(nèi)容建立起來(lái)的席舍，并且這些內(nèi)容閱讀相對(duì)典型的特征是層級(jí)相對(duì)較少，且同一層級(jí)上信息內(nèi)容內(nèi)涵意義豐富妄田、之間關(guān)聯(lián)性弱同時(shí)信息量大俺亮。所以通過(guò)視覺(jué)化編輯呈現(xiàn)這些信息顯得更加重要。
PC設(shè)計(jì)與移動(dòng)端設(shè)計(jì)的差異：
①觸發(fā)方式不同疟呐；PC端主要是鼠標(biāo)懸停脚曾、點(diǎn)擊、滾動(dòng)等启具，移動(dòng)端包括點(diǎn)擊本讥、滑動(dòng)、搖一搖等鲁冯；PC端出發(fā)需要更小的點(diǎn)擊面積拷沸，移動(dòng)端手動(dòng)出發(fā)需要的點(diǎn)擊面積則比較大。
②屏幕大小不同薯演，承載內(nèi)容不同撞芍；
比較典型的例子是電商類網(wǎng)站，網(wǎng)頁(yè)端鼠標(biāo)懸停時(shí)跨扮，會(huì)展示產(chǎn)品的其他相關(guān)內(nèi)容序无，移動(dòng)端則做不到，只能把詳細(xì)內(nèi)容平鋪出來(lái)衡创。
從PC端到移動(dòng)端的設(shè)計(jì)帝嗡，需要考慮信息設(shè)計(jì)與交互設(shè)計(jì)。首先是用戶群體對(duì)于這種轉(zhuǎn)換的需求性璃氢，然后是對(duì)于信息板塊的設(shè)置哟玷、內(nèi)容更新頻率的考慮，交互方式一也、控件的尺寸等細(xì)節(jié)問(wèn)題巢寡。值得注意的是喉脖，從大屏幕到小屏幕的轉(zhuǎn)移，信息內(nèi)容要保持同步讼渊，并能保證用戶對(duì)信息的對(duì)應(yīng)的可識(shí)別性动看。書(shū)中特別講到一句話“用人性的思想做產(chǎn)品，而不是程序的思想做產(chǎn)品”爪幻。
H5頁(yè)面：
H5頁(yè)面即移動(dòng)端的web頁(yè)面菱皆，網(wǎng)上有很多區(qū)別兩者的方式，感興趣的去找度娘問(wèn)問(wèn)挨稿。H5頁(yè)面相對(duì)原生頁(yè)面的優(yōu)勢(shì)是傳播速度快仇轻，開(kāi)發(fā)周期短、發(fā)布和更新方便奶甘。（一般原生頁(yè)面完成開(kāi)發(fā)到上線的時(shí)間不如H5頁(yè)面調(diào)整來(lái)得快）對(duì)于運(yùn)營(yíng)需求更容易實(shí)現(xiàn)篷店，對(duì)于可視化效果更易于開(kāi)發(fā)傳播。一般H5頁(yè)面都是活動(dòng)頁(yè)面臭家，比如微信紅包頁(yè)面疲陕。
動(dòng)畫(huà)設(shè)計(jì)：
主要分為三類，講故事類钉赁、強(qiáng)調(diào)類蹄殃、反饋類。講故事類偏向運(yùn)營(yíng)你踩，且動(dòng)畫(huà)播放一般是由用戶觸發(fā)的诅岩；強(qiáng)調(diào)類是為了吸引用戶的注意力，達(dá)到傳遞信息的目的带膜；反饋類是針對(duì)用戶操作或頁(yè)面狀態(tài)的反饋吩谦，比如頁(yè)面轉(zhuǎn)場(chǎng)時(shí)候的銜接動(dòng)畫(huà)。
動(dòng)畫(huà)的表現(xiàn)方式有兩種膝藕，CSS動(dòng)畫(huà)和逐幀動(dòng)畫(huà)式廷。CSS動(dòng)畫(huà)主要是位移動(dòng)畫(huà)、旋轉(zhuǎn)動(dòng)畫(huà)芭挽、縮放動(dòng)畫(huà)和變形動(dòng)畫(huà)滑废；逐幀動(dòng)畫(huà)通常是gif或者jpg或png格式。
動(dòng)畫(huà)設(shè)計(jì)中需要注意動(dòng)畫(huà)效果的觸發(fā)方式览绿，設(shè)計(jì)每個(gè)屏幕之間的轉(zhuǎn)場(chǎng)效果以避免僵硬。
自適應(yīng)設(shè)計(jì)與響應(yīng)式設(shè)計(jì)：
【參考鏈接】http://blog.csdn.net/zxl1033394132/article/details/50574382
自適應(yīng)設(shè)計(jì)是識(shí)別屏幕的大小后穗慕，對(duì)版面進(jìn)行縮放饿敲。響應(yīng)式設(shè)計(jì)是識(shí)別屏幕大小后，對(duì)版面內(nèi)容進(jìn)行一定程度上的重新布局等逛绵。
響應(yīng)式設(shè)計(jì)中應(yīng)該注意在小屏幕上要把字體放大怀各。同樣像素及字號(hào)的字體在手機(jī)上會(huì)比在PC上小很多倔韭。
交互設(shè)計(jì)：
網(wǎng)頁(yè)端橫向滾動(dòng)設(shè)計(jì)；主要使用場(chǎng)景包括展示一系列圖片瓢对、在一個(gè)較大的區(qū)域內(nèi)展示結(jié)構(gòu)化信息寿酌、展示以一屏為單位的信息、展示一個(gè)項(xiàng)目列表硕蛹。
圖片排列形式：宮格式嚴(yán)謹(jǐn)布局（等大圖片與等比縮放圖片排版）醇疼，菱形排布，場(chǎng)景化排版（比如海報(bào)拼貼法焰、散落明信片樣式等）秧荆，圖文結(jié)合等。
……
書(shū)中提到的交互知識(shí)點(diǎn)穿插在每個(gè)實(shí)踐案例中埃仪。我學(xué)到最重要的一點(diǎn)是 完整乙濒。交互設(shè)計(jì)的完整性包括呈現(xiàn)內(nèi)容的完整性、交互觸發(fā)-反饋的完整性卵蛉。相應(yīng)的是用戶感受到的完整性與整體性颁股。
想到這里，似乎空談每種交互方式都太概念傻丝，交互方式更適合在實(shí)際的案例中講述甘有，在一個(gè)場(chǎng)景中談?wù)摻换ト绾危袃r(jià)值桑滩，也更有說(shuō)服力梧疲。
視覺(jué)設(shè)計(jì)：
字體設(shè)計(jì)/LOGO設(shè)計(jì)、信息圖形化設(shè)計(jì)运准、手繪原形設(shè)計(jì)幌氮、改版設(shè)計(jì)、系列設(shè)計(jì)胁澳、主題設(shè)計(jì)……（方法都懂该互，重要的是實(shí)踐）
書(shū)中有趣的點(diǎn)：
1.眼動(dòng)追蹤的相關(guān)研究表明，用戶的視覺(jué)器官在觀察物體時(shí)韭畸，最初的20秒內(nèi)色彩感覺(jué)時(shí)間占80%宇智，形體感覺(jué)時(shí)間占20%；2分鐘后色彩感覺(jué)時(shí)間占60%胰丁，形體感覺(jué)占40%随橘；5分鐘后二者各占一半，并且這種狀態(tài)將持續(xù)保持锦庸。
2.美國(guó)著名社會(huì)心理學(xué)家約瑟夫和哈里認(rèn)為人與人之間的關(guān)系取決于其相互之間的暴露程度机蔗。一般而言，能夠敞開(kāi)心扉，適當(dāng)暴露自己萝嘁，將真實(shí)的一面展示出來(lái)梆掸，往往較容易贏得對(duì)方信任。
3.關(guān)于大項(xiàng)目規(guī)范建立牙言，包括視覺(jué)規(guī)范酸钦、交互規(guī)范、文檔交接規(guī)范等咱枉。從設(shè)計(jì)的執(zhí)行層到項(xiàng)目傳遞層均需要設(shè)計(jì)師參考規(guī)范執(zhí)行卑硫，頁(yè)面板塊設(shè)計(jì)采用模塊化設(shè)計(jì)，以提升項(xiàng)目視覺(jué)體系和體驗(yàn)體系的統(tǒng)一庞钢，同時(shí)提升工作效率拔恰。
