User Interface

行動裝置介面設計

2022/03/24 (新增連結)

手機介面設計

手機介面最大不同的就是畫面大小與平板、電腦螢幕比較起來，小非常的多。另外，因為通常是透過行動通訊網路，網路的頻寬與穩定性是必須要納入考量。

另外，也因為畫面很小，在介面設計上就要注意，簡單的說，不像電腦的介面，因為螢幕大、網路也相對穩定，通常會提供很多美觀的圖片，在手機上，一方面會佔掉太多的畫面，找不到所需要的資訊，另一方面，也會因為下載速度慢，影響使用者使用的意願，這些都是要注意的重點。

通常，設計者也會忘記在同樣的設計下，使用者在手機、平板上大部分的情況下是使用手指去操作，操作的精準度和在電腦上使用滑鼠是很不一樣的，另外，手機的輸入是比較複雜的，能透過點選就盡量透過點選，因為手機跟電腦不同，通常都不會共用，有些輸入內容(如住址、電話)能幫使用者儲存下來，就盡量儲存，可以做為下次輸入的預設值。手機上沒有Tab鍵，輸入內容之後，必須點選下一個欄位，這部分也必須要考慮到。

當我們需要面對多種裝置的操作時，因為行動裝置的使用越來越普遍，建議採取mobile-first，也就是，先以行動裝置使用者為先，來設計介面、流程，未來再逐步去思考跨平台，讓不同平台的使用者能有不同的使用經驗。也就是未來還是要面對一個決策: 如果要符合多種裝置的使用者，就必須增加系統的複雜度，並偵測使用的裝置，提供不同的使用方式，通常，當系統使用者越來越多的時候，我們才會去思考透過優化去符合兩種作業系統的使用者的使用習慣。

雖然，透過RWD、PWA等技術可以解決部份的問題，但是，RWD、PWA不是萬靈丹，在設計上還是要小心這些問題。

Responsive Web Design

跨作業系統的問題

基本上我們在課程裡採用Material-UI (Materual Design)，所以，有些介面的操作方式，對於iOS的使用者而言，是不太習慣的。一開始可以先思考避開不相同的部分，跟跨裝置一樣，漸漸地還是要面對一個決策: 如果要符合兩種作業系統的使用者，就必須增加系統的複雜度 (偵測作業系統並提供不同的使用方式)，通常，當系統使用者越來越多的時候，我們才會去思考透過優化去符合兩種作業系統的使用者的使用習慣。

  • 32 Design Differences between iOS and Android Apps

    • Basic Differences

      • Human Interface Guidelines vs. Material Design

      • Units of measurement: pt vs. dp

      • Screen size: 320pt x 568pt vs. 360dp x 640dp

        • iOS:I prefer designing iOS apps in the lowest possible size: the iPhone 5 SE’s screen size of 320pt х 568pt

          • When designing for iPhone X, you also need to keep the Safe Area in mind.

        • For Android apps, we have a generally accepted screen size of 360dp х 640dp.

      • System font: San Francisco vs. Roboto

      • The Android Navigation Bar

      • The importance of elevation in Material

      • Differences in naming

    • Differences in Navigation and Patterns (UX)

    • Differences in Components (UI)

    • Other differences

  • Comparing iOS UI and Custom UI Design

  • 10 Key Takeaways from Google’s Material Design Guidelines

參考資料

一般

介面設計的差異

國際化