<rt id="sxvx2"></rt>

        <s id="sxvx2"></s>

          1. <rt id="sxvx2"></rt>
          2. 更多課程 選擇中心


            UI培訓

            400-111-8989

            UI設計師要知道的APP界面的切圖技巧和注意事項

            • 發布:UI培訓
            • 來源:UI職場
            • 時間:2021-01-18 15:40

            今天小編要跟大家分享的文章是關于UI設計師要知道的APP界面的切圖技巧和注意事項。正在從事UI設計工作的小伙伴們來和小編一起看一看吧,希望本篇文章能夠對大家有所幫助。

            APP界面的切圖技巧和注意事項

            一、APP切圖基本知識點以及注意事項

            1、考慮適配Android 各種復雜的分辨率,如主流的1280X720、800X480、640X480、480X320、以及各種非主流分辨率。2、.9神器 png3、PNG24+jpg

            4、可交互控件盡量不小于最小可操作尺寸:android規范是48dp5、圖片中的可視元素盡量在文件中居中,便于對齊和標注。6、能用代碼實現盡量避免用圖,如單色色值、漸變、文字、分割線等。7、考慮控件的通用性。

            總之切圖是個技術活。所以,小伙伴們不得忽視切圖的魅力!

            (一)按鈕的設計

            1、你可以真正點擊的區域應該盡量大些,至少不應該小于一個手指的寬度,那樣的話點擊的命中率要高,否則會有“點擊不靈敏”的感覺,當然并不是真正的不靈敏,而是沒有點中操作的區域。(用戶可不管這些理由,多為用戶考慮哦)。

            2、對于RadioButton、CheckBox至少應該出3個狀態的圖:正常、點擊、選中。有時不能為了方便就只出兩個圖:正常、選中。這種情況在點擊的過程中也有“響應遲鈍”的感覺,因為畢竟在點擊狀態沒有換圖。

            (二)排版的設計

            對于整體上的設計應該盡量考慮到好用、實用,而不是能用。我自己的體會是這樣的。

            1、凡是要響應點擊或者其他事件的部分應該盡量和屏幕四周的邊框保持一定的距離。如果你非得把這部分放在屏幕邊上,那么最好放大操作區域。

            因為屏幕邊上點擊并不是那么好用(如果設備加了一個保護套,那么屏幕邊上就會很難點),至少我用過的有邊框的設備,也就是說屏幕邊上直接用手去點大部分情況是點不中的。

            2、背景和內容的對比度一定要合適。作為有美術基礎的都知道這點,但是很多時候在設計的時候就犯這樣的錯。

            你的設計一定要考慮到使用環境,如在陽光下。如果對比度不夠的話那么在強光的環境下就不好用了,背景和內容就融為一體了,很難分辨。

            3、盡量少用對話框。尤其是網頁中都會有很多的對話框,久而久之人們對對話框也就產生了反感(至少我是這么認為的)

            能以更好的方式做提示的情況下就盡量避免用對話框,非用不可的情況下那么建議一個界面不超過兩處。老是彈對話框的應用,最終彈走的是用戶。

            4、界面簡潔。這點有兩重意思,其一就是界面完成的功能很明確、簡潔,其二是同類操作盡量在一個界面完成。

            感覺上這兩點有沖突,其實不然,如果真的不能做到既界面簡潔又功能統一那么這個設計最好還是再設計設計。

            比如用戶信息輸入功能中第一個界面完成用戶名輸入、密碼,確定后進入第二個界面進行設置頭像。像這樣的界面的個人認為太羅嗦了。

            既然都是完成用戶信息的功能,那么完全可以設計到一個界面中。這樣一來可以把整個功能做得更緊湊,少用一個界面更簡潔。

            5、使用一定的動畫。使用動畫進行界面的過渡讓人感覺更柔和、親近?,F在的應用太多了,而且功能強大,你的應用需要脫穎而出那么就必須與眾不同,有時一些簡單的動畫會給你的應用增色不少。

            6、整體布局。我不是專業的美工不過見過很多優秀的應用,應該有發言權吧,呵呵。優秀的應用有些共同的地方,現在總結一下。

            無論是出于什么考慮,在界面上應該避免左右布局嚴重不平衡,當然也有故意設計成不對稱美的。

            比如界面的最下面一欄有兩個橫著排版的按鈕,那么這兩個按鈕最好整體上居中,若是偏左或是偏右那么就有左右不平衡的感覺,要么是左重右輕,要么是左輕右重,看上去有一部分比較空。

            7、屏幕適配。Android開發中最麻煩的問題之一就是屏幕適配的問題,硬件廠商太多,屏幕尺寸太多。一個好的應用應該盡可能多的適配更多的屏幕。

            UI設計過程中就應該考慮到屏幕變寬、變高、變窄、變短的過程中UI應該如何適配。整體上有個原則,屏幕的適配不要改變整體的布局,也就是布局是不變的只是對圖形進行拉伸而已(關鍵是如何拉伸)。

            二、APP切圖的6點要素

            在進行APP切圖的前,需要做以下6點:

            1、和客戶端的技術溝通好,用不同的框架來實現的時候,圖會有不一樣的切法。例如Tabbar是連背景一起切還是單獨把icon做成背景透明的,文字是放在圖里還是后面加字。

            2、有一些小的icon式按鈕,不能只切到icon邊緣,而是要考慮到最終實現的時候,是把這個圖片做成按鈕,和用戶交互。所以必須要多留一些透明的邊,讓能點擊的圖片在88×88以上,這樣用戶才保證比較好點到。

            3、根據個人習慣,如果可以用PNG24就不用PNG32,如果可以用PNG8就不用PNG32。并且用Fireworks優化大小。

            4、對于不改變可見圖形而又需要加大點擊區域的圖。那么切圖的時候建議在可見圖形的四周都加上1像素的透明,這是為了放大拉伸而不產生可見區域的圖像失真。

            5、切圖的高度。對于一個通用的背景圖,如文字圓角邊框背景,那么切圖的時候并不是效果圖上有多高就切多高,為了通用而是只需切一行文字的高度就可以了。

            不過這也不是絕對的,準確的說應該切的高度H=paddingTop+textHeight+paddingBottom,及文字相對背景的上邊距+一行文字的高度+文字相對背景的下邊距。

            6、切圖的寬度。如果是一個通用的背景圖,那么他的寬度應該是他在效果圖中的最小寬度,也就是說這個背景可能在多處使用到了,就取最小的那個寬度就可以了。

            比較麻煩的是鋪滿全屏的時候,這就需要看看你做的效果圖的寬屏寬度,所以說做效果圖的時候最好是做小屏幕的效果圖。

            以上就是小編今為大家分享的關于UI設計師要知道的APP界面的切圖技巧和注意事項的文章,希望本篇文章能夠對正在從事UI設計的小伙伴們有所幫助,想要了解更多UI設計相關知識記得關注達內UI培訓官網,最后祝愿小伙伴們工作順利,成為一名優秀的UI設計師。

            來源UI設計思維*版權聲明:轉載文章和圖片均來自公開網絡,版權歸作者本人所有,推送文章除非無法確認,我們都會注明作者和來源。如果出處有誤或侵犯到原作者權益,請與我們聯系刪除或授權事宜。

            預約申請免費試聽課

            填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

            上一篇:從事UI設計工作需要具備哪些能力
            下一篇:成為優秀設計師的標準有哪些?

            UI設計師面試怎么回答才更容易拿到offer

            UI設計師面試如何獲得高薪

            從平面設計培訓班出來好找工作嗎

            UI設計師面試遇到的問題有哪些?

            • 掃碼領取資料

              回復關鍵字:視頻資料

              免費領取 達內課程視頻學習資料

            • 視頻學習QQ群

              添加QQ群:1143617948

              免費領取達內課程視頻學習資料

            Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

            選擇城市和中心
            貴州省

            廣西省

            海南省

            在线播放人成视频观看