#5 iOS Human Interface Guidelines 閱讀心得 (下)

以下為iOS Human Interface…

#4 iOS Human Interface Guidelines 閱讀心得 (上)

本篇為閱讀Human Interface Guidelines後，搭配其他相關資料，歸納出來的重點整理，希望自己有正確理解每個Guidelines的意思~

#65 閱讀 iOS App 設計相關文章，在 Medium 寫心得整理

閱讀 iOS App 設計相關文章的心得整理

• 人機界面

#08 UIImageView 的 13 種 Content Mode

Scale To Fill / Aspect Fit / Aspect Fill / Redraw / Center / Top /…

#4 跟著貞子認識UI元件〈2〉Stack View + Scroll View的運用

上一次提到貞子不想再當地縛靈，想要四處旅遊，這個願望可以用Stack View + Scroll View來實現，重點還不用寫程式～

#06 能輸入單行文字的 UITextField

Placeholder：淺色的提示輸入內容字樣。

#66 研究Apple開發官網

Apple Developer 官網對於開發者來說是一個很重要的訊息集散地。

#作業2.1 — 研究以下 UI 元件: Segmented Control，Slider，Switch，Activity Indicator View，Progress View，Page Control，Date…

#4 跟著柴犬學Xcode 常用 UI 元件

UI 元件：Segmented Control，Slider，Switch，Activity Indicator View，Progress…

＃2模仿第一次親密接觸的 Swift iOS App 班學生自我介紹

自我介紹

Swift Practice # 28 & Work # 142使用圖片文字emoji邊框圓角製作梗圖及漂亮卡片

#01 Hello你好嗎？iOS Develop工程師

嗨！我是ＬＵＬＵ,文章的Title以兩個月後的身分跟自己問好

先跟大家分享一下自己為什麼想學習swift,當初想成為軟體工程師就是想寫一款自己的app,加上自己是apple的忠實粉絲,唯有上架自己的app才能算是完成自己的目標！（當然我很清楚這只是開始）

但…其實一開始誤打誤撞先開啟我的程式之旅的是Java,老實說有點挫折,剛開始學習面對只有input and…

#72 研究App上的畫面，分析用到哪些元件，並分析優缺點

記帳城市、Pintrest

#07 能輸入多行文字的 UITextView

Editable 及 Selectable

• 都不勾選：點選無反應。

模仿個 Podcast

微模仿 Podcast

先準備 app icon

研究 UIImageView 的 Content Mode

研究以下 Content Mode 的顯示效果。

Scale To Fill，Aspect Fit，Aspect…

#5 研究顯示文字的 UILabel - Line Breaks / Autoshrink / Shadow

#2 模仿一頁精美的App畫面

這幾天一直在思考要找什麼樣的App當作這個作業的範例，最後我選擇了目前在公司開發中的項目作為練習，主要原因有兩個：1.有現成的素材可以使用、2.使用的元件很多元(差點被搞死)。基於以上原因呢，所以我特別挑了一個不用寫程式碼的頁面來練習～

用 Transition style 控制轉場動畫

Cover Vertical, Flip Horizontal, Cross Dissolve, Partial Curl

將 Xcode App 安裝到 iPhone

Xcode App → Your iPhone

成品：能在手機上玩自己做的 App 超有成就感的啦 🤩😎😏

#5 運用Marvel 製作Prototype App

學習製作Prototype APP

什麼是Marvel?

#HW2–1:Make friend with component.

Segmented Control、Slider、Switch、Activity Indicator View、Progress View、Date Picker、Page…

#2 GitHub 的使用

事前準備

1 申請 GitHub 帳號

作業－＃ 07–7元件研究（Page Control）

三個圓點點，這個就是手勢換頁的元件！

#4-2 研究文字相關UI元件 lable TextField TextView

label

HW1–5 利用 marvel App 製作 prototype app

#6 研究Apple開發官網

一開始點開網站，內容分許多區塊，每個區塊顯示都是Apple更新了什麼功能、介面、資訊，透過朋友貼給我的資訊才發現，Apple官方有給元件的介紹，像是如何宣告元件，就連在Debug時可以遵照哪些步驟可以避免一些常見的錯誤都有列出來，超級貼心(雖然現在對內容都還沒有感覺…

作業－＃07–1元件研究 (Segmented 進階版)

剛好看到一位學長的作品，順手就實作抄襲了一下。

最後的成品：

作業－＃ 07–8元件研究（Date Picker）

日期元件，蠻常見的東西，填生日或是訂貨時間等等都會用得到。

#3研究以下 UI 元件

PETER的作業中提供了不少可以去研究的方向，像是看APPLE DEVELOPER的英文文章，研究APPLE官網，設置APPICON，研究SF SYMBOL3，研究 UIButton plain，gray，tinted & filled…

#58 研究輸入多行文字的 UITextView

勾選 Selectable 只能選取內容、複製，但無法編輯

作業－＃ 07–1 UI 元件研究（Segmented）

總算是做完了作業一的所有作業，接下來的部分開始作業二的內容。
我們就一個一個解決吧。為了熟悉每個ＵＩ元件在做什麼，我們要開始研究一下每個ＵＩ的屬性。

HW2–1 研究UI元件

UI元件挺好玩的，且Xcode的介面很簡單明瞭上手挺快的。

1. Segmented…

#HW1-1: hello xcode!Create App without code.

[內容]
1.建置一個app專案

作業－＃07–2元件研究（Slider）

Slider 看起來項是一個拉桿，找了一下手機，看起來應用在聲音大小的元件。拉大拉小這樣。

#4-1 研究各項UI元件 Segmented Control、Slider、Switch、Activity Indicator View、Progress View、Page Control、Visual Effect View with Blur、Date Picker

Segmented Control

作業－＃ 07–6元件研究（Visual Effect View with Blur）

這個元件不知道有沒有喚起大家童年的初心？

作業－＃ 07–4元件研究（Activity Indicator View）

J個像花一般令人生氣的東西，通常只有我在遊戲讀不進去的時候，會一直轉一直轉的讀取進度動畫，真是令人生氣啊！！！😡😡😡

作業－＃ 06 模仿第一次親密接觸的格式自我介紹

這份作業被我擺在最後才寫，是幾乎沒有寫什麼部落格經驗的我，不知道能擠出什麼…牙膏（不好笑）。

Easy 的自我介紹：

大家好，我叫Easy，是一個偏鄉努力工作的廢柴工程師（淚笑
第一份工作就在做系統方面的流程和規劃，所以在這八年期間做過很多系統建置、分析規劃等經驗。

HW1–4 研究Apple開發網站

#7 從 App Icon Generator 產生 iOS App Icon

有了APP的第一步，當然是希望有一個有代表性的外觀Icon啦，這個部分可以使用一個非常方便的網址App Icon Generator

作業－＃ 08 設定 App Icon

這個作業看起來就是使用一下 App Icon Generator 網站。
以前都沒想過會有網站一次幫忙處理所有的圖片，沒有人分享這個網站，我想我應該會一個一個自己圖法煉鋼的轉檔案吧！！！

#8 實現水平捲動，上下捲動和分頁的 scroll view

這次練習的作業是實現水平滾動APP的頁面，我從我喜歡的衣服品牌中分別從日牌美牌及台牌，各選擇一個品牌來展示，以下是我的成果。

#6 研究Apple Developer 網站

作業－＃ 07–3元件研究（Switch）

嗯…這很明顯就是一個拉桿開關，而且我還經常用到。

作業－＃ 07–5元件研究（Progress View）

Ｊ這東西也難不倒我，玩遊戲的人經常看過類似這種轉場讀取，或是下載package的讀取進度條。