ਲਾਭ:
- ਉਦੇਸ਼, ਕੰਪੋਨੈਂਟ, ਚਾਰ ਅਵਸਥਾਵਾਂ (ਲੋਡਿੰਗ/ਖਾਲੀ/ਗਲਤੀ/ਪੂਰੀ), ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਦੇ ਕ੍ਰਮ ਵਿੱਚ ਜੈਟਪੈਕ ਕੰਪੋਜ਼ ਅਤੇ ਸਵਿਫਟਯੂਆਈ ਲਈ ਮਜ਼ਬੂਤ ਇੰਟਰਫੇਸ ਕੋਡ ਤਿਆਰ ਕਰਨ ਦੀ ਸਮਰੱਥਾ
- ਇੱਕ ਇੰਟਰਫੇਸ ਤਿਆਰ ਕਰਨ ਦੀ ਸਮਰੱਥਾ ਜੋ ਸਾਰੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਕੇ, ਸਹੀ ਲੇਬਲਿੰਗ, ਕਾਫ਼ੀ ਵਿਪਰੀਤ ਅਤੇ ਢੁਕਵੀਂ ਛੋਹ ਦੇ ਨਾਲ ਖੁੱਲ੍ਹਾ ਹੈ।
- ਕੇਂਦਰੀ ਥੀਮ ਤੋਂ ਰੰਗ ਅਤੇ ਸਪੇਸ ਪੜ੍ਹ ਕੇ ਇਕਸਾਰ, ਬਹੁ-ਭਾਸ਼ਾ ਅਤੇ ਹਲਕੇ/ਡਾਰਕ ਥੀਮ ਤਿਆਰ ਇੰਟਰਫੇਸ ਬਣਾਉਣ ਦੀ ਸਮਰੱਥਾ
ਇੱਕ ਮੋਬਾਈਲ ਐਪ ਦੀ ਸਫਲਤਾ ਮੁੱਖ ਤੌਰ 'ਤੇ ਇਸਦੇ ਉਪਭੋਗਤਾ ਇੰਟਰਫੇਸ (UI — ਉਹ ਸਕ੍ਰੀਨ ਜੋ ਉਪਭੋਗਤਾ ਵੇਖਦਾ ਅਤੇ ਛੂਹਦਾ ਹੈ) ਅਤੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ (UX — ਇਸਦੀ ਵਰਤੋਂ ਕਰਨਾ ਕਿੰਨਾ ਨਿਰਵਿਘਨ ਅਤੇ ਅਨੰਦਦਾਇਕ ਹੈ) ਦੁਆਰਾ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਉਪਭੋਗਤਾ ਖਰਾਬ ਕੋਡ ਨਹੀਂ ਦੇਖਦਾ, ਪਰ ਪਹਿਲੇ ਸਕਿੰਟ ਵਿੱਚ ਖਰਾਬ ਇੰਟਰਫੇਸ ਨੂੰ ਮਹਿਸੂਸ ਕਰਦਾ ਹੈ. AI ਇੰਟਰਫੇਸ ਵਿਕਾਸ ਵਿੱਚ ਦੋ ਸ਼ਕਤੀਸ਼ਾਲੀ ਭੂਮਿਕਾਵਾਂ ਨਿਭਾਉਂਦਾ ਹੈ: ਇੱਕ ਪਾਸੇ, ਇਹ ਡਿਜ਼ਾਈਨ ਵਿਚਾਰ, ਪ੍ਰਵਾਹ ਅਤੇ ਟੈਕਸਟ (UX ਰਾਈਟਿੰਗ) ਤਿਆਰ ਕਰਦਾ ਹੈ; ਦੂਜੇ ਪਾਸੇ, ਇਹ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਇਸ ਡਿਜ਼ਾਈਨ ਨੂੰ ਕਾਰਜਸ਼ੀਲ ਇੰਟਰਫੇਸ ਕੋਡ ਵਿੱਚ ਬਦਲਦਾ ਹੈ। ਇਸ ਯੂਨਿਟ ਵਿੱਚ, ਅਸੀਂ ਸਿੱਖਾਂਗੇ ਕਿ ਆਧੁਨਿਕ ਘੋਸ਼ਣਾਤਮਕ ਇੰਟਰਫੇਸ ਟੂਲਸ ਜੇਟਪੈਕ ਕੰਪੋਜ਼ (ਐਂਡਰੌਇਡ) ਅਤੇ ਸਵਿਫਟਯੂਆਈ (iOS) 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦੇ ਹੋਏ, AI ਨਾਲ ਤੇਜ਼, ਪਹੁੰਚਯੋਗ ਅਤੇ ਇਕਸਾਰ ਇੰਟਰਫੇਸ ਕਿਵੇਂ ਪੈਦਾ ਕੀਤੇ ਜਾਂਦੇ ਹਨ। "ਘੋਸ਼ਣਾਤਮਕ" ਦਾ ਮਤਲਬ ਹੈ ਕਿ ਸਕਰੀਨ ਨੂੰ ਕਿਵੇਂ ਖਿੱਚਣਾ ਹੈ, ਇਸ ਨੂੰ ਕਦਮ-ਦਰ-ਕਦਮ ਸਮਝਾਉਣ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ "ਇਸ ਸਥਿਤੀ ਵਿੱਚ ਸਕ੍ਰੀਨ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਣੀ ਚਾਹੀਦੀ ਹੈ" ਦਾ ਵਰਣਨ ਕਰਦੇ ਹੋ; ਸੰਦ ਬਾਕੀ ਕਰਦਾ ਹੈ.
ਡਿਜ਼ਾਈਨ ਤੋਂ ਕੋਡ ਤੱਕ: ਸਹੀ ਆਰਡਰ
AI ਨੂੰ "ਇੱਕ ਸੁੰਦਰ ਸਕ੍ਰੀਨ ਬਣਾਉਣ" ਲਈ ਕਹਿਣਾ ਅਸਪਸ਼ਟ ਹੈ ਕਿਉਂਕਿ "ਸੁੰਦਰ" ਨੂੰ ਮਾਪਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ। ਚੰਗੀ ਇੰਟਰਫੇਸ ਪੀੜ੍ਹੀ ਇਸ ਕ੍ਰਮ ਦੀ ਪਾਲਣਾ ਕਰਦੀ ਹੈ:
- ਉਦੇਸ਼ ਅਤੇ ਸਮੱਗਰੀ. ਸਕ੍ਰੀਨ ਕੀ ਕਰਦੀ ਹੈ, ਇਹ ਕਿਹੜੀ ਜਾਣਕਾਰੀ ਦਿਖਾਉਂਦੀ ਹੈ, ਉਪਭੋਗਤਾ ਕੀ ਕਰੇਗਾ?
- ਕੰਪੋਨੈਂਟ ਸੂਚੀ। ਭਾਗ ਜਿਵੇਂ ਕਿ ਸਿਰਲੇਖ, ਸੂਚੀ, ਬਟਨ, ਫਾਰਮ ਖੇਤਰ।
- ਹਾਲਾਤ. ਲੋਡਿੰਗ, ਖਾਲੀ (ਕੋਈ ਡਾਟਾ ਨਹੀਂ), ਗਲਤੀ, ਪੂਰੀ - ਚਾਰ ਬੁਨਿਆਦੀ ਸਕ੍ਰੀਨ ਸਥਿਤੀਆਂ।
- ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ. ਰੰਗ, ਟਾਈਪੋਗ੍ਰਾਫੀ, ਸਪੇਸਿੰਗ ਨਿਯਮ; ਆਮ ਤੌਰ 'ਤੇ ਸਮੱਗਰੀ 3 (Android) ਜਾਂ iOS ਦੇ ਮਨੁੱਖੀ ਇੰਟਰਫੇਸ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ਾਂ ਦੀ ਪਾਲਣਾ ਕਰਨਾ।
- ਪਹੁੰਚਯੋਗਤਾ। ਸਕਰੀਨ ਰੀਡਰ ਲੇਬਲ, ਉਚਿਤ ਕੰਟ੍ਰਾਸਟ, ਟਚ ਟੀਚੇ ਦਾ ਆਕਾਰ।
- ਕੋਡ। ਇਹ ਸਭ ਕਹਿਣ ਤੋਂ ਬਾਅਦ, ਕੰਪੋਸੇਬਲ ਜਾਂ ਸਵਿਫਟਯੂਆਈ ਵਿਊ ਪੀੜ੍ਹੀ।
ਸਭ ਤੋਂ ਵੱਧ ਅਕਸਰ ਛੱਡਿਆ ਜਾਣ ਵਾਲਾ ਕਦਮ ਤੀਜਾ ਹੈ। ਡਿਵੈਲਪਰ ਸਿਰਫ "ਪੂਰੀ" ਸਥਿਤੀ ਨੂੰ ਮੰਨਦੇ ਹਨ; ਜਦੋਂ ਕਿ ਅਸਲ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਉਪਭੋਗਤਾ ਜਿਆਦਾਤਰ "ਲੋਡਿੰਗ" ਅਤੇ "ਗਲਤੀ" ਸਥਿਤੀਆਂ ਦਾ ਸਾਹਮਣਾ ਕਰਦਾ ਹੈ। ਸਾਰੇ ਚਾਰ ਰਾਜਾਂ ਨੂੰ AI ਵਿੱਚ ਛਾਪਣਾ ਇੱਕ ਮਜ਼ਬੂਤ ਇੰਟਰਫੇਸ ਦਾ ਰਾਜ਼ ਹੈ।
ਸੰਕੇਤ: ਪ੍ਰੋਂਪਟ ਦੇ ਅੰਤ ਵਿੱਚ "ਲੋਡਿੰਗ, ਖਾਲੀ, ਗਲਤੀ, ਅਤੇ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਪੂਰਾ ਕਰੋ" ਸ਼ਾਮਲ ਕਰੋ। ਇਹ ਇੱਕ ਵਾਕ ਤੁਹਾਡੇ ਇੰਟਰਫੇਸ ਨੂੰ ਅਸਲ ਸੰਸਾਰ ਲਈ ਤਿਆਰ ਕਰਦਾ ਹੈ ਅਤੇ QA (ਗੁਣਵੱਤਾ ਜਾਂਚ) ਪੜਾਅ ਵਿੱਚ ਗਲਤੀਆਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਮਹੱਤਵਪੂਰਣ ਰੂਪ ਵਿੱਚ ਘਟਾਉਂਦਾ ਹੈ।
ਪਹੁੰਚਯੋਗਤਾ ਗੈਰ-ਵਿਵਾਦਯੋਗ ਹੈ
ਪਹੁੰਚਯੋਗਤਾ - ਵਿਜ਼ੂਅਲ, ਸੁਣਨ ਜਾਂ ਮੋਟਰ ਅਸਮਰਥਤਾਵਾਂ ਵਾਲੇ ਉਪਭੋਗਤਾਵਾਂ ਦੁਆਰਾ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਯੋਗਤਾ - ਇੱਕ ਨੈਤਿਕ ਜ਼ਿੰਮੇਵਾਰੀ ਅਤੇ ਸਟੋਰ ਅਤੇ ਕਾਨੂੰਨੀ ਉਮੀਦ ਦੋਵੇਂ ਹਨ। ਜੇ ਲੋੜ ਹੋਵੇ ਤਾਂ AI ਪਹੁੰਚਯੋਗ ਕੋਡ ਪੈਦਾ ਕਰਦਾ ਹੈ; ਜੇਕਰ ਲੋੜੀਦਾ ਨਾ ਹੋਵੇ ਤਾਂ ਇੱਕ ਟੈਗ ਰਹਿਤ, ਘੱਟ-ਕੰਟਰਾਸਟ ਇੰਟਰਫੇਸ ਦਿੰਦਾ ਹੈ। ਅੰਗੂਠੇ ਦੇ ਤਿੰਨ ਨਿਯਮ: ਹਰੇਕ ਇੰਟਰਐਕਟਿਵ ਐਲੀਮੈਂਟ ਨੂੰ ਸਕ੍ਰੀਨ ਰੀਡਰ (ਸਮੱਗਰੀ ਦਾ ਵਰਣਨ / ਪਹੁੰਚਯੋਗਤਾ ਲੇਬਲ), ਟੈਕਸਟ ਅਤੇ ਬੈਕਗ੍ਰਾਉਂਡ (ਘੱਟੋ-ਘੱਟ 4.5:1 ਅਨੁਪਾਤ) ਵਿਚਕਾਰ ਢੁਕਵਾਂ ਰੰਗ ਅੰਤਰ (ਘੱਟੋ-ਘੱਟ 48x48 dp/44x44 pt) ਲਈ ਇੱਕ ਅਰਥਪੂਰਨ ਲੇਬਲ ਦਿਓ। AI ਨੂੰ ਇਹ ਗੱਲਾਂ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਪੁੱਛੋ।
ਸਾਵਧਾਨ: ਏਆਈ ਇੱਕ ਸਜਾਵਟੀ ਆਈਕਨ ਵਿੱਚ ਇੱਕ ਲੰਮਾ ਪਹੁੰਚਯੋਗਤਾ ਟੈਗ ਵੀ ਜੋੜ ਸਕਦਾ ਹੈ; ਇਹ ਸਕ੍ਰੀਨ ਰੀਡਰ ਉਪਭੋਗਤਾ ਨੂੰ ਬੇਲੋੜੀ ਬਕਵਾਸ ਨਾਲ ਹਾਵੀ ਕਰ ਦਿੰਦਾ ਹੈ। ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਜਾਵਟੀ ਤੱਤ "ਪਹੁੰਚਯੋਗਤਾ ਤੋਂ ਲੁਕੇ" ਹੋਣੇ ਚਾਹੀਦੇ ਹਨ (ਸਕ੍ਰੀਨ ਰੀਡਰ ਦੁਆਰਾ ਛੱਡੇ ਜਾਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੱਤੀ ਗਈ ਹੈ)। ਤਿਆਰ ਕੀਤੇ ਲੇਬਲਾਂ ਦੀ ਸਮੀਖਿਆ ਕਰੋ: ਅਰਥਪੂਰਨ ਨੂੰ ਬੋਲਣ ਦਿਓ, ਸਜਾਵਟੀ ਨੂੰ ਚੁੱਪ ਰਹਿਣ ਦਿਓ।
ਇਕਸਾਰਤਾ: ਡਿਜ਼ਾਇਨ ਸਿਸਟਮ ਅਤੇ ਥੀਮ
ਪੇਸ਼ੇਵਰ ਐਪਲੀਕੇਸ਼ਨਾਂ ਬੇਤਰਤੀਬ ਰੰਗਾਂ ਅਤੇ ਸਪੇਸਿੰਗ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕਰਦੀਆਂ; ਇੱਕ ਡਿਜ਼ਾਇਨ ਸਿਸਟਮ (ਰੰਗਾਂ, ਫੌਂਟਾਂ, ਸਪੇਸਿੰਗ, ਅਤੇ ਭਾਗਾਂ ਦਾ ਮਿਆਰੀ ਸੈੱਟ) ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ। ਜੇ ਤੁਸੀਂ AI ਨੂੰ ਆਪਣੇ ਥੀਮ ਮੁੱਲ (ਮੁੱਖ ਰੰਗ, ਸੈਕੰਡਰੀ ਰੰਗ, ਕੋਨੇ ਦਾ ਘੇਰਾ, ਟਾਈਪੋਗ੍ਰਾਫੀ ਸਕੇਲ) ਦਿੰਦੇ ਹੋ, ਤਾਂ ਸਾਰੀਆਂ ਸਕ੍ਰੀਨਾਂ ਇਕਸਾਰ ਹੋ ਜਾਣਗੀਆਂ। ਜੇਕਰ ਤੁਸੀਂ ਨਹੀਂ ਕਰਦੇ, ਤਾਂ ਹਰੇਕ ਸਕ੍ਰੀਨ ਨੀਲੇ ਰੰਗ ਦੀ ਇੱਕ ਵੱਖਰੀ ਸ਼ੇਡ ਦੀ ਵਰਤੋਂ ਕਰੇਗੀ ਅਤੇ ਐਪ ਬੇਤਰਤੀਬ ਦਿਖਾਈ ਦੇਵੇਗੀ। ਸਭ ਤੋਂ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ ਪਹਿਲਾਂ AI ਨੂੰ ਥੀਮ/ਡਿਜ਼ਾਈਨ ਟੋਕਨ ਫਾਈਲ ਬਣਾਉਣ ਲਈ ਕਹੋ, ਫਿਰ ਸਾਰੀਆਂ ਸਕ੍ਰੀਨਾਂ ਨੂੰ ਉਸ ਥੀਮ ਨਾਲ ਜੋੜੋ।
ਵਿਸ਼ਾ
ਮਾੜੀ ਪਹੁੰਚ
ਮਜ਼ਬੂਤ ਪਹੁੰਚ
ਰੰਗ
ਹਰੇਕ ਸਕ੍ਰੀਨ ਨੂੰ ਹੱਥੀਂ ਰੰਗ ਕੋਡ ਕਰੋ
ਕੇਂਦਰੀ ਥੀਮ, ਥੀਮ ਤੋਂ ਪੜ੍ਹੀਆਂ ਗਈਆਂ ਸਕ੍ਰੀਨਾਂ
ਸਥਿਤੀਆਂ
ਸਿਰਫ਼ "ਪੂਰੀ" ਸਕ੍ਰੀਨ
ਲੋਡਿੰਗ/ਖਾਲੀ/ਗਲਤੀ/ਪੂਰੀਆਂ ਚਾਰ ਅਵਸਥਾਵਾਂ
ਪਹੁੰਚਯੋਗਤਾ
ਬਾਅਦ ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ
ਇਹ ਸ਼ੁਰੂ ਤੋਂ ਦਾਅਵੇ ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ
ਟੈਕਸਟ
ਕੋਡ ਵਿੱਚ ਸ਼ਾਮਲ
ਵੱਖਰਾ ਸਰੋਤ, ਬਹੁ-ਭਾਸ਼ਾ ਤਿਆਰ ਹੈ
ਤਿੰਨ ਛੋਟੇ ਕੇਸ
ਕੇਸ 1 - ਖਾਲੀ ਕੇਸ ਸੁਰੱਖਿਅਤ ਕੀਤਾ ਗਿਆ। ਇੱਕ ਨਿਊਜ਼ ਐਪ ਟੀਮ ਕੋਲ ਏਆਈ ਪ੍ਰਿੰਟ ਵਿਅਕਤੀਗਤ ਸਕ੍ਰੀਨ ਸਟੇਟਸ ਸਨ। "ਵਿਹਲੀ ਸਥਿਤੀ" ਸਕ੍ਰੀਨ ਲਈ ਧੰਨਵਾਦ ("ਅਜੇ ਤੱਕ ਕੋਈ ਖਬਰ ਸੁਰੱਖਿਅਤ ਨਹੀਂ ਕੀਤੀ ਗਈ"), ਉਪਭੋਗਤਾ ਟੈਸਟਿੰਗ ਵਿੱਚ 70% ਭਾਗੀਦਾਰਾਂ ਨੇ ਐਪ ਨੂੰ ਖਾਲੀ ਸਕ੍ਰੀਨ 'ਤੇ ਨਹੀਂ ਛੱਡਿਆ; ਪਿਛਲੇ ਸੰਸਕਰਣ ਵਿੱਚ, ਖਾਲੀ ਸਕ੍ਰੀਨ ਸਫੈਦ ਰਹੀ ਅਤੇ ਉਪਭੋਗਤਾਵਾਂ ਨੇ ਸੋਚਿਆ ਕਿ ਇਸਨੂੰ "ਟੁੱਟਿਆ" ਅਤੇ ਛੱਡ ਦਿੱਤਾ ਗਿਆ ਸੀ। ਇੱਕ ਛੋਟੀ ਕਾਪੀ ਨੇ ਧਾਰਨ ਦਰ ਵਿੱਚ ਵਾਧਾ ਕੀਤਾ।
ਕੇਸ 2 - ਕੰਟ੍ਰਾਸਟ ਅਸਵੀਕਾਰ। ਇੱਕ ਟੀਮ ਨੇ ਐਪ ਸਟੋਰ 'ਤੇ ਹਲਕੇ ਸਲੇਟੀ, ਬ੍ਰਾਂਡ ਰੰਗ ਵਿੱਚ ਟੈਕਸਟ ਵਾਲੀਆਂ ਸਕ੍ਰੀਨਾਂ ਦੇ ਨਾਲ ਅਰਜ਼ੀ ਦਿੱਤੀ। ਐਪਲ ਨੇ ਘੱਟ ਕੰਟਰਾਸਟ ਦੇ ਕਾਰਨ ਪਹੁੰਚਯੋਗਤਾ ਦੇ ਆਧਾਰ 'ਤੇ ਚੇਤਾਵਨੀ ਜਾਰੀ ਕੀਤੀ ਹੈ। ਜਦੋਂ AI ਨੂੰ "ਟੈਕਸਟ-ਬੈਕਗ੍ਰਾਉਂਡ ਕੰਟ੍ਰਾਸਟ ਨੂੰ 4.5:1 ਤੋਂ ਉੱਪਰ ਵਧਾਉਣ" ਲਈ ਕਿਹਾ ਗਿਆ, ਤਾਂ ਰੰਗ ਗੂੜ੍ਹੇ ਹੋ ਗਏ ਅਤੇ ਸਮੱਸਿਆ ਹੱਲ ਹੋ ਗਈ। ਜੇਕਰ ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਮੰਗ ਕੀਤੀ ਹੁੰਦੀ ਤਾਂ ਕੋਈ ਦੇਰੀ ਨਹੀਂ ਹੋਣੀ ਸੀ।
ਕੇਸ 3 - ਸਜਾਵਟੀ ਲੇਬਲ ਦਾ ਰੌਲਾ। ਇੱਕ ਨੇਤਰਹੀਣ ਟੈਸਟਰ ਨੇ ਦੱਸਿਆ ਕਿ ਹਰ ਗਹਿਣੇ ਦਾ ਪ੍ਰਤੀਕ ("ਲਾਈਨ," "ਬਿੰਦੀ," "ਸ਼ੈਡੋ") AI-ਉਤਪੰਨ ਸਕ੍ਰੀਨ 'ਤੇ ਉੱਚੀ ਆਵਾਜ਼ ਵਿੱਚ ਪੜ੍ਹਿਆ ਗਿਆ ਸੀ, ਜਿਸ ਨਾਲ ਸਕ੍ਰੀਨ ਨੂੰ ਵਰਤੋਂਯੋਗ ਨਹੀਂ ਬਣਾਇਆ ਗਿਆ ਸੀ। ਜਦੋਂ ਸਜਾਵਟੀ ਤੱਤ ਪਹੁੰਚ ਤੋਂ ਛੁਪੇ ਹੋਏ ਸਨ ਤਾਂ ਸਕ੍ਰੀਨ ਰੀਡਰ ਅਨੁਭਵ ਤਰਲ ਬਣ ਗਿਆ। ਪਾਠ: ਪਹੁੰਚਯੋਗਤਾ ਦਾ ਅਰਥ ਹੈ "ਸਹੀ ਟੈਗ", "ਬਹੁਤ ਜ਼ਿਆਦਾ ਟੈਗ" ਨਹੀਂ।
ਕਮਜ਼ੋਰ ਪ੍ਰੋਂਪਟ / ਮਜ਼ਬੂਤ ਪ੍ਰੋਂਪਟ
ਕਮਜ਼ੋਰ ਪ੍ਰੋਂਪਟ: "ਇੱਕ ਪ੍ਰੋਫਾਈਲ ਸਕ੍ਰੀਨ ਡਿਜ਼ਾਈਨ ਕਰੋ।"
ਸ਼ਕਤੀਸ਼ਾਲੀ ਪ੍ਰੋਂਪਟ: "iOS/SwiftUI ਲਈ ਉਪਭੋਗਤਾ ਪ੍ਰੋਫਾਈਲ ਸਕ੍ਰੀਨ ਤਿਆਰ ਕਰੋ। ਸਮੱਗਰੀ: ਅਵਤਾਰ, ਨਾਮ, ਈਮੇਲ, 'ਪ੍ਰੋਫਾਈਲ ਸੰਪਾਦਿਤ ਕਰੋ' ਬਟਨ, ਸੈਟਿੰਗਾਂ ਦੀ ਸੂਚੀ। ਸਥਿਤੀਆਂ: ਲੋਡਿੰਗ (ਪਿੰਜਰ), ਤਰੁੱਟੀ (ਮੁੜ ਕੋਸ਼ਿਸ਼ ਬਟਨ), ਪੂਰੀ। ਡਿਜ਼ਾਈਨ: ਗੈਰ-ਸਮੱਗਰੀ, iOS HIG ਦੇ ਅਨੁਕੂਲ; ਸਿਸਟਮ ਰੰਗ, ਗਤੀਸ਼ੀਲ ਕਿਸਮ: ਪਹੁੰਚਯੋਗਤਾ, ਹਰ ਇੱਕ ਲਈ ਪਹੁੰਚਯੋਗਤਾ, ਉਪਲਬਧਤਾ ਨੂੰ ਛੁਪਾਓ ਟਾਰਗਿਟ ਮਿਨ 44pt ਨੂੰ ਇੱਕ ਵੱਖਰੀ ਫਾਈਲ ਤੋਂ ਪੜ੍ਹੋ, ਪਹਿਲਾਂ ਕੰਪੋਨੈਂਟ ਟ੍ਰੀ ਨੂੰ ਏਮਬੇਡ ਨਾ ਕਰੋ, ਫਿਰ ਕੋਡ ਨੂੰ ਐਕਸਪੋਰਟ ਕਰੋ।"
ਨਕਲ ਕਰਨ ਯੋਗ ਟੈਂਪਲੇਟਸ
ਸਕ੍ਰੀਨ ਜਨਰੇਸ਼ਨ ਟੈਮਪਲੇਟ: "[ਪਲੇਟਫਾਰਮ/ਟੂਲ] ਲਈ [ਸਕ੍ਰੀਨ ਨਾਮ] ਤਿਆਰ ਕਰੋ। ਸਮੱਗਰੀ: [ਐਲੀਮੈਂਟਸ]। ਵਰਤੋਂਕਾਰ ਦੀਆਂ ਕਾਰਵਾਈਆਂ: [ਕਾਰਵਾਈਆਂ]। ਚਾਰ ਅਵਸਥਾਵਾਂ ਨੂੰ ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਤਿਆਰ ਕਰੋ: ਲੋਡਿੰਗ, ਖਾਲੀ, ਤਰੁੱਟੀ, ਪੂਰੀ। ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ: [ਮਟੀਰੀਅਲ 3 / iOS HIG], ਥੀਮ ਟੋਕਨਾਂ ਤੋਂ ਪੜ੍ਹੋ। ਪਹੁੰਚਯੋਗਤਾ, ਟਾਰਗੇਟ 4 ਮਾਨਕ, ਟਚਲੈਬ, ਮਾਨਕ: 5. > ਟਚਲੈਬ: 5.
ਥੀਮ/ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਟੈਂਪਲੇਟ: "ਮੇਰੇ ਐਪ ਲਈ ਇੱਕ ਕੇਂਦਰੀ ਥੀਮ ਪਰਿਭਾਸ਼ਾ ਤਿਆਰ ਕਰੋ ([ਸਵਿਫਟਯੂਆਈ ਵਿੱਚ ਥੀਮ / ਇੱਕ ਡਿਜ਼ਾਈਨ ਟੋਕਨ ਬਣਤਰ ਲਿਖੋ]):- ਪ੍ਰਾਇਮਰੀ ਰੰਗ [ਹੈਕਸ], ਸੈਕੰਡਰੀ [ਹੈਕਸ], ਗਲਤੀ ਦਾ ਰੰਗ, ਸਤਹ ਦਾ ਰੰਗ- ਟਾਈਪੋਗ੍ਰਾਫੀ ਸਕੇਲ (ਸਿਰਲੇਖ, ਸਰੀਰ, ਵਰਣਨ)- ਸਪੇਸਿੰਗ ਸਕੇਲ (4,8,16,24)- ਏ ਕੋਨਾ ਲਾਈਟ ਸਟੈਂਡਰਡ ਅਤੇ ਡਾਰਕ ਸਪੋਰਟ।
ਪਹੁੰਚਯੋਗਤਾ ਆਡਿਟ ਟੈਮਪਲੇਟ:"ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਇਸ ਸਕ੍ਰੀਨ ਕੋਡ ਦੀ ਜਾਂਚ ਕਰੋ: 1) ਕੀ ਇੱਥੇ ਕੋਈ ਅਣ-ਟੈਗ ਕੀਤੇ ਇੰਟਰਐਕਟਿਵ ਤੱਤ ਹਨ? 2) ਕੀ ਕੰਟ੍ਰਾਸਟ ਅਨੁਪਾਤ ਕਾਫ਼ੀ ਹਨ? 3) ਕੀ ਟਚ ਟੀਚੇ ਕਾਫ਼ੀ ਵੱਡੇ ਹਨ? 4) ਕੀ ਸਜਾਵਟੀ ਤੱਤ ਸਕ੍ਰੀਨ ਰੀਡਰ ਤੋਂ ਲੁਕੇ ਹੋਏ ਹਨ? ਹਰੇਕ ਮੁੱਦੇ ਲਈ ਹੱਲ ਸੁਝਾਓ। [ਕੋਡ]"
ਕੋਡ ਟੈਮਪਲੇਟ ਲਈ ਡਿਜ਼ਾਈਨ: "ਮੈਂ ਹੇਠਾਂ ਦਿੱਤੇ ਡਿਜ਼ਾਈਨ ਦਾ ਵਰਣਨ ਕਰਦਾ ਹਾਂ: [ਸਕ੍ਰੀਨ ਵਰਣਨ ਜਾਂ ਸਕ੍ਰੀਨਸ਼ੌਟ]। ਇਸਦਾ [ਕੰਪੋਜ਼/ਸਵਿਫਟਯੂਆਈ] ਕੋਡ ਵਿੱਚ ਅਨੁਵਾਦ ਕਰੋ। ਡਿਜ਼ਾਇਨ ਲਈ ਸਪੇਸਿੰਗ ਅਤੇ ਅਲਾਈਨਮੈਂਟ ਸਹੀ ਰੱਖੋ, ਪਰ ਸਾਰੀਆਂ ਚਾਰ ਅਵਸਥਾਵਾਂ ਜੋੜੋ।"
ਆਮ ਗਲਤੀਆਂ
- ਬਸ ਪੂਰੀ ਸਥਿਤੀ ਬਾਰੇ ਸੋਚਣਾ. ਜ਼ਿਆਦਾਤਰ ਸਮਾਂ ਅਸਲ ਉਪਭੋਗਤਾ ਲੋਡਿੰਗ/ਗਲਤੀ ਸਕ੍ਰੀਨ ਨੂੰ ਦੇਖਦਾ ਹੈ।
- ਕੋਡ ਵਿੱਚ ਰੰਗ ਅਤੇ ਸਪੇਸ ਸ਼ਾਮਲ ਕਰਨਾ। ਜੇ ਥੀਮ ਕੇਂਦਰੀ ਨਹੀਂ ਹੈ, ਤਾਂ ਇਕਸਾਰਤਾ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ ਅਤੇ ਰੱਖ-ਰਖਾਅ ਮੁਸ਼ਕਲ ਹੋ ਜਾਂਦੀ ਹੈ।
- ਆਖਰੀ ਲਈ ਪਹੁੰਚਯੋਗਤਾ ਨੂੰ ਛੱਡਣਾ। ਇਸ ਨੂੰ ਬਾਅਦ ਵਿੱਚ ਜੋੜਨਾ ਮਹਿੰਗਾ ਹੈ; ਜੇਕਰ ਸ਼ੁਰੂ ਤੋਂ ਬੇਨਤੀ ਕੀਤੀ ਜਾਵੇ ਤਾਂ ਇਹ ਲਾਗਤ-ਮੁਕਤ ਹੈ।
- ਓਵਰਲੇਬਲਿੰਗ। ਸਜਾਵਟੀ ਤੱਤਾਂ ਨੂੰ ਪੜ੍ਹਨਾ ਵੀ ਸਕ੍ਰੀਨ ਰੀਡਰ ਅਨੁਭਵ ਨੂੰ ਵਿਗਾੜਦਾ ਹੈ।
- ਕੋਡ ਵਿੱਚ ਟੈਕਸਟ ਨੂੰ ਏਮਬੈਡ ਕਰਨਾ। ਜਦੋਂ ਬਹੁ-ਭਾਸ਼ਾਈ ਸਹਾਇਤਾ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਤਾਂ ਹਰੇਕ ਸਕ੍ਰੀਨ ਨੂੰ ਹੱਥੀਂ ਬਦਲਣਾ ਜ਼ਰੂਰੀ ਹੁੰਦਾ ਹੈ; ਟੈਕਸਟ ਨੂੰ ਵੱਖਰਾ ਰੱਖੋ।
- ਸਕ੍ਰੀਨਸ਼ੌਟ ਤੋਂ ਇੱਕ ਸਹੀ ਕਾਪੀ ਦੀ ਉਮੀਦ ਹੈ। AI ਡਿਜ਼ਾਈਨ ਲਗਭਗ ਪੈਦਾ ਕਰਦਾ ਹੈ. ਪਿਕਸਲ ਸ਼ੁੱਧਤਾ ਹੱਥੀਂ ਸੈੱਟ ਕੀਤੀ ਗਈ ਹੈ।
ਸਾਰੰਸ਼ ਵਿੱਚ
AI ਇੰਟਰਫੇਸ ਉਤਪਾਦਨ ਵਿੱਚ ਸ਼ਕਤੀਸ਼ਾਲੀ ਹੈ, ਪਰ ਇਸ ਨੂੰ ਮਾਰਗਦਰਸ਼ਨ ਦੀ ਲੋੜ ਹੈ। ਸਹੀ ਕ੍ਰਮ: ਉਦੇਸ਼, ਭਾਗ, ਚਾਰ ਅਵਸਥਾਵਾਂ (ਲੋਡਿੰਗ/ਖਾਲੀ/ਗਲਤੀ/ਪੂਰੀ), ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ, ਪਹੁੰਚਯੋਗਤਾ, ਫਿਰ ਕੋਡ। ਪਹੁੰਚਯੋਗਤਾ ਗੈਰ-ਸੋਧਯੋਗ ਹੈ ਅਤੇ ਇਸਦਾ ਮਤਲਬ ਹੈ "ਸਹੀ ਲੇਬਲ", "ਬਹੁਤ ਜ਼ਿਆਦਾ ਲੇਬਲ" ਨਹੀਂ। ਇਕਸਾਰਤਾ ਲਈ, ਕੇਂਦਰੀ ਥੀਮ ਤੋਂ ਰੰਗ ਅਤੇ ਸਪੇਸਿੰਗ ਪੜ੍ਹੋ, ਇਸਨੂੰ ਕੋਡ ਵਿੱਚ ਏਮਬੈਡ ਨਾ ਕਰੋ। ਮਜ਼ਬੂਤ ਇੱਛਾ ਇਹ ਸਭ ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦੀ ਹੈ; ਇਸ ਤਰ੍ਹਾਂ, ਇੰਟਰਫੇਸ ਅਸਲ ਸੰਸਾਰ, ਸਟੋਰ ਦੀ ਪ੍ਰਵਾਨਗੀ ਅਤੇ ਸਾਰੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਤਿਆਰ ਹੈ.
ਐਪਲੀਕੇਸ਼ਨ ਦਾ ਕੰਮ
ਇੱਕ ਸੈਟਿੰਗ ਸਕ੍ਰੀਨ ਲਈ "ਸਕ੍ਰੀਨ ਜਨਰੇਸ਼ਨ ਟੈਂਪਲੇਟ" ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, AI ਨੂੰ ਕੰਪੋਜ਼ ਜਾਂ SwiftUI ਕੋਡ ਲਈ ਪੁੱਛੋ ਅਤੇ ਸਾਰੇ ਚਾਰ ਰਾਜਾਂ ਲਈ ਬੇਨਤੀ ਕਰੋ। ਫਿਰ "ਪਹੁੰਚਯੋਗਤਾ ਜਾਂਚ ਟੈਂਪਲੇਟ" ਨਾਲ ਉਸੇ ਕੋਡ ਦੀ ਜਾਂਚ ਕਰੋ। ਘੱਟੋ-ਘੱਟ ਇੱਕ ਪਹੁੰਚਯੋਗਤਾ ਸੁਧਾਰ (ਗੁੰਮ ਲੇਬਲ, ਘੱਟ ਕੰਟ੍ਰਾਸਟ, ਜਾਂ ਛੋਟਾ ਟੱਚ ਟੀਚਾ) ਲੱਭੋ ਅਤੇ ਠੀਕ ਕਰੋ ਅਤੇ ਨੋਟ ਕਰੋ ਕਿ ਕਿਹੜੀ ਸਥਿਤੀ (ਲੋਡਿੰਗ/ਖਾਲੀ/ਗਲਤੀ) ਤੁਹਾਨੂੰ ਲੱਗਦਾ ਹੈ ਕਿ ਅਸਲ ਵਰਤੋਂ ਵਿੱਚ ਅਕਸਰ ਦਿਖਾਈ ਦੇਵੇਗਾ।
ਚੈੱਕਲਿਸਟ
- [ ] ਮੈਂ ਪ੍ਰੋਂਪਟ ਵਿੱਚ ਡਿਸਪਲੇ ਦੇ ਉਦੇਸ਼ ਅਤੇ ਭਾਗਾਂ ਨੂੰ ਸਪਸ਼ਟ ਕਰ ਦਿੱਤਾ ਹੈ
- [ ] ਮੇਰੇ ਕੋਲ ਚਾਰ ਅਵਸਥਾਵਾਂ (ਲੋਡਿੰਗ/ਖਾਲੀ/ਗਲਤੀ/ਪੂਰੀ) ਵੱਖਰੇ ਤੌਰ 'ਤੇ ਤਿਆਰ ਕੀਤੀਆਂ ਗਈਆਂ ਸਨ
- [ ] ਮੈਂ ਕੇਂਦਰੀ ਥੀਮ ਤੋਂ ਰੰਗ ਅਤੇ ਸਪੇਸ ਨੂੰ ਪੜ੍ਹਿਆ, ਮੈਂ ਇਸਨੂੰ ਕੋਡ ਵਿੱਚ ਸ਼ਾਮਲ ਨਹੀਂ ਕੀਤਾ।
- [ ] ਮੈਂ ਸ਼ੁਰੂਆਤ ਤੋਂ ਪਹੁੰਚਯੋਗਤਾ ਲੇਬਲ ਅਤੇ ਕੰਟ੍ਰਾਸਟ ਚਾਹੁੰਦਾ ਸੀ
- [ ] ਮੈਂ ਪੁਸ਼ਟੀ ਕੀਤੀ ਹੈ ਕਿ ਸਜਾਵਟੀ ਤੱਤ ਸਕ੍ਰੀਨ ਰੀਡਰ ਤੋਂ ਲੁਕੇ ਹੋਏ ਹਨ
- [ ] ਮੈਂ ਲਿਖਤਾਂ ਨੂੰ ਵੱਖਰਾ ਰੱਖਿਆ, ਕਈ ਭਾਸ਼ਾਵਾਂ ਲਈ ਤਿਆਰ