前幾天讀了《用戶體驗(yàn)要素》一書之后，最大的收獲是初步了解了用戶體驗(yàn)的五層架構(gòu)。我想到可以利用這個(gè)思路，重新設(shè)計(jì)一下自己Axure設(shè)計(jì)練習(xí)“個(gè)人主頁”。在原有模型的基礎(chǔ)上，改動(dòng)元素，使其能夠更好的發(fā)揮它展示自身的功能。不過由于自身水平有限，對于UI、交互等方面認(rèn)識(shí)水平有限，所以無法做出精美的作品。
這里簡單講述自己的思路。最終還是希望在產(chǎn)品設(shè)計(jì)上能學(xué)到更多東西，為自己應(yīng)聘產(chǎn)品崗位增添一份信心。
產(chǎn)品：“個(gè)人主頁”
戰(zhàn)略層：
作為個(gè)人練習(xí)，在此產(chǎn)品中展示個(gè)人履歷，個(gè)人能力和風(fēng)采等，在求職的過程中作為展現(xiàn)個(gè)人學(xué)習(xí)能力的作品。
對于招聘方，可以預(yù)先了解求職者的學(xué)習(xí)、工作經(jīng)歷，生活態(tài)度等，可以作為檢驗(yàn)求職者水平的一個(gè)參考方向。
范圍層：
在原始版本中，我將這個(gè)練習(xí)作為一個(gè)簡單的Axure軟件學(xué)習(xí)作品，作為簡歷的補(bǔ)充來設(shè)計(jì)。
接下來的V2版本，我打算在原有的基礎(chǔ)上進(jìn)行補(bǔ)充和完善。分為：
個(gè)人信息：聯(lián)系通信方式、社區(qū)賬號(hào)地址等。
教育背景：就讀院校、專業(yè)、在校表現(xiàn)情況。總之，將在校所做的事歸類一起。
工作經(jīng)歷：包括自己的正式工作和兼職等。
個(gè)人能力：包括為面試產(chǎn)品崗位所學(xué)習(xí)的知識(shí)和技能、已經(jīng)掌握的技能、擅長的技能。
個(gè)人作品：最主要的是展示在準(zhǔn)備產(chǎn)品崗位面試的這個(gè)階段里做了哪些功課。包括Axure的設(shè)計(jì)作品、競品分析、讀書筆記、需求文檔撰寫等。
興趣愛好：主要集中于:愛好文字（偽文青）、攝影、各種二、三次元?jiǎng)赢?、電視劇等等?/p>
結(jié)構(gòu)層
在結(jié)構(gòu)層中，要解決如何用何種形式來表現(xiàn)出需求和功能。交互設(shè)計(jì)如何做，才能使用戶得到良好的體驗(yàn)。同時(shí)，需要符合用戶的習(xí)慣，不要讓用戶花費(fèi)太多心思考慮諸如“這個(gè)地方是不是可以再打開？”這樣的問題。
由于個(gè)人主頁主要記錄的是自己的履歷，所以在可擴(kuò)展性和成長性方面并沒有要求。在布局上，只要能將現(xiàn)有的模塊裝進(jìn)去就行。同時(shí)分散的項(xiàng)目比較多，每個(gè)模塊間并不是一個(gè)連貫的過程，也就是說用戶不必拘泥于某一個(gè)流程來查看個(gè)人主頁。
基于此想法，我想將個(gè)人主頁做成卡片堆模式的交互設(shè)計(jì)。同時(shí)在菜單欄提供快捷的切換入口。使得整體不至于散亂無章。這個(gè)思路和原始版本一樣。在范圍層提到的幾個(gè)方面都獨(dú)立當(dāng)成“卡片”抽換，清晰明了。對于包含內(nèi)容不多的個(gè)人主頁來說，是一種挺好的表現(xiàn)形式。
框架層
這里要先說一下分辨率的問題，這個(gè)問題確實(shí)比較難辦。原先由于想要和手機(jī)一樣做720*1280，結(jié)果做了外框之后發(fā)現(xiàn)在Axure里面設(shè)計(jì)非常麻煩。字體、圖片、矩形框之類的都變得很被動(dòng)。光是字體，就調(diào)整了很久。另外，在瀏覽器預(yù)覽的時(shí)候，無法全部顯示，需要調(diào)整網(wǎng)頁縮放比才可見全貌。然后折中之后我把它調(diào)整到差不多330*650左右，在網(wǎng)頁看起來比較舒服，而且制作起來還算可以。不過小屏也有劣勢，例如圖片小到一定程度就不清晰。顆粒感比較重。或許有其他種方法和硬性要求，這里我就沒在深究。
在整體風(fēng)格上，顏色用了藍(lán)色。這個(gè)藍(lán)色是直接抓取Axure頁面某些圖標(biāo)的顏色的，因?yàn)橛X得這個(gè)顏色很舒服。是藍(lán)色里面加了點(diǎn)白色。關(guān)于配色，早期在大學(xué)里面制作ppt就醒悟過來，合適的顏色能夠給人特定的情緒沖擊。例如在做表現(xiàn)“團(tuán)結(jié)”的團(tuán)支部ppt時(shí)用了橙色。
同時(shí)用了扁平化的思維。在顏色上使用單色憑借，需要區(qū)分的地方稍微添加陰影或者灰度淺一些的線條。當(dāng)然，這個(gè)只是我自己的想法，完全的業(yè)余水平，也只能叫做“偽扁平化”。
在頁面設(shè)計(jì)上我對原始頁面進(jìn)行擴(kuò)展。原來是大框嵌套小框，想要表現(xiàn)出“卡片”的質(zhì)感，這樣使得單頁裝載的內(nèi)容偏少，視野也不夠開闊。所以我索性將內(nèi)頁小框去掉，使得排版更加自由。
同時(shí)優(yōu)化了頁面設(shè)計(jì)，將每個(gè)模塊的子標(biāo)題移到狀態(tài)欄，進(jìn)一步強(qiáng)調(diào)卡片之間的聯(lián)系。
在每個(gè)模塊中，我盡力使其不需要跳轉(zhuǎn)，主要還是覺得入口太深影響閱讀。畢竟這只是一個(gè)個(gè)人主頁，并不要求用戶來熟悉整個(gè)頁面的使用。力求第一次查看頁面就能順利閱讀完想看的內(nèi)容。所以我還是使用動(dòng)態(tài)面板，將信息盡力歸結(jié)在一個(gè)不跳轉(zhuǎn)的頁面里。比如在教育背景里，我設(shè)置了tab切換的表格形式：
內(nèi)容不多，就不需要在特意做一個(gè)詳細(xì)頁來跳轉(zhuǎn)了。
在導(dǎo)航設(shè)計(jì)上，使用了傳統(tǒng)的左右切換加上菜單欄切換。主要是為了方便快捷用。這在原始版本中也提到了，V2版本并沒有改動(dòng)。
表現(xiàn)層
最后的表現(xiàn)層就是各個(gè)元素如何表現(xiàn)的問題了。由于并沒有專業(yè)的學(xué)習(xí)過，我只是按照自己的想法做了一些比較統(tǒng)一的設(shè)計(jì)。
最主要的還是可觸發(fā)的按鈕、字體和圖片的提示，然后就是引導(dǎo)用戶觸發(fā)效果了。
比如一張圖片點(diǎn)擊可以放大，這個(gè)需要提醒用戶么？如果需要，該怎么提醒？
這個(gè)圖標(biāo)是有外鏈的，如果用戶看了之后并無動(dòng)于衷，該怎么辦？
如果用戶不知道可以左右滑動(dòng)切換卡片，該怎么告訴他？
這些都需要我在細(xì)節(jié)處進(jìn)行引導(dǎo)。最常用的就是鼠標(biāo)移入變色了。這個(gè)再原始模型里講過。但是，現(xiàn)在，還有個(gè)問題——假設(shè)用戶用的是手機(jī)，那他并沒有一個(gè)鼠標(biāo)時(shí)刻貼在屏幕上啊，那么這個(gè)時(shí)候鼠標(biāo)移入時(shí)候狀態(tài)改變就沒什么用了。那怎么辦？
在這里我感覺可以從幾個(gè)方面入手：
1. 參考其他app做法，做用戶最慣用的設(shè)計(jì)。
2. 進(jìn)行微小的視覺提示。比如用戶沒滑動(dòng)的話，出現(xiàn)一個(gè)手指提示用戶滑動(dòng)。當(dāng)然這有風(fēng)險(xiǎn)，如果用戶正在專心看你的某些資料，結(jié)果出現(xiàn)某張圖片，會(huì)分散用戶的注意力。
3. 仿真和習(xí)慣操作。比如在一張圖片下面設(shè)計(jì)個(gè)小小地疊層，用戶就會(huì)感覺“這個(gè)圖片是可以翻動(dòng)的”。或者在圖片的兩側(cè)加上兩條圖片截圖豎線，就會(huì)給人一種“圖片是以照片墻的形式貼著的，可以左右切換”。諸如此類的小引導(dǎo)都是可以的。
寫在最后，這個(gè)個(gè)人主頁的升級(jí)版其實(shí)相比原版并沒有多出什么內(nèi)容，甚至于整個(gè)頁面也沒有多大變化。但是這個(gè)是我重新思考后得到的結(jié)果。有時(shí)候想了非常久的東西，而改動(dòng)出來的地方卻只有不起眼的一兩處。
不過這都是思想的結(jié)晶，值得我自己驕傲。另外，需要防范的一點(diǎn)是，在設(shè)計(jì)頁面的時(shí)候，千萬不要因?yàn)榧?xì)節(jié)而忽略整體。這一方面我依然做得不好，容易陷入某個(gè)細(xì)節(jié)處而糾結(jié)不已，還內(nèi)傷。
希望自己能夠越來越收悉產(chǎn)品的設(shè)計(jì)和工具的使用。在成長的道路上由更多收獲！
附上鏈接：個(gè)人主頁V2版本
