欧洲女人牲交性开放视频,久久久久久久精品一区二区三区 ,久久久久夜夜夜综合国产

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導直播

12場專業(yè)技能直播

會員專屬社群

榮耀標識

發(fā)布

注冊 | 登錄

一款APP設(shè)計的從0到1之：iOS篇（精華版）

UI嚴選

2017-12-06

5 評論 46367 瀏覽 516 收藏

36 分鐘

很多時候，我們都忙碌在每天的擼圖和改稿中，很少的去整理歸納結(jié)和思考工作的一些問題和方法，善于總結(jié)反思才能達到事半功倍的效果。今天U妹在這里將自己在設(shè)計中的一些經(jīng)驗和技巧分享給小伙伴們，這篇文章集合了前面的6篇精華，希望可以給你一定的幫助。

目前在行業(yè)里，關(guān)于iOS的設(shè)計規(guī)范也是層次不齊，很多都還停留在6的設(shè)備和ios 9的系統(tǒng)之上，而現(xiàn)在最新的是iphone 7和iOS 10了（更新?lián)Q代真的很快），我這里說的是最新的iOS 界面設(shè)計規(guī)范（Android設(shè)計規(guī)范，我們下次見）

U妹列了一個小小的目錄：

一、項目立項

二、項目預估時間

三、界面設(shè)計

四、切圖標注

五、視覺還原

六、上線準備

一、項目立項篇

我是一名UI設(shè)計師，所以U妹這里說的都是從設(shè)計師的角度去闡述一款APP從無到有的一個過程中，設(shè)計師應該干的事。

如果你所在的是一個團隊健全的公司，在項目立項時，會把所有相關(guān)人員（產(chǎn)品汪、運營喵、設(shè)計獅、程序猿等）聚在一起開產(chǎn)品會議，產(chǎn)品汪會講解項目原型、市場調(diào)研分析、市場需求、產(chǎn)品定位、盈利模式等具體的功能模塊和跳轉(zhuǎn)邏輯，一起討論交流原型，不足之處進行改進完善，然后評估項目時間，就可以開工了。

注意：在產(chǎn)品講解和演示原型時，你一定要認真聽，并且要完全理解整個邏輯，你有疑惑或者不理解的地方，一定要提出疑問，讓產(chǎn)品解答，不然你的設(shè)計稿可能會出現(xiàn)邏輯錯誤等。

這個時候我們就可以新建項目了，做前期準備了

我個人的立項建檔習慣是以“項目名稱+版本號”來命名文件夾，因為這種方法很方便我管理和查找項目文件。有的設(shè)計師可能是把所有文件放在一個文件夾里，如果文件較少還行，當文件較多時，那你要哭了，你都不知道哪個是哪個版本的文件了。

反復改稿對于設(shè)計師來說，那是家常便飯啦，當一個頁面反復改稿很多次時（也包括3天2頭就改這種），很多設(shè)計師的源文件應該是這樣的：

初稿、初稿1、初稿2……審定稿、審定稿1……修改稿、修改稿1……最終稿、最終稿1……當我看我這樣的源文件時，我想我會吐血，因為太不好區(qū)分，哪個是上一版，哪個早一些（在此時你也看到了設(shè)計師的真的是很辛苦的，前幾天就又有以為設(shè)計師加班做題，去了天堂，愿天堂沒有PS，詳情請戳這里查看）

此情此景我只想吟詩一首：甲方虐我千百遍，我待甲方如初戀，有朝一日做甲方，虐遍天下設(shè)計院。?

我個人的習慣是以“文件名+改稿日期+改稿次數(shù)”來命名，舉個栗子，比如“首頁_4.10”是最終版，但是4月12日，產(chǎn)品說首頁要再加一個通知，那我的文件就是“首頁_4.12”，但是前后又改了3次，那就是“首頁_4.12.3”一目了然，很容查找要修改的文件。

立項時我只需要給開發(fā)的小伙伴說明一下，他們自然會知道哪個文件是最終版的。

這里U妹很認真的提醒一下各位小伙伴們，所有的修改稿都別刪掉，千萬別刪，千千萬萬別刪掉（重要的事說了3遍），每一次的修改都在副本本基礎(chǔ)上修改，因為當我們改了好多稿后，甲方可能會說“還是第一版好看，回到第一版吧”（不要吐血或砸電腦），所以請千千萬萬在副本上進行修改。

有人會說我有ctrl+Z，我不怕，u妹告訴你千萬別指望ctrl+Z，如果你從沒修改過首選項，默認的歷史記錄只有20步，最大是200步，如果你設(shè)置了200步，不怕PS卡奔潰那也是闊以的

額外再插一句，對于項目的版本控制也是很重要的，我用的項目版本軟件控制是SVN，管理項目文件方便高效，可以和本地項目文件同步，就算我的電腦掛，或裝系統(tǒng)手誤把所有磁盤格式化了，我也不用擔心，我只要同步更新SVN線上文件就都回來了，關(guān)于SVN這里就不多說了。

二、項目預估時間篇

此時此刻，我們已經(jīng)拿到了PRD文檔和原型，先別著急去打開PS畫圖，因為一個項目的開發(fā)是需要時間的，為了更高效的完成開發(fā)進度，整個團隊都需要預估項目時間，作為UI，很簡單，那就是數(shù)頁面，看總共有多少個頁面，再詳細預估……

U妹舉個栗子，比如接到一個APP項目，所有頁面總共有70個左右，（納尼！70個頁面，我的天啦，不要驚訝，70個頁面對于一個APP來說，一點也不多）

這時候可能boss和產(chǎn)品會問你多久圖能出完，先別著急答復，你需要先審視所有頁面，他們會沒完沒了的催你，因為他們著急上線，搶占市場，恨不得讓你天天加班作圖，然后搞上線；催你不要管，讓他們盡情催去吧（再催你的話，你也可以說：催你麻痹，你快，你來畫，純屬玩笑，如果你敢，那你真NB）

1、確定重要頁面

何為重要頁面？在如今看顏值的時代，臉就是最重要的，首頁就是一款APP的臉；還有很多頁面布局主體部分共用相同布局結(jié)構(gòu)，這也是重要頁面。拿首頁來說，你可能需要花2天時間來完成，之所有要用2天，是因為你還要確定主色、設(shè)計風格、icon設(shè)計等等，還有就是保證質(zhì)量（如果誰嫌你慢，你就折磨懟他：想要快行啊，那就降低質(zhì)量唄，出了問題，你負責啊，啦啦啦~~）

我們都知道魚和熊掌不可兼得，既想要快速度，還想要高質(zhì)量，這2者是不可能同時保證的，也很難去平衡的

然后再挑選一個重要頁面，預估用時，然后以此類推，其實首頁確定好后，整個APP的設(shè)計風格就基本已經(jīng)確立，其他的頁面做起來也就容易多了。

2、篩選重復頁面

一款APP里，其實有好多頁面都是局部結(jié)構(gòu)類似的，所以70個頁面，這樣篩選下來，估計也就只有一半，30個頁面是不重復的。

插一句：你在做圖的過程中，不可能100%保證不會有其他任務，肯定會有一些額外的設(shè)計任務，所以，不要把時間估的剛剛好，除非你非常確定不會有額外的設(shè)計任務。

所以，就這剩余的30個頁面，按照我的速度，再留出充足的時間的話（在實際預估時間上多30%—50%左右），我大概需要2周時間完成。

3、整體預估時間

當確定了30個主要頁面的時間，現(xiàn)在就要把其余的重復頁面時間算進來，剩余的這40個就相當于批量的，一周時間穩(wěn)穩(wěn)購了，千萬不要把時間估的太緊，因為你完全不知道boss可能會在你不經(jīng)意丟給你一個東西讓你做，而且還是要的很著急的那種，最后哭的只能是你自己了。

審視原型→統(tǒng)計篩選頁面→重要頁面設(shè)計（30個）→次頁面設(shè)計（40個）→審稿+改稿→定稿

按照自己的預估時間，有序不穩(wěn)，且能夠應對突發(fā)設(shè)計任務的情況下，差不多3周時間完成，這里U妹是在100%不加班的預估時間。

4、網(wǎng)頁設(shè)計預估時間

一般而言，如果是比較大型的專題頁面設(shè)計，我一般會預估3天時間，包括從靈感、構(gòu)思、參考、設(shè)計、修改。

如果是網(wǎng)站，并且有三級頁面，大致5個頁面左右，大致需要5天時間；具體可根據(jù)頁面的多少，依次類推進行預估。

三、界面設(shè)計篇

這里說的都是從設(shè)計師的角度去闡述一款APP從無到有的一個過程中，設(shè)計師應該干的事。

目前在行業(yè)里，關(guān)于APP界面設(shè)計規(guī)范也是層次不齊，很多都還停留在6的設(shè)備和ios 9的系統(tǒng)之上，而現(xiàn)在最新的是iphone 7和iOS 10了（更新?lián)Q代真的很快），我這里說的是最新的iOS 界面設(shè)計規(guī)范（Android設(shè)計規(guī)范，我們下次見）

1、關(guān)于設(shè)計工具

俗話說：工欲善其事必先利其器，好的工具可以讓我們的工作效率更高，做界面設(shè)計我們用的最多的就是PS和AI了，如果你是Mac用戶，可以嘗試一下sketch，軟件的版本當然是推薦高版本，因為功能更強大，作圖的速度也就更快。

我個人剛接觸ps是從8.0開始，8.0 – CS4 – CS 5 – CS 6 – CC – CC 2014 – CC 2015，一直到現(xiàn)在的最新的CC 2017，深刻體會，新的版本更好用。也可以根據(jù)個人習慣，選擇自己順手的工具就好。

2、設(shè)計稿尺寸

在看設(shè)計稿尺寸之前，我們先來了解一下APP界面設(shè)計構(gòu)成

界面構(gòu)成由：布局層、圖文排版層和圖標層。

在iPhone 6還沒出的時候，都是用640×1136 px來做設(shè)計稿的，自從6的發(fā)布，所有的設(shè)計稿尺寸以750×1334 px來做設(shè)計稿尺寸

U妹再帶大家來看看，到目前為止所有iPhone的尺寸（1-3代就不用考慮了）：

iPhone界面設(shè)計規(guī)范：

iPhone 界面尺寸：

以750x1334px作為設(shè)計稿標準尺寸的原由：

從中間尺寸向上和向下適配的時候界面調(diào)整的幅度最小，最方便適配。
大屏幕時代依然以小尺寸作為設(shè)計尺寸，會限制設(shè)計師的設(shè)計視角。
設(shè)計安卓版本時只需做最小的設(shè)計調(diào)整，提升設(shè)計效率。

所以做設(shè)計稿事請以750x1334px來做設(shè)計稿

在文檔建立參考線是一個很好的習慣，我希望大家也可以養(yǎng)成這個習慣，上下很容易設(shè)置，左右我習慣設(shè)置24 px的距離，我通過對國內(nèi)外很多APP就行了對比，總結(jié)是24 px更合理，這個是我的個人習慣，所以也不要當做是明文規(guī)則，你設(shè)置為30 px，也是可以的。

然后就可以開始你的設(shè)計了

這里U妹再給大家略過一下iPad的設(shè)計規(guī)范：

3、圖標設(shè)計規(guī)范

iPhone 圖標尺寸：

圖標設(shè)計請用柵格化系統(tǒng)進行設(shè)計

設(shè)計尺寸：1024x1024px，竟可能的采用黃金比例設(shè)計

4、關(guān)于設(shè)計字體

先來看一下字體的歷史演變過程

iOS 9：英文字體為Helvetica Neue

iOS 9：中文字體由為冬青黑

↓↓↓

iOS 10：英文字體為San Francisco
iOS 10：中文字體為蘋方

關(guān)于字體大小的問題：

頂部操作欄文字大小：34-38px
標題文字大?。?8-34px
正文文字大?。?6-30px
輔助性文字大小：0-24px
Tab bar文字大?。?0px

文字大小只是一個范圍，這要根據(jù)設(shè)計的視覺效果來決定，不要死記硬背，但是切記，字體大小要用偶數(shù)。

四、切圖標注篇

1、切圖工具

Cutterman，一款PS的插件，切圖非常方便，但不支持綠色免安裝版本PS，而且對PS版本要求比較高，針對CS 6的已經(jīng)不維護更新了。推薦安裝官方完整版PS CC及以上版本，目前cutterman最新版為3.2.0版本。

Assistor PS?也是一款PS的切圖標注插件，也被譽為神器；我使用了下，感還可以，但是切圖和標注上體驗還是不高，但是Assistor PS的其他輔助功能還是很不錯的，比如參考線輔助，圓角大小，磁鐵功能。

2、標注工具

PxCook（像素大廚），是一款切圖標注設(shè)計工具軟件。自2.0.0版本開始，支持PSD文件的文字，顏色，距離自動智能識別。

優(yōu)點在于將標注、切圖這兩項設(shè)計完稿后集成在一個軟件內(nèi)完成，支持Windows和Mac雙平臺。標注功能包括：支持長度，顏色，區(qū)域，文字注釋；從2.0.0版本開始，整體效率有了很大的提高，值得推薦的是自動智能識別標注。

Parker，和cutterman是同一家的，Parker能夠自動計算尺寸、距離、文字大小、陰影、描邊圓角、行高等信息，并按照你的需要進行標注, 它極大節(jié)省你標注的時間，大幅度提升設(shè)計效率。（U妹現(xiàn)在一直用Parker進行標注）

但是，parker并不是免費的，而是一款付費軟件，需要60RMB。

Mark Man，也是一款高效的設(shè)計稿標注工具，支持 Win / Mac, 可免費使用基礎(chǔ)功能，免費版的在體驗上也是差強人意，畢竟是免費的，如果需要高級功能也是需要付費的60RMB。

以上工具各有優(yōu)點和缺點，在選擇上主要還是看個人的習慣，哪個用著順手就選擇哪個。

3、頁面標注

標注是非常重要的，開發(fā)哥哥能不能完美的的還原設(shè)計稿，很大一部分取決于我們的標注；如果不清楚你該怎么標，一定要和開發(fā)哥哥溝通！

溝通是非常有效解決問題的途徑！

在這里我大致的說一下我的標注習慣，不需要將每一張效果圖都進行標注，你標注的頁面能保證開發(fā)能把每個頁面都能順利進行就可以了。

我拿我標注過的頁面做個示例：

我們從上面的標注圖可以看出，需要標注的內(nèi)容有：

文字：字體大小、字體顏色
布局控件屬性：控件寬高、背景色、透明度、描邊、圓角大小
列表：列表高度、列表顏色、列表內(nèi)內(nèi)容上下間距
間距：控件之間的距離、左右邊距
段落文字：字體大小、字體顏色、行距
全部屬性：如導航欄文字大小、顏色，左右邊距，默認間距等，你可以提前跟開發(fā)哥哥說好，不用標注。

所有的頁面標注總結(jié)起來就是：標文字，標間距，標大小，標區(qū)域

注：標注顏色格式是使用16進制（如：#FF0000），還是RGB（255,0,0）？你需要和開發(fā)哥哥商量一下，開他的開發(fā)習慣，一般采用16進制色值就好了。

4、界面切圖

我還是拿圖舉例來說明：（有圖有真相哈）

icon_alipay.png→iPhone 1-3代的手機(已經(jīng)不考慮了)
icon_alipay@2x.png→iPhone4/4S/5/5S/6/6S/7對應尺寸，這就是我們通常所說的2倍圖
icon_alipay@3x.png→iPhone6P/6SP/7P使用的尺寸，這就是3倍圖

可以簡單的理解為倍數(shù)關(guān)系，如果你使用750x1334px（iPhone 6/6S/7）尺寸做設(shè)計稿，那么切片輸出就是@2x，縮小2倍就是@1x，擴大1.5倍就是@3x了。

我總結(jié)了一些切圖中常常遇到的問題：

（1）到底哪些資源需要切圖，哪些不需要切圖？

只要是無法用代碼來實現(xiàn)和表達出來的，就需要切圖
如果實在不清楚要不要切圖，多和開發(fā)溝通，他會告訴你哪些是需要你切圖的

（2）切圖需要切幾套？（這里我只以iOS作為標準，安卓下期再說）

理論上，我們需要切3套圖，是為了更好的適配。
在實際工作中，iOS只需要切2套圖就可以，分別為：@2x和@3x

（3）切圖該怎么命名，不會命名怎么辦？

切圖是需要注意幾點：

切圖輸出格式必須為png24位、png8位、jpg格3種格式
同一模塊內(nèi)，切圖大小應保持一致
切圖輸出大小必須保持為偶數(shù)
為了減小包的大小，所有切圖盡量壓縮后在給開發(fā)（包越小，你的boss越高興，說不好會給你多發(fā)點年終獎哈）

關(guān)于切圖和標注就說到這里了，如果在工作中，不清楚該怎么切怎么標的時候，多和開發(fā)溝通交流，良好的溝通才是解決問題的唯一方法，切記不要一個人在那瞎琢磨；有疑問和問題題也可給U妹留言，我們下期再見！

五、視覺還原篇

一款完整的APP，經(jīng)過這樣的一個流程：項目立項啟動→設(shè)計產(chǎn)品原型→設(shè)計效果圖→進入開發(fā)階段→開發(fā)成功后進入測試階段→測試將問題反饋給開發(fā)人員進行調(diào)試→多次測試確認沒有bug→提交市場、正式上線。

我們都知道，無論設(shè)計師的標注稿多精確，開發(fā)出來的產(chǎn)品，多多少少都會有誤差，專業(yè)來說就是視覺效果落地還原度，視覺還原度越高，與設(shè)計稿越接近，APP就越精細；反之，就越差。

所以，就需要我們在這個時候，去配合開發(fā)對UI進行調(diào)整，來更加的接近我們做的效果圖了（簡單了說，就是給開發(fā)挑毛病，指出和效果圖不一致的地方，是不是很開心哈）

差1px，我也要挑出來（像素眼就是這樣煉成的）

1、設(shè)計師如何做視覺還原？

（1）設(shè)計視覺調(diào)整文檔

團隊較大，建議設(shè)計一份視覺調(diào)整文章，這樣對整個開發(fā)進度和效率都是比較高的，因為團隊人數(shù)多，你不可能跑到iOS開發(fā)哥哥那里說一次要調(diào)整的地方，然后再去跟Android哥哥再說一次，你有時間，人家不一定有時間，所以設(shè)計視覺調(diào)整優(yōu)化文檔是很有必要的。

視覺調(diào)整優(yōu)化文檔，要一目了然，需要注明和效果圖不一樣的地方是哪里，應該改成什么樣，是iOS調(diào)整、Android調(diào)整還是h5調(diào)整等，輸出為png和jpg圖片格式，最好輸出為PDF格式，開發(fā)看起來也方便，比如你寫了一個顏色值，開發(fā)就可以直接復制了。

（2）帶上你的板凳，過去和開發(fā)一起調(diào)UI

這種方法很適合3-4人的小團隊，親自上陣，口述問題，效率也是比較高的，你需要備好你的效果圖和開發(fā)后的雛形，有對比才有傷害（有圖有真相，不一樣的地方就得讓開發(fā)改）

2、如何讓效果圖高還原度落地？

（1）規(guī)范的視覺界面設(shè)計

必須按照各平臺的UI設(shè)計規(guī)范去規(guī)范的設(shè)計界面，用設(shè)計規(guī)范去知道開發(fā)，才是提高視覺還原的的基本前提

（2）視覺UI控件的規(guī)范輸出

在絕大多數(shù)的情況下，為了趕項目進度，都是界面先行，設(shè)計規(guī)范后出，所以要竟可能的保持界面設(shè)計和規(guī)范是同步進行。

以u妹目前的項目經(jīng)驗，可以先輸出基礎(chǔ)控件元素規(guī)范，包括（顏色、文字、圖標、蒙板、投影、按鈕、輸入框、或個別控件），規(guī)范是一個龐大而繁瑣，極需耐心的工作；過程中注重每一個細節(jié)的精準與合理性。

（3）規(guī)范的切圖與精確的標注

我們的切圖和標注，是否規(guī)范和精確，直接影響視覺效果的還原度，所以切圖和標注一定要做的細致，這樣更加有利于提升還原度

（4）多和開發(fā)溝通交流

U妹一直說的一句話：溝通是解決問題的最有效方法，所以多和開發(fā)哥哥接觸溝通交流，如果有條件允許的話，請與開發(fā)坐一起；遇到問題及時面對面協(xié)商解決、達成共識、修改、敲定、解決。

六、上線準備篇

當一款APP開發(fā)完畢，測試通過，這時候就需要準備提交正式上線了，但是在上線之前，我們設(shè)計師還需要配合，做一些上線前的工作，U妹帶你來看一看需要做哪些工作？

1、應用圖標（APP Icon）

（1） iOS icon

這是iOS開發(fā)工具Xcode提供的APP Icon (應用圖標)的各項尺寸（這是U妹為了寫這篇文章專門找開發(fā)要的，U妹和開發(fā)的關(guān)系可是很不錯的），咋一看是不是嚇一跳？開發(fā)是按照iOS的系統(tǒng)版本來設(shè)置的，但你是設(shè)計師，你是按照iPhone的版本來作圖的，所以其實沒有那么多，真實情況下，我的開發(fā)同事要求提供以下幾個尺寸：

因為需要的圖標非常多，不可能全部加進去，只能選擇最好的尺寸，我的開發(fā)哥哥要求我提供以下圖標尺寸：

1024×1024?????????????????Retina APP Icon for APP Store(高清屏的APP Store)

512×512?????????????????????APP Icon for APP Store（普通屏幕的APP Store）

120×120? ? ? ? ? ? ? ? ? ? 6以及以下的主屏幕尺寸

180×180?????????????????????6 plus的主屏幕圖標尺寸

58×58?????????????????????????Settings on devices with retina display

87×87?????????????????????????Settings on iPhone 6 Plus

80×80?????????????????????????Spotlight on devices with retina display

注意：這里需要注意一下，iOS系統(tǒng)可以自動把圖片裁剪為圓角，所以提交圖標的時候，你只需要提交正方形的PNG格式即可。

我們來看看蘋果官方的APP icon規(guī)范：

（2）Android icon

安卓的圖標相對iOS來說較少，我們只需提供一下幾個尺寸就可以了，但是需要提高2套，圓角和直角各一套，因為有的地方都會用到。

512x512px
192x192px
144x144px
96x96px
72x72px
48x48px

因為安卓有很多的機型，不同屏幕密度的手機對應的icon大小也是不同的，所以U妹這里沒法給你給出相應的icon所被應用的位置。

2、啟動頁（Launch Image）

這同樣也是iOS開發(fā)工具Xcode提供的LaunchImage(啟動頁)的各項尺寸，我們需要提供4種尺寸給的開發(fā)工程師：

640x960px?? ? ? ? ? ? ? ? ? iPhone 4/4s

640x1136px?????????????????iPhone 5/5s/5c/SE

750x1334px?????????????????iPhone 6/6S/7

1242x2208px? ? ? ? ? ? ? ?iPhone 6 plus/6S plus/7 plus

2208x1242px? ? ? ? ? ? ? ?iPhone 6 plus/6S plus/7 plus的橫屏尺寸，如果我們的APP支持橫屏模式，你就需要做一張橫屏的啟動頁。

注意：啟動頁面一定要是PNG格式的，建議給開發(fā)之前講圖片全部壓縮一下。