很多同學(xué)在找工作的時候都會感嘆影晓，雖然我暫時沒有實際的項目經(jīng)驗镰吵，但我能夠獨立完成一整套app設(shè)計，做了很多界面練習(xí)的概念稿挂签，這難道還不能證明我的能力嗎疤祭？我做的比那些上線的作品更精美，為什么因為沒有經(jīng)驗就把我淘汰掉饵婆？
在做了一些項目之后勺馆，我慢慢地體會到，想要做好一個完整的項目侨核，需要考慮更多純視覺以外的內(nèi)容草穆，而這些是自己在做虛擬項目時不曾遇到的。根據(jù)自己的工作經(jīng)驗搓译，我總結(jié)出了一些在做項目時需要注意的地方悲柱，以及曾經(jīng)踩過的坑，與大家共勉些己，看看自己是否把這些細節(jié)都考慮完整了豌鸡。
在做概念稿時，我們可能只是單純地從美觀角度或者流行元素上去選擇排版和布局段标，比如最近很流行的卡片式涯冠、彌散陰影、無線式分割逼庞、大黑粗的標(biāo)題等等蛇更，總之就是怎么好看怎么來，什么流行用什么赛糟。對于為了強調(diào)視覺表現(xiàn)力的概念稿來說械荷，這樣做無可厚非，然而在實際項目中虑灰，選擇什么樣的表現(xiàn)形式吨瞎，是要從需求出發(fā)，根據(jù)功能特點穆咐、內(nèi)容的主次來選擇相應(yīng)的排版布局方式颤诀。
當(dāng)你看到交互稿或者當(dāng)產(chǎn)品把界面上需要呈現(xiàn)的內(nèi)容交給你時字旭，你的腦海中可能已經(jīng)浮現(xiàn)出N種版式布局的方式。不要以為交互稿上已經(jīng)把元素排好崖叫，你只要照著畫就行了遗淳。交互只是告訴你界面上需要放哪些內(nèi)容以及內(nèi)容的層次和邏輯關(guān)系，未必要按他的排版方式來做（尤其是當(dāng)你家交互也不是特別專業(yè)的時候……）心傀。因此屈暗，我們也需要認(rèn)真思考，應(yīng)該選擇什么樣的版式來呈現(xiàn)這些內(nèi)容脂男。
有時候當(dāng)只做一兩個簡單的界面時养叛，可能不需要交互，需求方會直接把內(nèi)容告訴你宰翅。雖然看似很簡單弃甥，但是也不要掉以輕心，抄起ps就開始做。如果前期沒有溝通好，沒有深入了解需求瓤帚，可能會讓你事倍功半。
比如這樣一個拍攝視頻的應(yīng)用的設(shè)置模塊瓶珊，需求方告訴你，有這些這些還有這些參數(shù)可以調(diào)整耸彪。你心想艰毒，這還不簡單，打開ps噼里啪啦火速搞出了這個界面：
嗯搜囱，沒毛病丑瞧，so easy。
結(jié)果還沒嘚瑟完蜀肘，就被需求方打了回來绊汹。“小王啊扮宠，我覺得設(shè)置這里要改一下西乖，還是用彈窗比較好√吃觯”你一聽火大了获雕，憑什么要改，側(cè)邊欄的形式多干凈簡潔收捣，操作也方便届案，需求方都是xx，懂不懂設(shè)計罢艾。
表面上看楣颠，這是一場關(guān)于到底用彈窗形式還是側(cè)邊欄形式的爭執(zhí)尽纽。然而當(dāng)你心平氣和地坐下來和需求方進行溝通后，發(fā)現(xiàn)事情并不簡單童漩。原來弄贿，這些設(shè)置里的一些內(nèi)容是做不到修改后就實時顯示出來的，需要一定的處理時間矫膨，因此會造成延遲差凹。所以需要修改后有一個確定的按鈕，確認(rèn)后再統(tǒng)一處理侧馅。這樣來看危尿，再用側(cè)邊欄就不合適了。當(dāng)然施禾，彈窗也只是其中一種方式，了解了問題的根本搁胆，我們可以想出很多種解決方式弥搞，比如也可以進去單獨的一個界面進行設(shè)置，完成后再返回渠旁。最后綜合考慮攀例，還是選擇了更輕便的彈窗形式：
其實這里面還有許多細節(jié)需要考慮，比如每一項的調(diào)節(jié)內(nèi)容和調(diào)節(jié)方式是怎樣的顾腊，有幾個強度等級粤铭，是連續(xù)的還是間斷的，是整數(shù)還是可以有小數(shù)（精確到哪一位）杂靶，上下限分別是多少……每一項都要根據(jù)其特點選擇合適的調(diào)節(jié)方式梆惯。
因此每一項都需要跟對方溝通清楚。有些數(shù)值是連續(xù)的吗垮，適合用調(diào)節(jié)桿垛吗；有些提供了特定的幾個強度選項；有些可以手動輸入烁登；還有些可以開啟或關(guān)閉怯屉，因此要用開關(guān)的形式……
所以我們應(yīng)該把所有細節(jié)都弄清楚之后，再確定表現(xiàn)的形式就會有明確的依據(jù)饵沧，而不是盲目地不斷嘗試锨络，卻總得不到對方想要的。
當(dāng)然溝通也是需要技巧的狼牺，既不能一味地互懟羡儿，也不能完全地順從。我們需要看到的是甲方爸爸提出的這些看似無理的要求背后的真實目的是什么是钥。我們經(jīng)常會吐槽甲方喜歡放大加粗大紅色失受，還要五彩斑斕黑讶泰。仿佛全世界的甲方都有這么奇葩的審美。但實際上并不是因為甲方的審美low拂到，而是因為他們不是設(shè)計師痪署，以他們僅有的那些設(shè)計認(rèn)知，想要突出強調(diào)某個內(nèi)容就只能想到用大紅色和加大加粗兄旬，文字變形就想到Word里的藝術(shù)字……這才是甲方的世界中最簡單和樸素的設(shè)計法則袄欠浮！
所以你不用苦口婆心地教育他這樣真的很丑领铐。我曾經(jīng)按照一個甲方的要求把藍字后面的背景改成了他想要的紅色悯森，結(jié)果他自己也覺得很辣眼睛。他們的真實目的并不是想要把背景改成紅色绪撵，而是想要這個字更加醒目一些瓢姻。作為設(shè)計師的我們，可以有一萬種方法讓他醒目耙粽幻碱！如果你也只會加大加粗加紅，那跟甲方還有什么區(qū)別……
所以最重要的是理解話語表面背后的真實需求细溅，所有的方法和技巧不過是解決問題的手段罷了褥傍。
大家都有這樣的經(jīng)歷，每次考試時喇聊，寫完試卷后肯定不會立即交卷恍风，總要回過頭再仔細檢查一遍（學(xué)霸請繞道）。做ui界面也是一樣誓篱，當(dāng)所有界面都完成后也需要做一次走查朋贬，確保完整無誤。但是很多時候會遇到這種情況窜骄，明明已經(jīng)反復(fù)檢查了N 遍兄世，最后還是有些小錯誤愣是沒有發(fā)現(xiàn)。所以我們需要給自己制定一個走查表啊研，列出需要檢查的項目御滩，然后每次檢查時一一對照，就可以避免有遺漏党远。畢竟需要檢查的內(nèi)容很多削解，腦子記不住也不是你的錯……
走查表的內(nèi)容因人而異，沒有統(tǒng)一的標(biāo)準(zhǔn)沟娱，也不可能非常完美沒有缺漏氛驮，只是為了提供一個更規(guī)范的流程，完善你的設(shè)計稿济似。以下是我總結(jié)出的一些走查的內(nèi)容矫废，供大家參考盏缤。
視覺部分
1、文字
大小是否合適蓖扑，界面上能否看清（最好放到手機上去查看）唉铜；
對比與層次感是否足夠；
有無錯別字律杠；
標(biāo)點符號：使用中文的還是英文的潭流，保持統(tǒng)一；段落開頭不要有標(biāo)點柜去；
段落開頭不需要空格灰嫉。
不成熟的小建議：當(dāng)文字在圖片或者視頻上時，要特別考慮可讀性嗓奢。通常我們都會找一些高大上的圖片配色白色的文字讼撒，看起來非常完美。但是不要忘了股耽，實際情況下背景的圖片是千變?nèi)f化的根盒，要保證文字在任何圖片下都能看的清楚。以白色文字為例豺谈，可以給文字加上半透明的黑色背景（不想太明顯可以做個漸變或者羽化）/1-2px的黑色描邊或投影（可以放在淺色背景的圖片上調(diào)節(jié)郑象，能看清即可贡这，不要太過濃重）/文字不要太纖細茬末，可以適當(dāng)加粗。具體案例可以參考直播界面或者字幕盖矫，彈幕的做法~
2丽惭、圖標(biāo)：
相同模塊的圖標(biāo)風(fēng)格、描邊粗細辈双、顏色是否統(tǒng)一责掏，多個顏色時飽和度明度是否一致；
圖標(biāo)大小和位置有無視覺對齊湃望；
默認(rèn)换衬、點擊、選中狀態(tài)下的樣式证芭。
不成熟的小建議：同一個圖標(biāo)的不同狀態(tài)瞳浦，切圖大小要保持一致。你可能覺得這是廢話废士，但有時候選中狀態(tài)不只是改變下顏色叫潦，可能會添加一些樣式如描邊、投影等官硝，會使之與默認(rèn)狀態(tài)下的大小不同矗蕊，這時候要以最大的圖標(biāo)邊界為準(zhǔn)設(shè)定好一個合適的大小短蜕。雖然可能會讓默認(rèn)圖標(biāo)的透明區(qū)域看起來更多，但是程序哥哥會方便很多~?不要為了省那點透明區(qū)域給程序哥哥添加麻煩傻咖。（按鈕也同樣適用朋魔。）
正常狀態(tài)下是圓為80*80px，而選中后因為加了外描邊變?yōu)?8*88px没龙，但是兩個圖標(biāo)的切圖大小還應(yīng)該保持一樣铺厨。
3、按鈕：
按鈕主要就是幾種不同的狀態(tài)的設(shè)計：
默認(rèn)（normal）
懸停（hover/roll/focused）（僅pc端）
點擊（pressed）
選中（selected）
不可選（disabled）
有時為了簡便會把懸停硬纤、點擊和選中合并為一種樣式解滓。
不成熟的小建議：點擊的效果一般是在原有的按鈕顏色上加深或者減淡一些（加深會更有被按下去的效果），當(dāng)然也可以根據(jù)按鈕的樣式使用別的方式筝家，如加深描邊洼裤、從線框變?yōu)轭伾畛洹⒓油队跋酢⑽淖肿兩热埃蠹铱梢员M情發(fā)揮創(chuàng)意，總之就是要跟正常狀態(tài)有所不同莹菱，讓人能夠看出變化移国，知道這個按鈕是可以點擊或已經(jīng)被點擊過，不至于以為是死機了道伟。迹缀。。不可選擇按鈕則通常是灰色蜜徽，這點用戶已經(jīng)形成共識祝懂，所以可以點擊的按鈕就最好避開灰色，不要挑戰(zhàn)用戶的認(rèn)知拘鞋。
4砚蓬、視覺規(guī)范
大家都知道做一套完整的界面需要制定一份詳細的視覺規(guī)范，這些想提一些除了字體盆色、顏色灰蛙、圖標(biāo)、按鈕等基本規(guī)范之外的可能會被忽略的內(nèi)容隔躲。
舉個例子來說摩梧。比如我們要設(shè)計一個類似于朋友圈發(fā)布狀態(tài)的界面，雖然只有頭像蹭越、名字障本、文字加圖片這些內(nèi)容，但是要考慮的情況卻非常之多。用戶發(fā)布1張驾霜，2張案训，3張，4張……圖片的時候分別是如何顯示的粪糙？最高上限是幾張强霎？如果是視頻或者音樂、鏈接呢蓉冈？現(xiàn)在再翻看朋友圈是不是發(fā)現(xiàn)不同張數(shù)的圖片比例和大小是不一樣的城舞？我們需要把所有可能的情況都考慮進去，并制定一個規(guī)范寞酿，來應(yīng)對實際場景中各種復(fù)雜的情形家夺。
每做一個界面，我們都要反復(fù)思考伐弹，反問自己拉馋，還有沒有別的可能出現(xiàn)的情況？是不是都考慮到了惨好？其實要想考慮周全也很簡單煌茴，先做出正常狀態(tài)，然后考慮極端狀態(tài)日川。例如：
字?jǐn)?shù)限制：一般注冊的時候蔓腐，用戶名的字?jǐn)?shù)沒有什么限制，隨便起龄句。但是不排除一些戲精為了給我們的工作增加負擔(dān)起一些超級霸氣無敵加長夜用防側(cè)漏（回论。。撒璧。）的一行都寫不下的名字透葛，必須要為這些人設(shè)定一個規(guī)范笨使，比如界面上最多顯示幾個字或者距右邊的邊距始終保持多少px卿樱，超出的部分，嗯硫椰，就放到省略號里去吧繁调。當(dāng)然你也可以在注冊的時候強行限定字?jǐn)?shù)，不給用戶加戲的機會靶草。
數(shù)字：當(dāng)界面中含有數(shù)據(jù)蹄胰，且數(shù)字會根據(jù)實際情況變化時，也需要設(shè)定規(guī)范奕翔。比如以下各個身體數(shù)據(jù)的數(shù)值裕寨，我們規(guī)定保留一位小數(shù)（最后一項本身為整數(shù)，且數(shù)值較大，可以例外）宾袜。那么當(dāng)數(shù)值為0時捻艳，就應(yīng)該顯示0.0。當(dāng)沒有數(shù)據(jù)時庆猫，用“——”來表示认轨。具體的數(shù)值范圍和判定標(biāo)準(zhǔn)可能會專門有人來制定，如果沒有人告訴你標(biāo)準(zhǔn)月培，要務(wù)必去問清楚嘁字，或者百度去查。這里還要提醒大家杉畜，在填假數(shù)據(jù)時也要盡量保證數(shù)據(jù)真實，模擬實際的情況此叠，不要隨便想個數(shù)瞎填霍掺，也不要所有的地方都是同樣的數(shù)字，一看就是復(fù)制粘貼的拌蜘，顯得很不負責(zé)任杆烁，而且也很難把握真實情況下的效果。
再比如常見的評論简卧，轉(zhuǎn)發(fā)數(shù)兔魂。這個就更加隨機，可能是個位數(shù)举娩，也可能成千上萬析校，沒有規(guī)范也是不行的。像微博上隨便一個明星铜涉，評論數(shù)都是上萬智玻，如果直接把真實數(shù)據(jù)原封不動地寫上去，N個0怕是要數(shù)到眼瞎芙代。微博的做法是吊奢，一萬以下的，顯示真實數(shù)據(jù)纹烹，超過一萬的页滚，一律以萬為單位來表示。非常機智地節(jié)省了空間铺呵，直觀簡潔裹驰。而且在這么龐大的數(shù)量級下，也就沒必要在意后面零幾十幾百了片挂。（畢竟人家零頭都比你多幻林。贞盯。。）
有人可能會說沪饺，唉邻悬，人家微博是大公司，我們家小公司用戶量少随闽，數(shù)字根本不可能達到那個級別父丰。這就是你的不對了，怎么能妄自菲薄呢掘宪？換個角度想想蛾扇，說不定一個也沒有呢？（魏滚。镀首。。）
咳咳鼠次，這就是說到另一個極端情況更哄，數(shù)據(jù)為0或者沒有數(shù)據(jù)（注意哦，有時候這可是兩種不同的情況）腥寇。當(dāng)然這個例子里是一樣的成翩，可以寫上0，也可以直接省略不寫赦役。參考如下0評論慘案（好吧這是我自己的微博麻敌。。掂摔。）
看到如此巨大的差距术羔，我忍不住……想要再舉一個例子。
比如下面這個簡單的圖表乙漓，默認(rèn)顯示幾天的數(shù)據(jù)比較合適级历？這幾天是連續(xù)還是間斷的呢？（根據(jù)產(chǎn)品特性叭披，可能存在用戶當(dāng)天沒有測量寥殖，數(shù)據(jù)為空的情況）如果相鄰的兩個日期不是在同一年呢？日期又應(yīng)該以什么形式表示趋观？……
搞定了這些之后扛禽，還有全屏頁锋边。全屏頁可以顯示更多數(shù)據(jù)皱坛，而且可以左右滑動查看，我們劃分了日和月兩個單位豆巨。經(jīng)過分析和討論剩辟，日因為間隔較小，而且多數(shù)用戶不會每天都測量，我們可以只顯示有數(shù)值的日期贩猎。而月跨度較大熊户，一年也才12個月，所以為保證連續(xù)性每個月份都寫上吭服。那么問題又來了嚷堡，如果某一個或者幾個月都沒有數(shù)據(jù)呢？折線是連接到0還是略過它只連接有數(shù)據(jù)的月份艇棕？
思考清楚后我們的效果圖就要以這種方式展示蝌戒，盡量把可能出現(xiàn)的特殊情況也包含在內(nèi)，并附上文字說明沼琉。
好啦例子就舉這么多北苟，相信大家也明白了，界面中的每一個元素都需要我們謹(jǐn)慎思考打瘪，不要只盯著一種情況友鼻。很多信息都是動態(tài)的，要讓我們的設(shè)計具備很好的延展性闺骚，能靈活適用于各種情形彩扔。在提交常規(guī)界面的同時，也把極端特殊狀態(tài)的顯示效果附上僻爽。
交互部分：
其實說是交互也不完全準(zhǔn)確借杰，只是比起前面的視覺細節(jié)來說更偏重于整體。主要也是檢查除了常規(guī)界面以外的其他特殊情況进泼。這部分的走查可以適用于大多數(shù)app蔗衡。
1、缺省界面/空數(shù)據(jù)頁
出現(xiàn)空數(shù)據(jù)的情況有：初始狀態(tài)（用戶剛開始使用乳绕，沒有關(guān)注的內(nèi)容或者測量的數(shù)據(jù)等）绞惦；數(shù)據(jù)清空（比如男朋友幫你清空了購物車…）；出現(xiàn)錯誤（網(wǎng)絡(luò)異常洋措、搜索內(nèi)容不存在等）济蝉。
解決方法：通常使用情感化設(shè)計，繪制些簡單輕松的插畫菠发，并加上文案告知用戶出現(xiàn)空狀態(tài)的原因王滤，必要時可以提供其它相關(guān)的入口引導(dǎo)用戶操作，使界面產(chǎn)生內(nèi)容滓鸠。
2雁乡、網(wǎng)絡(luò)異常
一般有三種情況：切換網(wǎng)絡(luò)（WiFi切換到移動數(shù)據(jù)網(wǎng)絡(luò)），網(wǎng)絡(luò)中斷（也就是沒聯(lián)網(wǎng)）以及網(wǎng)絡(luò)信號較弱糜俗。
解決方法：切換網(wǎng)絡(luò)時通常會使用阻斷性較強的彈窗式提示踱稍，因為涉及到消耗流量曲饱；另外兩種情況當(dāng)界面有緩存數(shù)據(jù)時，可使用toast或者常駐list提示珠月，沒有緩存數(shù)據(jù)時就是空界面了扩淀，可以加入情感化設(shè)計，并提供重新加載的button啤挎。
3驻谆、加載刷新
可分為四種加載形式：
下拉刷新（這個不用說了）；
分段加載（每次只加載多少條信息庆聘，繼續(xù)滑動或者點擊再接著加載）旺韭；
分步加載（先加載文字再加載圖片，或先加載出占位符再加載內(nèi)容）掏觉；
智能加載（分網(wǎng)絡(luò)環(huán)境加載不同內(nèi)容区端，如無WiFi的情況下只加載文字不加載圖片和視頻）。
先確定好使用哪種加載方式澳腹，如果是下拉刷新的需要做視覺上的設(shè)計织盼。
4.引導(dǎo)頁，啟動頁
這一點也是血淚的教訓(xùn)酱塔，哈哈沥邻。
通常做一個app，不可能只做一稿就OK了羊娃。定稿之前唐全，可能會出N個風(fēng)格版本給老板選擇。定稿后蕊玷，開發(fā)或測試過程中會反饋過來一些問題邮利，還會經(jīng)常對界面進行修改和優(yōu)化。雖說優(yōu)化后的界面比之前的會更加完善垃帅，但是也不要全盤否定之前的延届，直接一鍵覆蓋，改頭換面贸诚，重新做人方庭。。酱固⌒的睿“還是第一稿好”的段子并不是一個傳說。經(jīng)歷過的人都懂运悲，嗯龄减。
所以每做一次更新，就新建個文件夾扇苞，標(biāo)注上日期欺殿，源文件也另起爐灶寄纵，不要就直接在原稿上修改鳖敷。原稿并不是被完全否定的脖苏，保留每一個版本不只是為了防止老板想法突變，也便于我們?nèi)蘸筮M行對比總結(jié)定踱，或者可以發(fā)現(xiàn)前面的稿子中依然可以借鑒的點棍潘。
當(dāng)然，每做一次改動崖媚，界面亦歉、標(biāo)注、資源都需要同步修改畅哑，保持一致肴楷，并及時告知程序員。不要想著就改動了一個小小的地方荠呐，直接跟程序員說下就好了赛蔫，懶得打開ps再去調(diào)整。時間久了很多東西都會忘記泥张，只有存出來的界面才是鐵的證據(jù)……如果沒有及時同步更改呵恢，到時候自己都會凌亂，忘記到底最終是哪個版本媚创。
當(dāng)然做好一個項目需要考慮的還不止這些渗钉，還有文案的斟酌、程序的實現(xiàn)問題钞钙、與上下游的溝通等鳄橘，每一塊都有很多學(xué)問。以后積攢了新的經(jīng)驗會繼續(xù)補充~
做好一個項目并不簡單芒炼，認(rèn)真對待每一個細節(jié)挥唠，反思犯過的錯誤，可以少走彎路焕议，提高工作效率宝磨。
歡迎大家一起交流，共同進步~
