<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          【系列】一款APP設計的從0到1之:界面設計篇

          2022-5-5    博博

          《一款APP設計的從0到1》是一個系列文章,共分了6個部分

          《一款APP設計的從0到1》這是一篇系列文章干貨,上次U妹講的是關于APP項目立項和預估時間篇,今天U妹來說一下,APP界面設計和iPad界面設計規范。


          往期回顧:

                  《一款APP設計的從0到1之:項目立項篇》

                  《一款APP設計的從0到1之:項目預估時間篇》


          這次U妹接著上次的茬繼續,繼續之前先來看看整個目錄(滿滿的干貨) 


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

          一、項目立項

          二、項目預估時間

          三、界面設計

          四、切圖標注

          五、視覺還原

          六、上線準備


          界面設計篇


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


          目前在行業里,關于APP界面設計規范也是層次不齊,很多都還停留在6的設備和ios 9的系統之上,而現在最新的是iphone 7和iOS 10了(更新換代真的很快),我這里說的是最新的iOS 界面設計規范(Android設計規范,我們下次見)


          一、關于設計工具


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


          0c12593bd087a8012193a34a6233.jpg


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


          二、設計稿尺寸


          在看設計稿尺寸之前,我們先來了解一下APP界面設計構成

          db8e593bd09ca8012193a3dd77e2.jpg


          界面構成由:布局層、圖文排版層和圖標層。


          在iPhone 6還沒出的時候,都是用640x1136 px來做設計稿的,自從6的發布,所有的設計稿尺寸以750x1334 px來做設計稿尺寸

          a9c5593bd0aea8012193a3e725e3.jpg


          U妹再帶大家來看看,到目前為止所有iPhone的尺寸(1-3代就不用考慮了):


          iPhone界面設計規范:




          iPhone 界面尺寸:


          73d3593bd144a8012193a34e361e.jpg

          以750x1334px作為設計稿標準尺寸的原由:


          1. 從中間尺寸向上和向下適配的時候界面調整的幅度最小,最方便適配。

          2. 大屏幕時代依然以小尺寸作為設計尺寸,會限制設計師的設計視角。 

          3. 設計安卓版本時只需做最小的設計調整,提升設計效率。


          所以做設計稿事請以750x1334px來做設計稿

          9222593bd151a8012193a360df5d.jpg

          9f6b593bd163a8012193a3a3edb5.jpg

          c48a593bd170a8012193a3168b62.jpg


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

          6b37593cc679a8012193a32fa917.jpg


          然后就可以開始你的設計了


          這里U妹再給大家略過一下iPad的設計規范:

          c933593bd0caa8012193a3fb79db.jpg

          d86b593bd18aa8012193a3eab6b7.jpg


          三、圖標設計 


          iPhone 圖標尺寸:


          8d9d593bd199a8012193a3878280.jpg

          圖標設計請用柵格化系統進行設計


          設計尺寸:1024x1024px,竟可能的采用黃金比例設計

          7644593bd1afa8012193a35fa3c2.jpg


          四、關于設計字體


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


          iOS 9:英文字體為Helvetica Neue

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

          ↓↓↓

          iOS 10:英文字體為San Francisco

          iOS 10:中文字體為蘋方

          84f5593bd1c8a8012193a35dff86.jpg

           

          關于字體大小的問題:


          頂部操作欄文字大小          34-38px

          標題文字大小                    28-34px

          正文文字大小                    26-30px

          輔助性文字大小                 20-24px

          Tab bar文字大小               20px


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


          關于界面設計就說到這里了,好的工作方法才能讓自己事半功倍,你覺得對自己有幫助,那可以借鑒學習我的方法,在具體工作中也要靈活應用,有不足之處或問題也可給U妹留言,下期U妹帶你一起來看看界面切圖標注,我們下期再見!



            • 文章來源:站酷   作者:小小方方

              分享此文一切功德,皆悉回向給文章原作者及眾讀者.

              免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

              藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、
              BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合